Прокрутка с эффектом увеличения с помощью SVG | RUDEBOXНедавно наткнулся на работы одного нашего коллеги, он подошел весьма интересно к реализации эффекта для прокрутки. Дело в том, что все пытаются создать прокрутку с плавным появлением материала. Ник, так зовут нашего коллегу, решил поставленную задачу иначе, он создал прокрутку в глубь сайта, а именно увеличение с эффектом параллакса во время прокрутки. Смотрится все достаточно фантастично, создается ощущение полета в глубь страницы. Из-за различия в накладке изображений мы и получаем такой эффект 3D.

 

Нам понадобятся четыре изображения, мы подготовили их заранее, в формате SVG. Для получения такого эффекта нам понадобится еще пару интересных библиотек. И так, давайте приступим.

Шаг 1. HTML

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

Все скрипты, для работы, Вам необходимо подключить в шапку, просмотреть их перечень можно в исходниках.

Прокрутка с эффектом увеличения с помощью SVG | RUDEBOX

Шаг 2. CSS

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

Шаг 3. JS

Последним шагом будет добавление немного магии, для того, чтобы все это оживить:

Благодаря данным манипуляциям мы получим трансформацию во время прокрутки.

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

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