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

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

Смотреть урок на YouTube

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

Стартовая HTML разметка

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

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

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

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

CSS анимация Cubic-Bezier для пунктов списка

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

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

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Я - фрилансер! Базовый курс для начинающих

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

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

Стартовая HTML разметка

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

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

Премиум уроки от WebDesign Master

Другие уроки по теме «Верстка»