Праздничная открытка с помощью плагина skrollrПраздники прошли, но как же хочется чтобы они никогда не заканчивались, так само думают наши зарубежные коллеги с сайта pepsized которые решили не забывать о новогодних праздниках, пускай они даже прошли, а порадовать посетителей интересной иллюстрацией, а именно сайтом-открыткой. Который будет реализован с помощью небольшого плагина прокрутки. В данном уроке мы рассмотрим как создать такую замечательную открытку к новогодним праздникам. Пускай они даже и прошли.

 

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

Креативная открытка с помощью плагина skrollr

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

Шаг 1. Подготовка

Нам необходимо подготовить все материалы, мы будем использовать 6 изображений, кроме этого у нас будет некоторые материалы в формате PNG, такие как мелкие узоры и снег. Все остальные изображения будут отредактированы с помощью Adobe Illustrator, сохранив как SVG и SVG скомпилированный код.

Праздничная открытка с помощью плагина skrollr.js

Шаг 2. HTML

Нам необходимо создать базовую разметку подключим все фреймворки.

Кроме этого мы устанавливаем базовую разметку изображений, указываем ихние разрешения.

Шаг 3. CSS

Обратите внимание, что мы устанавливаем Z-индексы в таком порядке, чтобы они были видны.

Шаг 4. Используем skrollr.js

Мы будем использовать плагин skrollr.js и CSS, конечно его можно заменить на HTML присвоив ему определенные атрибуты, но в данном уроке мы пойдем именно данным методом:

Шаг 5. Сцена №1

Праздничная открытка с помощью плагина skrollr.jsКогда браузер прокрутки находится в нулевом положении, мы видим, # wish1, который охватывает 100% высотой и 100% ширины окна. Когда мы начинаем прокручивать вниз, ширина уменьшается и достигает 0%, после прокрутки позиции 1000px. Элемент # wish1 не виден, но мы видим # wish2, который расположен одинаково, но имеет меньшее значение Z-индекса.

   

Шаг 6. Сцена №2

Праздничная открытка с помощью плагина skrollr.jsМы получили 2 эффектов на этом «экране».Как и в предыдущем шаге ширина уменьшается от 100% до 0%, когда мы прокрутить вниз от 1000px на 2000px.Разница в том, что # wish2 не исчезает полностью, мы можем увидеть его бокс-тени, которые образуют вертикальные ленты.
Мы также будем анимировать хлопья снега.Когда мы прокрутить вниз, на верхней позиции изменения #snow. Обратите внимание, что мы могли бы оживить его на фоновой позиции.

Шаг 7. Сцена №3

Есть еще три элемента, которые создают пересечения ленты, левой и ленты  справа и SVG элемент,  Как мы прокручиваем вниз по ширине горизонтальных изменений ленты от 0% до 50% — они встречаются в середине экрана.

Шаг 8. Финальная сцена

Последним шагом будет вывод поздравительной открытки-изображения.

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

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