Эффект стирания верхнего слоя на JavaScript
Пользователь водит мышкой по экрану и автоматически стирается верхний слой. Под верхним слоем находится фоновая картинка. Немного движений мышкой и изображение становится видимым целиком.
Создание верхнего слоя
Этот симпатичный орнамент построен исключительно на градиентах.
// HTML разметка
<body></body>
// CSS код
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
overflow: hidden;
background: repeating-linear-gradient(
0deg,
#b3e5fc 0%,
#b3e5fc 50%,
#81d4fa 50%,
#81d4fa 100%
),
repeating-linear-gradient(
90deg,
#b3e5fc 0%,
#b3e5fc 50%,
#81d4fa 50%,
#81d4fa 100%
);
background-size: 50px 50px;
background-blend-mode: multiply; /*режим наложения слоев*/
}
Создание нижнего слоя
Нижний слой (тег span) будет создаваться на лету с помощью JavaScript. Здесь мы его только стилизуем.
span {
display: block; /*отображать как блочный тег*/
position: absolute; /*абсолютное позиционирование */
width: 100px; /*ширина ластика */
height: 100px; /*высота ластика */
background: url("https://cdn.pixabay.com/photo/2021/09/16/21/27/container-ship-6631117_960_720.jpg");
background-size: cover; /*растянуть картинку с сохранением пропорций*/
background-attachment: fixed; /*фон не перемещается вместе с элементом*/
background-repeat: no-repeat; /*фон не размножается*/
background-position: center;/*центрирует изображение*/
border-radius: 50%; /*получение круга*/
pointer-events: none;/*элемент не может быть целью*/
}
Создание функции
Метод addEventListener отслеживает событие движения мыши mousemove. Каждый раз при наступлении события, запускается функция. Что она делает? Сначала находит элемент body и заносит его в переменную body. Метод createElement создает элемент span и заносит в переменную eraser. Этим eraser пользователь орудует, как стирательной резинкой. Методы offsetX и offsetY возвращают отслеживаемые координаты, которые записываются в стили. Позиция стирательной резинки все время меняется относительно левого и правого края. Метод appendChild() добавит в body сгенерированный тег span.
<script type="text/javascript">
document.addEventListener("mousemove", function(e) {
var body = document.querySelector('body');
var eraser = document.createElement("span");
eraser.style.left = -75 + e.offsetX+'px';
eraser.style.top = -75 + e.offsetY+'px';
body.appendChild(eraser);
});
</script>
Посмотрите пример на CodePen
Переходите на видеокурс по JavaScript и приобретайте необходимые навыки для получения востребованной профессии frontend-разработчика.
