Эффект
капли

Модификаторы

Модификация позволяет создать эффект капли, при наведении на объект

Описание

Инструкция по подключению

В Zero блоке создаём shape и добавляем на него класс list-shape-block. Удаляем у него заливку. (он будет служить триггером)

Шаг 1

Загружаем svg картинку капли и вешаем на неё класс list-block. Выравниваем эти два блока между собой. Картинку помещаем под шейп-триггер

Шаг 2

Исходник капли

Cоздаём блок T123 и помещаем в него код

Шаг 3


<!--Анимация капли-->
<style>

    .list-block {
        transform: translateX(-200px);
        overflow: hidden;
    }
        .list-block-hover {
        transform: translateX(-200px);
        overflow: hidden;
    }
    .list-block .tn-atom {
            transform: translate3d(0px, -50%, 0px) scale3d(1, 1, 1) rotateX(90deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
            transform-style: preserve-3d;    
            opacity: 1;
            transition: opacity 700ms ease 0s, transform 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
    .list-block-hover .tn-atom {
        transform: translate3d(0px, -7%, 0px) scale3d(1, 1, 1) rotateX(30deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
        transform-style: preserve-3d;    
            opacity: 1;
            transition: opacity 700ms ease 0s, transform 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    }
</style>

<!--Создаём классы при наведении-->
<script>
$(document).ready(function() {     
    $('.list-shape-block').hover(function(){     
        $('.list-block').addClass('list-block-hover');    
    },     
    function(){    
        $('.list-block').removeClass('list-block-hover');     
    });
});   
</script>



<!--Двигаем капли по движению мыши-->
<script>
    let mouseX = 0;
let ballX = 0;
let speed = 0.02;
function animate(){
let distX = mouseX - ballX;
ballX = ballX + (distX * speed);
document.querySelector(".list-block").style.left = ballX + "px";
requestAnimationFrame(animate);
}
animate();

document.addEventListener("mousemove", function(event){
  mouseX = event.pageX;

});
</script>

Другие модификации

Подсказки при наведении курсора

Модификаторы