Лого www.SiteHere.ru

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

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

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

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

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

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

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

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

Интерактивный дизайн лендинга

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

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

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

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

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

2 HTML структура

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

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 анимация

Javascript часть

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

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

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

HTML КОД
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. Его мы и будем редактировать, потому что там написана вся анимация для наших иконок. Давайте посмотрим что внутри:

Javascript КОД
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 — создание новой сцены. Для каждой новой иконки своя собственная сцена.

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

Вывод

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

Успехов!

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

Создаем неповторимый дизайн лендинга — интерактивный дизайн лендинга 5.00/5 (100.00%) 8 голос(ов)

Понравилась статья - расскажи друзьям! :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *