Создаем неповторимый дизайн лендинга — интерактивный дизайн лендинга

Инфографика уже не решает на продающих страницах. И как Вы думаете, почему так случилось? Ответ прост, всё из-за того что она уже повсюду. На какую страницу не попадешь — сразу видишь инфографику. Но в этой статье я раскрою еще один небольшой секрет, как же всё таки выделиться даже на фоне этих всех красочных лендингов. Я продолжу тему интерактива на лендинге.

Интерактивные элементы на странице:

• Анимация для лендинга — создание анимации на лендинге
• Красивое оформление сайта — оформляем красиво одностраничный сайт
• Как сделать видео фоном сайта + видеостоки

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

Посмотрите пример самостоятельно и медленно прокрутите страницу вниз:

Посмотреть примерСкачать

Это лишь небольшой элемент лендинга. Как создать лендинг с полного нуля, я рекомендую свой мини-курс: "Лендинг за 60 минут".

Я сделал скриншот элемента, который еще появился не до конца:

Как сделать такой дизайн лендинга?

1 Преобразование в SVG Path

Иконки, которые Вы видели, это не изображения. И нам необходимо преобразовать иконки в данный формат. Как это сделать я рассказал в одной из статей ранее:

• Где взять иконки в формате SVG — ИНСТРУКЦИЯ
• Как иконки преобразовать в SVG Path — ИНСТРУКЦИЯ

То есть иконку в формате SVG нам необходимо преобразовать в формат SVG Path с помощью сервиса lazylinepainter.info.

Сервис нам сгенерировал большой JS код, который нам пригодится. Поэтому идем дальше к разметке HTML.

2 HTML структура

Пример иконки монитора:

1
2
3
4
5
6
7
8
9

<div class="monitor">
    <div id="trigger1"></div>
    <svg version="1.1" viewBox="-7 0 430 430" xmlns="http://www.w3.org/2000/svg">
        <path id="monitor1" style="stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1009.22662353516px; stroke-dashoffset: 1009.22662353516px;" fill="none" stroke="#000000" stroke-width="10" d="M392.997,28.338H20c-11.046,0-20,8.954-20,20v234c0,11.046,8.954,20,20,20h139.499v45.32h-54.283     c-10.201,0-18.5,8.299-18.5,18.5s8.299,18.5,18.5,18.5h202.566c10.201,0,18.5-8.299,18.5-18.5s-8.299-18.5-18.5-18.5h-54.283     v-45.32h139.498c11.047,0,20-8.954,20-20v-234C412.997,37.292,404.044,28.338,392.997,28.338z M382.997,272.338H30v-214h352.997     V272.338L382.997,272.338z"></path>
        <path id="monitor2" style="stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44.2973785400391px; stroke-dashoffset: 44.2973785400391px;" fill="none" stroke="#000000" stroke-width="10" d="M62.999,146.276h287c2.762,0,5-2.239,5-5V86.269c0-2.761-2.238-5-5-5h-287c-2.762,0-5,2.239-5,5v55.008     C57.999,144.038,60.237,146.276,62.999,146.276z"></path>
        <path id="monitor3" style="stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44.2973785400391px; stroke-dashoffset: 44.2973785400391px;" fill="none" stroke="#000000" stroke-width="10" d="M349.999,165.164H285.28c-2.19,0-3.966,1.776-3.966,3.966v76.333c0,2.19,1.773,3.966,3.966,3.966h64.719     c2.19,0,3.966-1.774,3.966-3.966v-76.333C353.965,166.938,352.189,165.164,349.999,165.164z"></path>
        <path id="monitor4" style="stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44.2973785400391px; stroke-dashoffset: 44.2973785400391px;" fill="none" stroke="#000000" stroke-width="10" d="M251.78,165.164H62.999c-2.19,0-3.967,1.776-3.967,3.966v76.333c0,2.19,1.776,3.966,3.967,3.966H251.78     c2.189,0,3.965-1.774,3.965-3.966v-76.333C255.745,166.938,253.971"></path>
    </svg>
</div>

Несколько слов по структуре:

• Строки: с 1 по 9 — полный блок с иконкой.
• Строка: 2 — блок-триггер, с которого начинается анимация соответствующей иконки.
• Строки: с 4 по 7 — отдельные части иконки (координаты).

Также у каждого тега <path> есть атрибут "viewbox", который отвечает за масштаб иконки. Первые две цифры — это смещение по оси X и оси Y, а вторые две — это размер иконки (его можно узнать из сгенерированного кода, который дает сервис lazylinepainter.info).

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

Сервис генерирует атрибут "path", из которого нам необходимо скопировать всё и вставить в атрибут "d" тега <path>. Как видите, иконка монитора состоит из 4-х тегов <path>, потому что сервис lazylinepainter.info сгенерировал четыре блока с координатами. Затем для каждого блока необходимо задать уникальный атрибут <id>, с помощью которого мы будем управлять анимацией.

Прочтите еще раз данный абзац, потому что если здесь Вы допустите ошибку, то анимации не увидите.

Согласен, всё так просто как казалось бы, но эффект то не простой!

3 JS анимация

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

Подключаем все необходимые скрипты:

• ScrollMagic.min.js
• jQuery.min.js
• TweenMax.min.js
• animation.gsap.js
• animate-icon.js — наш скрипт

Пока что просто подключаем, а скоро расскажу где и что можно изменять:

1
2
3
4
5

<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/animation.gsap.js"></script>
<script src="js/animate-icon.js"></script>

Обратите внимание на последний animate-icon.js. Его мы и будем редактировать, потому что там написана вся анимация для наших иконок. Давайте посмотрим что внутри:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

function pathPrepare ($el) {
    var lineLength = $el[0].getTotalLength();
    $el.css("stroke-dasharray", lineLength);
    $el.css("stroke-dashoffset", lineLength);
}
 
var $photoicon1 = $("path#photoicon1");
var $photoicon2 = $("path#photoicon2");
var $photoicon3 = $("path#photoicon3");
 
...
 
// подготовка SVG
pathPrepare($photoicon1);
pathPrepare($photoicon2);
pathPrepare($photoicon3);
 
...
 
// инициализация контроллера
var controller = new ScrollMagic.Controller();
 
// tween "Photoicon"
var tween = new TimelineMax()
    .add(TweenMax.to($photoicon1, 2, {strokeDashoffset: 0, ease:Linear.easeNone})) 
    .add(TweenMax.to($photoicon2, 0.5, {strokeDashoffset: 0, ease:Linear.easeNone}))
    .add(TweenMax.to($photoicon3, 0.5, {strokeDashoffset: 0, ease:Linear.easeNone}));
 
    ...
 
// scene "Photoicon"
var scene = new ScrollMagic.Scene({triggerElement: "#trigger1", duration: 400, tweenChanges: true})
                .setTween(tween)
                .addTo(controller);
 
    ...

Вам лишь при добавлении новой иконки необходимо сделать по аналогии. Я оставил код только для первой иконки с фотоаппаратом. Для остальных Вы увидите аналогичный код в исходниках. Поясню код:

• Строки: с 1 по 5 — функция, которая отвечает за рисование линий. Здесь ничего менять не нужно.
• Строки: с 7 по 9 — здесь выбираем все части нашего фотоаппарата. По аналогии добавляется собственные.
• Строки: с 14 по 16 — подготовка координат SVG Path. Делаете все аналогично.
• Строки: с 24 по 27 — анимация для каждой из частей иконки. Также всё аналогично делаете для Ваших иконок.
• Строки: с 32 по 34 — создание новой сцены. Для каждой новой иконки своя собственная сцена.

Ура, это конец!

Вывод

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

Успехов!

С Уважением, Юрий Немец