Эффект стирания верхнего слоя на JavaScript

Эффект стирания верхнего слоя на JavaScript

Эффект стирания верхнего слоя на 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; /*режим наложения слоев*/
}

Эффект стирания верхнего слоя на JavaScript

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

Нижний слой (тег 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;/*элемент не может быть целью*/
}

Эффект стирания верхнего слоя на JavaScript

Создание функции

Метод 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>

Эффект стирания верхнего слоя на JavaScript

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

Переходите на видеокурс по JavaScript и приобретайте необходимые навыки для получения востребованной профессии frontend-разработчика.

Источник

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

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

1 × 5 =