Створюємо неповторний дизайн лендінзі - інтерактивний дизайн лендінзі

Відео: Photoshop: Створюємо Дизайн Landing Page У 2017

Інфографіка вже не вирішує на що продають сторінках. І як Ви думаєте, чому так сталося? Відповідь проста, все через те що вона вже всюди. На яку сторінку не потрапиш - відразу бачиш інфографіку. Але в цій статті я розкрию ще один невеликий секрет, як же все таки виділитися навіть на тлі цих всіх барвистих Лендінзі. Я продовжу тему інтерактиву на Лендінзі.

Інтерактивні елементи на сторінці:

• Анімація для Лендінзі - створення анімації на Лендінзі
• Гарне оформлення сайту - оформляємо красиво, утворять єдиний сайт
• Як зробити відео фоном сайту + відеостокі

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

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

Подивитися прімерСкачать

Це лише невеликий елемент Лендінзі. Як створити Лендінгем з повного нуля, я рекомендую свій міні-курс: "Лендінгем за 60 хвилин".

Я зробив скріншот елемента, який ще з`явився не до кінця:

Як зробити такий дизайн Лендінзі?

1 Перетворення в SVG Path

Іконки, які Ви бачили, це не зображення. І нам необхідно перетворити іконки в даний формат. Як це зробити я розповів в одній зі статей раніше:

• Де взяти іконки в форматі SVG - ІНСТРУКЦІЯ
• Як іконки перетворити в SVG Path - ІНСТРУКЦІЯ

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

Сервіс нам згенерував великий JS код, який нам стане в нагоді. Тому йдемо далі до розмітки HTML.

2 HTML структура

Приклад іконки монітора:

123456789

lt;div class="Monitor"gt;lt;div id="Trigger1"gt; lt;/divgt;="1.1" viewBox="-7 0 430 430" xmlns="Http://w3.org/2000/svg"gt;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 "gt; lt;/pathgt;

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 "gt; lt;/pathgt;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 "gt; lt;/pathgt;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 "gt; lt;/pathgt;lt;/svggt;lt;/divgt;

Кілька слів по структурі:

• Рядки: з 1 по 9 - повний блок з іконкою.
• Рядок: 2 - блок-тригер, з якого починається анімація відповідної іконки.
• Рядки: з 4 по 7 - окремі частини іконки (координати).

Також у кожного тега є атрибут "Viewbox", який відповідає за масштаб іконки. Перші дві цифри - це зміщення по осі X і осі Y, а другі дві - це розмір іконки (його можна дізнатися з згенерованого коду, який дає сервіс lazylinepainter.info).

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

Сервіс генерує атрибут "Path", з якого нам потрібно створити все та вставити в атрибут "D" тега . Як бачите, іконка монітора складається з 4-х тегів , тому що сервіс lazylinepainter.info згенерував чотири блоки з координатами. Потім для кожного блоку необхідно задати унікальний атрибут , за допомогою якого ми будемо управляти анімацією.

Прочитайте ще раз даний абзац, бо якщо тут Ви допустите помилку, то анімації не побачите.

Згоден, все так просто як здавалося б, але ефект той не простий!

3 JS анімація

Не буду тут наводити і описувати стилі, тому що це головне і Ви можете побачити всі стилі у вихідних файлах, там нічого складного немає. А я піду далі, до створення самого ефекту анімації.

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

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

Відео: Створення Лендінзі самостійно в фотошопі / Практикум Landing Page / Part. 2

Поки що просто підключаємо, а скоро розповім де і що можна змінити:

12345

lt;script src="Http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"gt; lt;/scriptgt;lt;script src="Https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"gt; lt;/scriptgt;lt;script src="Js / TweenMax.min.js"gt; lt;/scriptgt;lt;script src="Js / animation.gsap.js"gt; lt;/scriptgt;lt;script src="Js / animate-icon.js"gt; lt;/scriptgt;

Зверніть увагу на останній animate-icon.js. Його ми і будемо редагувати, бо там написана вся анімація для наших іконок. Давайте подивимося що всередині:

123456789101112131415161718192021222324252627282930313233343536

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")-...// підготовка SVGpathPrepare($ 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)-...

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

Відео: Створення Лендінзі в фотошопі. 3 частина

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

Відео: Безкоштовні відео уроки Створення і просування Лендінзі Під ключ ДИЗАЙН Урок 1 Вступ

Ура, це кінець!

висновок

Приголомшлива анімація у нас вийшла, правда? Всього не поясниш в одній статті, тому вивчіть уважно вихідні файли і зробіть по аналогії.

Якщо не виходить розібратися: я розумію що не у всіх виходить розібратися, тому я зробив можливість проконсультуватися і розібратися у всьому тут: SKYPE Консультація!

Успіхів!

З повагою, Юрій Німець