Создание Parallax эффекта на сайте при движении мыши | Материалы урока

Сегодня мы рассмотрим создание красивого плавающего parallax эффекта на CSS. Мы затронем очень много интересных приемов CSS. Это импорт и работа с переменными из JavaScript, использование простых переменных CSS и математические операции над ними, очень много логики, очень много функциональной составляющей этого потрясающего примера ложится именно на CSS. Приятного просмотра.

Материалы урока и готовый результат: Скачать

Рекомендуемые уроки и инструменты

• Настройка VS Code для верстки: Ознакомиться с уроком
• Cubic-Bezier CSS Generator: Перейти на сайт
• Урок по EMMET (быстрая верстка): Смотреть на YouTube
• Справочник EMMET (сокращения): Ознакомиться с уроком

CSS анимация для пунктов:

Ниже представлены скриншоты из сервиса Cubic-Bezier с изображением позиционирования точек Animation/Time. Изменяя положение ползунков на сайте сервиса, вы можете настроить анимации по своему вкусу.

--transition: 1.25s cubic-bezier(.2, .5, 0, 1);

CSS анимация для курсора:

--transition-cursor: 2s cubic-bezier(.05, .5, 0, 1);