Анімація для лендінзі - створення анімації на лендінзі

Анімація для Лендінзі

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

Також рекомендую почитати:

  • CSS3 анімація для початківців
  • Анімація за допомогою CSS перетворень. Частина 1 - введення
  • Красива анімація тексту на CSS3

Для початку подивіться анімацію на власні очі:

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

Скріншот появи іконок:

Процес появи іконок

Де взяти іконки в форматі SVG?

Всі ікони в форматі SVG можна знайти на flaticon.com.

У кожної іконки є така кнопка:

flaticon

Але у деяких іконок при скачуванні немає розширення, тому їм необхідно дописати при збереженні ".svg" і тільки потім з ними далі працювати.

Як встановити анімацію на Лендінгем?

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

Перед закриває тегом підключаємо скрипти (jquery-2.1.1.min.js, rAF-polyfil.js і jquery.lazylinepainter-1.5.1.min.js):

HTML КОД


123
lt;script src="Js / jquery-2.1.1.min.js"gt; lt;/scriptgt;lt;script src="Js / rAF-polyfil.js"gt; lt;/scriptgt;lt;script src="Js / jquery.lazylinepainter-1.5.1.min.js"gt; lt;/scriptgt;

Далі структура HTML. Нам знадобиться всього один блок:

Відео: Створення сайту в Adobe Muse. Анімація стандартними віджетами і красивий ефект прокрутки

HTML КОД
1
lt;div id="Pencils13"gt; lt;/divgt;

де "Pencils13" - це назва Вашого SVG файлу. Воно повинно бути без пробілів і не повинно містити російських букв.

2 SVG в JS

Кожен елемент анімації (олівець, кубок і т.д.) були просто зображеннями у форматі SVG. Після чого їх перетворили за допомогою спеціального сервісу, підключили необхідні скрипти і в результаті вийшла красива анімація малювання ікон.

Сервіс для перетворення з SVG в JS код - lazylinepainter.info.

Перейдіть на сторінку з даним сервісом, зійдіть нижче і Ви побачите блок із заголовком «SVG TO LAZY LINE CONVERTER»:

Відео: Як зробити анімацію Лендінзі на Платформа ЛП

SVG в JS

Відео: Створення анімації для сайту в Adobe Edge

Файл в форматі SVG необхідно перетягнути в цю область, а потім почекати кілька секунд поки не з`явиться вікно попереднього перегляду і згенерований JS код:

Згенерований JS код

Копіюємо його і вставляємо нижче скриптів, які підключили між тегами. У підсумку вийде наступне:

HTML КОД
1234567891011121314151617181920212223242526272829
lt;script src="Js / jquery-2.1.1.min.js"gt; lt;/scriptgt;lt;script src="Js / rAF-polyfil.js"gt; lt;/scriptgt;lt;script src="Js / jquery.lazylinepainter-1.5.1.min.js"gt; lt;/scriptgt;lt;scriptgt; var pathObj = { "pencils13": { "strokepath": [{ "path": "M597.972,96.853l-81.725-81.725C506.11,4.991,493.477,0,480.064,0s-26.982,5.069-36.184, 15.128l-54.743,54.743 c-10.917-3.353-23.55-0.858-31.972,6.706l-23.55,23.55c-9.28,9.28-10.917,23.55-5.927,35.404L63.174,400.046 c-0.858,0.858-1.716,1.716- 1.716,2.495c0,0,0,0,0,0.858c-0.858,0.858-0.858,1.716-1.716,2.495l0,0L12.642,549.147l0,0 l-5.069,15.128l-5.069,15.128c0,0.858,0 , 1.716-0.858,1.716c-1.716,8.422,0,15.128,2.495,19.339 c0.858,1.716,1.716,3.353,2.495,4.211c5.069,5.927,12.633,9.28,21.055,9.28l0,0c0.858 , 0,1.716,0,2.495,0c1.716,0,2.495,0,3.353,0 l0,0l0,0c0.858,0,1.716,0,1.716-0.858l21.055-6.706l151.596-49.674l0 , 0c2.495-0.858,4.211-1.716,5.927-3.353l265.294-265.294 c3.353,1.716,6.706,1.716,10.917,1.716c8.422,0,15.986-3.353,21.913-9.28l23.55-23.55 c9.28-9.28,10.917-21.913,6.706-32.83 l54.743-54.743C618.169,149.959,618.169,117.05,597.972,96.853z M204.633,519.67l-42.89-42.968l251.803-252.661l42.968,42.968 L204. 633,519.67z M391.633,202.128L139. 83,454.789l-42.968-43.748l251.803-251.803L391.633,202.128z M66.527,570.202 l-21.055-21.055l36.184-109.486l47.179,47.179l0,0l0,0l47.179,47.179L66.527,570.202z M496.05,254.376 c -0.858-0.858-0.858-1.716-1.716-1.716L363.793,121.261c-1.716-1.716-2.495-2.495-4.211-3.353l18.56-19.339l1.716,1.716l0,0 l132.257,132.257c0.858,0.858, 1.716,1.716,2.495,1.716L496.05,254.376z M576.059,148.243l-53.028,53.028L412.688,90.147 l53.028-53.028c7.564-7.564,21.055-7.564,28.619,0l81.725,81.647C583.623,127.188, 583.623,139.821,576.059,148.243z "," duration ": 8000}]," dimensions ": {" width ": 614," height ": 614}}} - $ (document) .ready (function () {$ ( `# pencils13`). lazylinepainter ({ "svgData": pathObj, "strokeWidth": 3, "strokeColor": "# 27AE61"}). lazylinepainter ( `paint`) -}) -lt;/scriptgt;

На цьому установка закінчена!

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

  • Рядки: з 6 по 19 - це згенерував код нашої SVG іконки.
  • Рядок: 11 - час, протягом якого малюється іконка.
  • Рядки: 14 і 15 - ширина і висота іконки за замовчуванням (в подальшому може бути змінена через CSS).
  • Рядок: 22 - ідентифікатор блоку в якому буде малюватися іконка.
  • Рядок: 24 - ім`я змінної, яку ми оголосили у 6-му рядку. Якщо Ви захочете створити кілька іконок на одній сторінці, тоді Вам необхідно буде давати різні назви цим змінним.
  • Рядок: 26 - колір ліній іконки.

висновок

Дуже незвична анімація. Установка не найпростіша, але і нічого надскладного тут немає. Кожному під силу встановити дану анімацію в свій проект. Бажаю успіхів і великий конверсії на сторінках!

Відео: Лендінгем

Успіхів!

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

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!