Анимация для лендинга — создание анимации на лендинге

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

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

• CSS3 анимация для начинающих
• Анимация с помощью CSS преобразований. Часть 1 — введение
• Красивая анимация текста на CSS3

Для начала посмотрите анимацию воочию:

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

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

Где взять иконки в формате SVG?

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

У каждой иконки есть такая кнопка:

Но у некоторых иконок при скачивании нет расширения, поэтому им необходимо дописать при сохранении ".svg" и только потом с ними дальше работать.

Как установить анимацию на лендинг?

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

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

1
2
3

<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/rAF-polyfil.js"></script>
<script src="js/jquery.lazylinepainter-1.5.1.min.js"></script>

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

1

<div id="pencils13"></div>

Где "pencils13" — это название Вашего SVG файла. Оно должно быть без пробелов и не должно содержать русских букв.

2 SVG в JS

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

Сервис для преобразования из SVG в JS код — lazylinepainter.info.

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

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

Копируем его и вставляем ниже скриптов, которые подключили между тегами <script> </script>. В итоге получится следующее:

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

<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/rAF-polyfil.js"></script>
<script src="js/jquery.lazylinepainter-1.5.1.min.js"></script>
 
<script>
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.55c9.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');  
});
</script>

На этом установка закончена!

Несколько слов по коду:

• Строки: с 6 по 19 — это сгенерированный код нашей SVG иконки.
• Строка: 11 — время, в течение которого рисуется иконка.
• Строки: 14 и 15 — ширина и высота иконки по умолчанию (в дальнейшем может быть изменена через CSS).
• Строка: 22 — идентификатор блока в котором будет рисоваться иконка.
• Строка: 24 — имя переменной, которую мы объявили в 6-й строке. Если Вы захотите создать несколько иконок на одной странице, тогда Вам необходимо будет давать разные имена этим переменным.
• Строка: 26 — цвет линий иконки.

Вывод

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

Успехов!

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