Заглушка для сайта с эффектом параллакса RUDEBOX_miniПараллакс одна из самых просматриваемых тем в последнее время на просторах интернета, это не удивительно, такая реализация контента на странице сайта весьма радует глаз пользователей, не на каждом сайте можно такое увидеть, а наших людей, да как и всех остальных, очень цепляет нечто новое и привлекательное. В данном уроке мы рассмотрим как реализовать заглушку для сайта в стиле «назад в будущее» при этом эффект будет напоминать 3D стереоскопию с временным подергиванием экрана, выглядит очень эффектно в сочетании с эффектом параллакса.

 

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

Шаг 1. HTML

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

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

Заглушка для сайта с эффектом параллакса RUDEBOX_mini

Шаг 2. CSS

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

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

Шаг 3. JS

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

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

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

Читайте также: