Лого www.SiteHere.ru

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

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

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

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

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

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

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

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

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

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

flaticon

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

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

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

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

HTML КОД
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. Нам понадобится всего один блок:

HTML КОД
1
<div id="pencils13"></div>

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

2 SVG в JS

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

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

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

SVG в JS

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

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

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

HTML КОД
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 — цвет линий иконки.

Вывод

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

Успехов!

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

Анимация для лендинга — создание анимации на лендинге 5.00/5 (100.00%) 5 голос(ов)

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

30 комментариев к записи
  • Егор

    Юра, здравствуй. Интересная анимация. Попробовал, все у меня работает. Только нужно, наверное собирать все скрипты, кроме библиотеки, в один и сжимать. В самом конце разработки. Сейчас сделаю несколько сниппетов сразу 🙂

     
    • Егор

      А, ну и в отдельный файл.

       
  • Егор

    Знаешь что плохо, что при скролле страницы, пока прокрутишь, они уже статичные становятся. Что нужно дописать в скрипт?

     
  • Егор

    Здравствуй, Юра. Я вот что подумал, а можно ведь этот скрипт применить к шрифтам в формате SVG?
    Например к названию лендинга? или это делается как-то по другому?

     
    • Юрий

      Привет, Егор!

      По поводу анимации при прокрутке рекомендую изучить этот пример: Эффекты на страницу. Там "отлавливал" скролл с помощью библиотеки jQuery. Здесь можно поступить аналогичным образом.

      По поводу шрифтов: да, можно нарисовать что-то в Adobe Illustrator и затем используя данный сервис создать анимацию.

       
  • Егор

    Cпасибо. Посмотрю.
    А я вон себе сделал простую страницу подписки
    filwebs.ru/wp-content/themes/frontend/subscribe/subscr.html
    Кстати, вчера скачал иллюстратор. Еще не разбирался в нем, но машина мощная!

     
    • Юрий

      Егор, классно смотрится анимация!

       
  • Егор

    Я что-то не нашел подписки на новые статьи. Узнаю только из Subscribe

     
    • Юрий

      Егор, за новостями можно следить подписавшись на FeedBurner — ЗДЕСЬ.

       
  • Егор

    Спасибо. У тебя целая кладезь. И передаешь опыт. 

     
  • Егор

    Юра, а по поводу анимации, что-бы не ловить ее при скролле постоянно, время будет пару часов, команду напишу.

     

     
  • Владислав

                Добрый день, Юрий !

           Для себя изучаю азы HTML и, конечно, являюсь на данном моменте "чайником"…Прочитав очень интересный пост о том, как сделать анимацию иконок, решил пошагово повторить инструкцию, но ничего не получилось frown.

    Подскажите, пожалуйста, в чем заключается моя ошибка ?     

          Мой архив с index.html и значком…

    https://mega.nz/#!2RQz1BwZ!8l1tCFwAFf1IyaaevaETheUtfhMT_XqaAfHseBpx-CQ

         

     

     
    • Юрий

      Здравствуйте, Владислав!

      В 50-й строке замените:

      $('#undefined').lazylinepainter( 

      На вот это:

      $('#peace').lazylinepainter( 

      То есть после решетки необходимо написать название файла (внимательно изучите статью).

       
      • Владислав

        Спасибо, Юрий. Изначально думал, что сайт lazylinepainter.info автоматически генерирует во всем коде название файлы svg. Было бы логично, потому что название файла в автомате оказалось здесь  var pathObj = { "название svg":

         Посмотрел только на эту строку и подумал, что всё ок ))). 

            а дальше не стал проверять. no
         
  • Владислав

    Игорь, ещё имеется небольшая просьба. Для новичка (вроде меня) не хватает наглядной информации, если нужно сделать несколько значков для отрисовки.
    В статье указано, что «Строка: 24 — имя переменной, которую мы объявили в 6-й строке. Если Вы захотите создать несколько иконок на одной странице, тогда Вам необходимо будет давать разные имена этим переменным.»
    Я так понимаю, что нужно объявить вторую переменную и для неё где-то указать такой же блок кода (с 21-й строчки) где будет ссылка на второе имя переменной ?
    Можете привести какой-то наглядный пример того, как должен выглядеть код. Например, есть два svg «peace» и «bicycle». Как должен выглядеть javascript…? P/s. Ещё один интересный момент. Я не знаю в чем причина и как можно это исправить…Когда происходит прорисовка иконки, в определенном месте можно увидеть срез (в этом примере, срезаются колеса).
    http://s009.radikal.ru/i307/1508/c6/befee6c183d1.jpg

     
    • Юрий

      Владислав, чтобы разобраться как вставить несколько иконок — рекомендую скачать исходники. Там в примере я сделал 6 иконок. Вы сами увидите как написан Javascript код.

      По поводу срезов: это значит, что изображение не помещается в область просмотра. У SVG файла есть атрибут viewBox:

      <svg viewBox="0 0 614 614" ...></svg>

      Попробуйте изменять последние 2 его величины и смотреть как изменяется размер. Если изображение смещено вверх или влево, тогда меняйте первые две величины.

       
  • Вера

    Здравствуйте! Подскажите пожалуйста что мне делать.
    У меня на сайте уже давно стоит jquery-1.11.2.min.js и когда я подключаю данный jquery и скрипт анимации перед закрытием body на сайте идет вечная загрузка, а если ставлю подключение и скрипт анимации перед head то анимация не идет. 
    Что можно сделать в данной ситуации и почему такое может быть? 
    Сам путь к svg в html не надо прописывать как это делаем обычно когда ставим иконку ( <img src="images/2.png"width="160" height="160" alt=""/></div>), правильно я поняла ?
    Надеюсь на вашу помощь, заранее спасибо.

     
    • Юрий Немец

      Здравствуйте, Вера!

      А работает ли данная анимация с Вашей версией jQuery библиотеки? (если не подключать данную библиотеку из статьи)

      Если Вы делаете все по инструкции, то никаких путей для SVG прописывать не нужно. Этот сервис преобразует Ваш SVG файл в набор координат, которые затем будет использовать скрипт для "рисования".

       
  • Радик

    Насчет переменных можете подробно показать как сделать несколько штук ? Спасибо ! 

     
    • Юрий Немец

      В примере, который я создал для демо, есть несколько переменных и пример их работы.

       
  • Радик

    В фотошопе сделал рисунок в формат svg с название  сайта но данный сервис не показывает  изображение ! Кто подскажет в чем дела ?

     
    • Юрий Немец

      Если Вы хотите сами сделать изображение, то делать его нужно в Adobe Illustrator, а затем сохранить в формате SVG.

       
      • Радик

        Спасибо ! 

         
      • Радик

        Создал svg ну все таки не показывает ! 

         
        • Юрий Немец

          Значит сервису что-то не нравится в структуре SVG файла, который генерирует Adobe Illustrator. Откройте в любом текстовом редакторе файл SVG, который нормально преобразуется сервисом, и тот, который Вы создали в AI. И сравните что есть в одном и нет в другом.

          У меня была похожая проблема, когда я делал вот это демо — Рисование элементов при прокрутке страницы. Там первый SVG элемент с текстом "www.sitehere.ru", его также необходимо было преобразовать в SVG.

           
          • Радик

            Не как ,кодироаку сменил все таки  тоже самое https://jsfiddle.net/saarurw4/

             
          • Радик

            http://www.sitehere.ru/examples/13.07.2015/index.html  как сделать при скроле чтоб срабатывала анимация ?

             
            • Юрий Немец

              В примере, который вы указали, используется библиотека ScrollMagic.js. В ближайшее время планируется видео по работе с данной библиотекой.

               
  • Vasja

    Спасибо интересное решение. Буду пробовать сделать.

     

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

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