Сегодня мы бы хотели поговорить о параллаксе. Мы уже не раз рассказывали о таком эффекте, сегодня мы бы хотели показать как сделать замечательную заставку с таким эффектом. У нас будет рабочая зона в которой будет расположены все необходимые для современного дизайнера. Все это будет анимироваться и приводиться в движение как только пользователь притронется к курсору мыши. Все оживать будет на глазах, завораживая взор. Если вы хотите, чтобы пользователь попадая на заглушку сайта не уходил с нее то это отличный вариант.

 

Мы покажем на примере как сделать такую замечательную заглушку, вы можете ее использовать как и главную страницу сайта, я уверен, что посетителя заинтригует такой сайт, особенно если такой сайт будет связан со студией по разработке.

Шаг 1. HTML

Вся разметка будет у нас состоять из одной строчки кода, нам необходимо подключить к нашей главной странице весь основной код, выглядеть это будет следующим образом:

Также мы подключили множество сторонних библиотек, которые помогут нам в работе нашей заглушки, их вы сможете найти в исходниках.

Шаг 2. CSS

Стили у нас будут тоже минимальными, как вы уже поняли из заголовка урока, всю работу у нас будет выполнять JS, по этому мы определяем только общие стили для нашей страницы:

Шаг 3. JS

Скрипт достаточно массивный, мы не станем его выкладывать на сайт, просмотрите пожалуйста в исходниках, файл index.js, если у вас возникнут вопросы оставляйте их в комментариях.

Вот такая замечательная у нас получилась заглушка на сайт. Спасибо Duarte Monteiro за отличную идею и реализацию такого эффекта.

Вот и все. Готово!