Этот необычный эффект строится на двухслойности: нижний слой желтый, а верхний - синий. Двигая мышкой слева направо, вы постепенно убираете верхний слой, а текст остается на том же месте.
Этот необычный эффект строится на двухслойности: нижний слой желтый, а верхний - синий. Двигая мышкой слева направо, вы постепенно убираете верхний слой, а текст остается на том же месте.
Создание нижнего слоя с текстом
Внутри тега 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
