Эффект с текстом при движении мыши

Эффект с текстом при движении мыши

Эффект с текстом при движении мыши

Этот необычный эффект строится на двухслойности: нижний слой желтый, а верхний — синий. Двигая мышкой слева направо, вы постепенно убираете верхний слой, а текст остается на том же месте.

Создание нижнего слоя с текстом

Внутри тега h2 находится текст и дальше идет пустой блок с классом summer. Именно этот блок будет двигать мышь, создавая необычный эффект.


//HTML

<section>

    <h2>Summer<br><span>Sales</span></h2>

    <div class="summer"></div>

</section>

//CSS

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: "Poppins", sans-serif;

}

section {

    position: relative;

    display: flex; / * технология флексбокс * /

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    background: #FFD600;

    overflow: hidden;

}

Эффект с текстом при движении мыши

Наложение сверху блока summer

Поверх текста на всю высоту и ширину экрана мы накладываем пустой блок summer в режиме смешивания difference. В результате такого смешения меняется цвет текста с черного на белый, а фон с белого на синий. Кроме того, благодаря difference, один и тот же текст виден сразу на двух слоях.


section .summer {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background: #fff;

    mix-blend-mode: difference; / * режим смешивания разница * /

}

Эффект с текстом при движении мыши

Стилизация текста


section h2 {

    position: relative;

    font-size: 17vw;

    text-align: center;

    line-height: 0.8em;

    font-weight: 800;

    text-transform: uppercase;

}

section h2 span {

    font-size: 18.2vw;

    color: transparent; / * цвет у текста прозрачный * /

    -webkit-text-stroke: 0.3vw #000; / * обводка у текста * /

}

Эффект с текстом при движении мыши

Эффект движения верхнего слоя

Пишем на JavaScript функцию, которая заставит двигаться блок summer. Событие onmousemove (движение мыши) вешается на весь документ (window). В функцию передается текущая X-координата позиции курсора и когда человек наводит мышь на документ, верхний слой (summer) сдвигается влево и остается только нижний желтый слой.


let summer = document.querySelector(".summer");

window.onmousemove = function (e) {

    let x = e.clientX;

    summer.style.left = x + "px";

};

Эффект с текстом при движении мыши

Посмотрите пример на CodePen

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий