<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Для закрепления материала из уроков к ним идёт множество упражнений.

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

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

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

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

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

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

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

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

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

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

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

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

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

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

Внутри тега 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

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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