<MyRusakov.ru />

Laravel от А до Я

Laravel от А до Я

Данный курс научит Вас создавать профессиональные сайты быстро и легко с помощью Laravel. Курс состоит из 7 разделов, в которых Вы с нуля освоите данный фреймворк до уровня, достаточном для создания любых сайтов.

Помимо курса Вы также получите упражнения для закрепления материала, а попутно ещё и создадите свой сайт, что позволит отлично закрепить материал на практике, плюс получить серьёзную работу в своё портфолио.

К курсу прилагается и очень ценный Бонус: «Создание сайта на Laravel». В этом Бонусе Вы увидите практический пример создания полноценного сайта на Laravel.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Эффект стирания верхнего слоя на 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-разработчика.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.