Как в сайт поставить анимацию

Как добавить анимацию на сайт и не облажаться — Дизайн на vc.ru

Как в сайт поставить анимацию

Тонкости работы со сложной веб-анимацией

В редизайне сайта RBK.money мы использовали многослойные сюжетные анимации. У нас получился яркий сайт, наполненный плавным движением, о котором мы рассказали в кейсе.

Наш ведущий разработчик Алексей написал полезную статью про тонкости работы со сложной веб-анимацией.

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

Методы и ограничения

Показать анимацию на экране пользователя можно несколькими методами.

  • . Много весит и в нём сложно настроить бесшовное воспроизведение. подходит для коротких анимаций, которые не перегружают сайт.
  • GIF-анимации. Они распространены, но ради уменьшения веса разработчики жертвуют полнотой цветовой палитры. Иначе такие анимации весят слишком много, даже больше видео.
  • Набор последовательно переключающихся картинок, они же – секвенции. Грубо говоря, это видео без сжатия кадров, которое также много весит и замедляет работу браузера.
  • Анимированные вручную html-элементы или svg. Требуют сложного процесса разработки.

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

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

Библиотека Lottie

В одном из проектов мы использовали библиотеку Lottie от Airbnb. С ней можно переносить анимации на страницы браузера прямо из After Effects. Библиотека оказалась очень полезной, потому что мы как раз создавали сайт с многослойной анимацией для RBK.money.

С Lottie мы смогли добавлять на сайты сложные анимации и не думать о их размерах.

страницу сайта RBK.money мы добавили зацикленный ролик длиной 15 секунд, который весит всего 65 КБ в сжатом состоянии. У нас получились плавные анимации, которые быстро загружаются и воспроизводятся без стыковок.

Преимущества

Преимущества Lottie — меньший вес и адаптивность. Библиотека работает с векторной отрисовкой. Это означает, что не придётся готовить отдельные изображения для экранов с разным разрешением.

В Lottie можно управлять анимацией — настроить воспроизведение при нажатии на триггер или интерактивную анимацию, которая следует за движением курсора.

Аниматор работает с привычными инструментами и экспортирует результат с помощью плагина в формат json. Разработчику остается только подключить этот json к сайту и настроить его воспроизведение.

Недостатки

Библиотека рендерит анимацию либо в svg, либо в canvas. У формата svg можно настраивать прозрачность, но он сильно загружает процессор из-за постоянной прорисовки html-контента страницы.

Поэтому, когда мы добавили многослойные анимации на сайт RBK.money, кулеры наших компьютеров перешли в режим турбины. Пришлось переделать всё в canvas.

В нём не настраивается прозрачность, зато нагрузка на процессор ниже.

Иногда Lottie преподносит неприятные сюрпризы. Особенно после обновлений, которые иногда нарушают работу готовых анимаций. Создатели Lottie быстро приходят на помощь и решают проблему вместе с пользователями.

Из-за разных языков программирования некоторые инструменты After Effects не работают с Lottie. Поэтому при создании анимаций на сайте RBK.money мы отказались от «паппетов» — инструментов для плавного движения анимации. Пришлось всё делать вручную и это заняло довольно много времени.

Что получилось

Мы сделали необычный и запоминающийся сайт с плавными анимациями. Анимации, сделанные в Lottie, не увеличили время загрузки страниц.

За дизайн сайта RBK.money мы получили награды:

  • Tagline Awards 2019СереброЛучшая B2B-кампания
  • Рунета 2019СереброФинансы, инвестиции, банки
  • CSS Design Awards 2019Special Kudos /UI Design / UX Design / Innovation
  • Awwwards 2019Honorable Mention

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать

Источник: https://vc.ru/design/102121-kak-dobavit-animaciyu-na-sayt-i-ne-oblazhatsya

Изображения в HTML

Как в сайт поставить анимацию

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Изображения моментально дают нам понять, насколько данный сайт или статья могут быть для нас интересными, создают настроение, по новому могут раскрыть тему. Иногда одно фото стоит тысячи слов.

Но и частить ими не стоит, если вы не инстаграм или интернет-магазин. Желательно, чтобы изображения:

  • были информативными
  • соответствовали цветовой гамме вашего сайта
  • были уместны

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

Для тех, кто не любит переплачивать, в конце статьи мы приготовили бонус – список нескольких фотобанков, где можно скачать огромное количество качественных красивых материалов совершенно бесплатно

Источник: https://vertex-academy.com/tutorials/ru/izobrazheniya-v-html/

Как сделать анимацию, чтобы рассказывать истории и собирать лайки

Как в сайт поставить анимацию

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

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

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

Сегодня сделать анимацию куда проще, чем кажется. Мы собрали крутые примеры презентаций, гифок и даже мини-фильмов и попробовали создать похожие в Canva. Узнайте, как сделать анимацию и привлечь внимание аудитории.

1. Как сделать анимацию для презентации

Анимация в презентации может выполнять сразу несколько функций. Анимированные объекты привлекают внимание к самым важным фактам и цифрам, переходы между слайдами помогают обозначить смену темы и «возвращают» к презентации тех, кто заскучал или отвлёкся.

Главное правило в подборе анимации — содержание важнее красоты. Если анимация мешает воспринимать смысл презентации, то она лишняя. Долгие «эффектные» полёты каждой буквы никак не помогут зрителям запомнить мысль. Другое дело — когда самые важные элементы привлекают к себе внимание, особенно если презентация сама по себе логична и хорошо структурирована

Как сделать анимацию в презентации полезной? Используйте каждый эффект осмысленно: пункты вылетают один за другим — зрители видят последовательность, логическую цепочку, этапы процесса; объекты «выцветают» и исчезают — зритель понимает, что речь идёт о потерях, убытках. Сделайте каждый слайд говорящим.

Посмотрите, как анимация управляет вниманием в презентации Сбербанка для Среднерусского Экономического Форума. Здесь у анимации две задачи: она и помогает зрителю понять, куда смотреть, и создаёт настроение. Картинки плавно скользят — и кажется, что речь идет о чём-то простом, лёгком.

Презентация Сбербанка для Среднерусского Экономического Форума

Добиться подобного ощущения можно и с помощью Canva. В ней предусмотрен специальный режим для создания и показа презентаций. Чтобы создать анимацию в презентации Canva, нужно использовать компьютерную версию сервиса. Выберите шаблон «Презентация» в списке или введите это слово в поиск.

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

Затем в меню «Презентация» выберите эффекты для своей презентации. Слайды могут плавно перетекать друг в друга или динамично сменяться на экране.

Чтобы просмотреть, что получилось, начните показ в режиме «Стандарт». Для выступления подойдёт режим «Автовоспроизведение»: он будет менять слайды через заданное время.

Если вы хотите сами переключать слайды во время презентации, выбирайте «Режим докладчика». Canva создаст второй экран, который можно демонстрировать зрителям на проекторе. А первый, только для докладчика, будет отображать ещё и таймер, заметки спикера и порядок слайдов — это поможет говорить по делу и уложиться в отведённое время.

Использовать этот шаблон

Показывать презентацию с анимированными эффектами можно с любого компьютера с доступом в интернет — нужно только войти в свой аккаунт в Canva. Поэтому вы не забудете дома флешку с презентацией или не столкнётесь со старой версией PowerPoint, которая неправильно отображает ваши шрифты или эффекты анимации. Выступление пройдёт на ура!

2. Как сделать gif-анимацию для статьи, сайта или соцсетей

Гифки быстро грузятся, легко встраиваются в любое окружение — и в ленту «», и в научную статью. С помощью анимированных картинок удобно объяснять сложные понятия, рассказывать забавные истории или просто вызывать эмоции у читателя.

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

Баннеры обычно небольшие, писать на них много текста мелким кеглем нельзя — в итоге все преимущества продукта просто не умещаются на одной картинке. Гифка позволяет рассказать о продукте в картинках: на каждом кадре рассказать об отдельном свойстве продукта или показать предмет из каталога.

Посмотрите, как сделать gif-анимацию продающей. В контекстной рекламе МИФ гифка рассказывает о скидках на каталог книг, которыми я интересовалась:

Анимированная контекстная реклама книг МИФ

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

Анимированный тизер на сайте Афиши Daily

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

Посмотрите, как школа идеального тела Sekta декларирует один из принципов своих тренировок. Идея с зажженной лампочкой не только забавная, но и простая: всего-то и нужно сделать два кадра.

Пост-анимация в Инстаграме школы идеального тела Sekta

У гифок есть ещё одно крутое свойство — они помогают донести сложные эмоции, объяснить нестандартные явления. Подойдут такие гифки для презентаций, сайтов и СМИ.

Благодаря ним в онлайновых медиа существует целый жанр «Объясняем на гифках», когда научные, технические темы раскрывают с помощью гифок. При этом гифка не обязательно иллюстрирует тему, иногда она просто даёт отдохнуть посреди сложного текста.

Например, в статье Медузы «9 ситуаций, когда вам нужен высокоскоростной интернет» гифки в каждой из карточек передают эмоции и хорошо запоминаются.

В Canva можно собрать гифку из фотографий и картинок с элементами анимации. Давайте разберём этот способ на примере рекламы мебельного магазина.

Выберите шаблон с нужными размерами. Мы будем делать публикацию в Инстаграм. Разместите на нём нужные объекты и текст. Во вкладке «Скачать» выберите тип файла «Анимация».

Затем выберите, как сделать анимацию текста и картинок (мы выбрали плавную), и сохраните композицию в формате gif-анимации.

У нас получилось вот такая квадратная гифка, которую удобно использовать для рекламы в Инстаграме, на сайте или в соцсетях:

Использовать этот шаблон

3. Как сделать из анимации мини-фильм

В русскоязчынях социальных медиа каждый день публикуется 2 миллиона видеороликов. Это самый простой в потреблении контент: смотреть видео удобнее, чем читать, и обычно интереснее, чем слушать подкасты. К тому же видео вызывают больше эмоций, а значит — реакций. Например, в Инстаграме на один пост без видео приходится 1,61 комментариев, а на ролик с видео — 2,7.

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

С помощью такой простой анимации Delivery Club поздравил с Днём рождения тетрис:

Пост-анимация в Инстаграме Delivery Club

Помните, что анимация помогает объяснять сложное? Это касается не только простых гифок, но и текстовых мини-фильмов. Такой формат хорошо прижился в Ютубе и Инстаграме. Он делает обычный рассказ с картинками динамичным и интересным видео. Формат очень популярен и прост, нужно только изучить, что интересно аудитории и как сделать анимацию текста.

Авторы проекта «Короче, медиа» отвечают на странные научные вопросы вот такими текстовыми роликами. Жаль, что такое не показывают в школе!

Образовательный ролик из Инстаграма проекта «Короче, медиа»

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

Анимированный рассказ о компании из Инстаграма салона Мэри Трюфель

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

Для того чтобы сделать фильм, соберём фотографии на нескольких слайдах. Мы взяли простой и минималистичный шаблон, чтобы декоративные элементы не отвлекали от центра кадра — красивых снимков.

Во вкладке «Сохранить» выберите пункт «Анимация» и настройте эффекты. Мы используем анимацию «Подъём», чтобы фотографии как будто поднимались снизу.

Последний шаг — выбор формата. Выберите, как создать анимацию — как .mp4 или .gif — в зависимости от того, где вы собираетесь размещать готовыйAt мини-фильм. Для Инстаграма подойдёт видеоформат, для сайта или блога обычно используют гифки.

Использовать этот шаблон

Итак, рецепт простой: используйте режим презентации или функцию «Анимация», чтобы сделать дизайн динамичнее и привлечь внимание аудитории к вашим идеям. Добавляйте видео и гифки в социальные сети и на свой сайт, чтобы повышать охват и вовлечённость. И, наконец, рассказывайте истории и сохраняйте любимые снимки в мини-фильмах.

Подписывайтесь на обновления в Телеграме, Фейсбуке, ВКонтакте и Яндекс Дзене, чтобы всегда быть в курсе трендов графического дизайна и возможностей Canva, которые помогут воплотить их в жизнь!

Источник: https://www.canva.com/ru_ru/obuchenie/kak-sdelat-animaciyu/

Как добавить анимацию на сайт и не облажаться

Как в сайт поставить анимацию

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

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

Методы и ограничения

Добавлять анимацию на сайт сложно. Чтобы она заработала так, как вы задумали, придётся учесть множество нюансов — ограничения старых браузеров, особенности устройств, вспышки на солнце.

Показать анимацию на экране пользователя можно несколькими методами.

  • . Много весит, и в нём сложно настроить бесшовное воспроизведение. подходит для коротких анимаций, которые не перегружают сайт.
  • GIF-анимации. Они распространены, но ради уменьшения веса разработчики жертвуют полнотой цветовой палитры. Иначе такие анимации весят слишком много, даже больше видео.
  • Набор последовательно переключающихся картинок, они же секвенции. Грубо говоря, это видео без сжатия кадров, которое так же много весит и замедляет работу браузера.
  • Анимированные вручную html-элементы или svg. Требуют сложного процесса разработки.

Таргетированные SMS-рассылки с множеством фильтров для определения ЦА. Стоимость от 1,7 руб. за сообщение, CTR доходит до 45%!

Попробуйте провести тестовую кампанию! Cossa рекомендует.

Реклама

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

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

Вывод

С Lottie можно не беспокоиться о сложности анимации. Главное заранее убедиться, что она будет одинаково хорошо работать на всех устройствах, и правильно выбрать формат. Если анимаций много, лучше остановиться на canvas.

Перед началом проекта стоит убедиться, что в Lottie есть все нужные вам эффекты и инструменты. Или будьте готовы к поиску нестандартных решений.

Простой способ добавить CSS анимацию на сайт

Как в сайт поставить анимацию

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

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

Навигация по статье:

Для сайтов, работающих на WordPress, для создания таких эффектов есть специальный плагин. Он довольно прост в установке и настройке. Он называется Animate it.

Официальная страница плагина: Animate it

Этот плагин основан на библиотеке animate.css и содержит в себе множество различных эффектов появления, которые периодически обновляются и пополняются.

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

  1. 1.Устанавливается плагин как обычно. Копируем его название, переходим в раздел «Плагины» =>«Добавит новый».
  2. 2.Вставляем название в окно поиска, а далее нажимаем на кнопку «Установить» и «Активировать»
  3. 3.После установки, когда вы перейдете к редактированию страницы или записи, у вас на вкладке визуально, на панели инструментов появится кока «Animate it».
  4. 4.Теперь, для того, что бы добавить какую-то анимацию для определенного фрагмента текста или элемента на странице вам достаточно его выделить, а затем нажать на кнопку «Animate it».
  5. 5.На вкладке «Entry» вы выбираете эффект появления. Здесь в раскрывающемся списке перечислено огромное количество эффектов анимации, которые разделены на группы. Для того, что бы просмотреть, как будет выглядеть тот или иной эффект, вы выбираете его здесь и нажимаете на красную кнопку «Animate it». На предспросмотре сверху вы можете видеть, как это будет у вас выглядеть.
  6. 6.Далее, после того как вы определились с эффектом появления, вы можете задать некоторые параметры для этой анимации.
    • Delay (in seconds) — здесь задаётся задержка анимации в секундах
    • Duration (in seconds) — можно задать время самой анимации и таким образом сделать её более плавной или резкой
    • Timing – здесь вы можете выбирать различные параметры, связанные с расчетом времени. Однако разница между ними особо не заметна
  7. 7.Помимо эффекта появления вы можете так же задать эффект исчезновения элемента. Для этого нам необходимо перейти на вкладку «Exit».
  8. 8.Здесь вы аналогично в поле «Animation» выбираете тип анимации и затем можете задать для нее задержку и время самой анимации.
  9. 9.На вкладке «Option» вы можете задать дополнительные параметры для анимации.

    «Animation repeat» — здесь вы можете выбрать количество повторов для определенной анимации. Она может у вас повторяться один раз, дважды, три раза, бесконечно, или же вы можете задать какое-то свое значение.

    «Keep Element Final State» — сохранять конечное состояние элемента. Я обычно оставляю здесь по умолчанию.

    «Custom CSS Class» — в этом поле вы можете добавить для элемента свой css-класс и использовать его для задания определенных стилей или для написания скриптов.

    «Animation on» — здесь можно выбрать тип CSS-анимации (при загрузке страницы, при клике на элемент, при наведении на элемент и при прокрутке). В случае с прокруткой вы можете добавлять дополнительный параметр, в котором вы можете в процентах задать, какая часть страницы должна прокрутиться, что бы ваш элемент начал появляться.

    В процессе задания различных параметров вы можете нажимать на кнопку «Animate it» для того, что бы на предпросмотре увидеть, как это отразится на вашем элементе.

  10. 10.После того, как вы задали все необходимые параметры, нажимаем на кнопку «Insert».

В результате выделенный фрагмент текста или элемент оборачивается в шорткод.

Добавление CSS-анимации для изображений

Для изображений задавать анимацию нужно немного другим способом, так как выделение и использование кнопку «Animate it» не срабатывает.

На странице данного плагина есть такой раздел, который называется «Class generator». Переходим по ссылке Class generator.

Здесь мы точно так же можем выбрать эффект, который нас интересует. При нажатии на кнопку «Animate it» вверху на предпросмотре можно увидеть, как это будет выглядеть.

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

После задания параметров анимации нажимаем на зеленую кнопку «Generate».

В результате генерируется список CSS-классов, который нам нужно скопировать.

Далее для добавления CSS-классов для изображения нужно:

  1. 1.В административной части сайта, кликнуть на изображение, а затем кликнуть на карандаш с подписью изменить.
  2. 2.В разделе «Дополнительные настройки» задаём определенный css-класс для изображения.
  3. 3.После чего нажмем на кнопку «Обновить».

Добавление СSS-анимации для конструктора страниц

Аналогичным образом, если вы используете для построения структуры страницы какие-либо плагины, на подобии Page Builder, Visual Composer либо их аналогов, вы можете так же задавать эффекты анимации для отдельных блоков.

Для этого мы используем страницу «Class generator». Выбираем здесь понравившийся нам эффект, задаем для него все необходимые параметры, и нажимаем на кнопку «Generate».

После чего копируем сгенерированные CSS-классы и переходим к редактированию структуры страницы.

В случае с Page Builder вам нужно будет нажать на кнопку «Редактировать» для конкретного виджета и в разделе атрибуты, в поле «Widget Class» вставить сгенерированные классы и то же самое нужно будет проделать для всех остальных виджетов.

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

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

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

Этот способ будет немножко сложнее. Однако, его вы можете использовать абсолютно на любо сайте не зависимо от того, какая CMS установлена, и если вы хоть немного ориентируетесь в коде и скриптах, то тогда вы сможете задавать более гибкие настройки для анимации, или же, к примеру, задавать какие-то эффекты анимации сразу для всех элементов на вашем сайте.

инструкция

Более подробно о том, как создавать такие эффекты анимации без использования плагина я расскажу в следующей статье.

Надеюсь, что данная статья будет для вас полезной! Буду рада видеть комментарии под статьей! Подписывайтесь на мою рассылку и делитесь статьей в социальных сетях!

Успехов вам и вашим проектам!

До скорых встреч!

С уважением Юлия Гусарь

Источник: https://impuls-web.ru/prostoj-sposob-dobavit-css-animaciyu-na-sajt/

Как оживить свой сайт: 5 инструментов для анимации в современном WEB

Как в сайт поставить анимацию

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

Мы сделали подборку из 5 библиотек для создания анимации на web-сайтах, рассказав об их преимуществах, недостатках и сферах применения.

GreenSock Animation Platform

GreenSock Animation Platform или GSAP — это, пожалуй, одна из самых функциональных javascript-библиотек для анимирования. Как говорят её создатели, это «новый стандарт для HTML5 анимации».

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

Важным преимуществом GSAP является также то, что библиотека умеет «анимировать» не только CSS или Canvas, но и любую числовую переменную любого javascript-объекта.

Пример кода на GSAP:
// увеличивает высоту и ширину картинки (html элемента) TweenLite.fromTo(photo, 1.5, {width:0, height:0}, {width:100, height:200};

С другой стороны, GSAP является относительно тяжелой, поэтому для создания небольшой анимации HTML элементов (исчезание, появление, переворот и т.д.) лучше воспользоваться более легковесными аналогами.

Tween.js

Tween.js является дополнением к easel.js — одному из самых популярных javascript-фреймворков для удобной и легкой работы с canvas. Тем не менее, tween не имеет никаких зависимостей и может использоваться как вместе, так и отдельно от easel.

Как вы, наверное, уже догадались, основная задача библиотеки tween.js — это анимация в Canvas. И она отлично с ней справляется, делая за вас и упрощая многие вещи. Вот, например, код, который «гоняет» по экрану круг, меняя при этом его прозрачность:

createjs.Tween.get(circle, { loop: true }) .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4)) .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2)) .to({ alpha: 0, y: 225 }, 100) .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2)) .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

Но при этом для анимации HTML элементов tween.js совершенно не подходит — с этим справляются следующие два инструмента.

Move.js

Move.js — javascript-библиотека, позволяющая делать всё то же, что и tween.js, только с использованием CSS3 и HTML5 вместо Canvas. Она является не самой легкой (как для JS), но одной из самых популярных. Набор заранее заготовленных видов анимации (поворот, наклон, ротация и тд.) делает её также одной из самых легких в использовании.

Пример кода c использованием Move.js:

move('#example-4 .box') .rotate(140) .end();

Ознакомиться с демонстрацией работы и документацией можно на этой странице.

WOW.js + Animate.css

На самом деле это не настоящие библиотеки или фреймворки для анимации, по крайней мере в привычном понимании.

Animate.css — всего лишь CSS файл, в котором собраны несколько десятков правил, связанных с анимаций, а WOW.js — всего лишь маленький скрипт, запускающий эти анимации по мере прокрутки страницы.

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

Во-первых, решает легковесность. Всего 2 КБ и никаких зависимостей!

Во-вторых, wow.js и animate.css являются крайне простыми в использовании. Скорее всего, вам не придется написать ни строчки лишнего JS кода. Достаточно подключить эти два скрипта к странице и добавить к элементу, который нужно анимировать, пару css классов: класс wow и класс нужной нам анимации.

Пример:

Теперь при загрузке страницы вместо статического отображения этот элемент будет красиво крутиться:

Для настройки анимации используются специальные data-атрибуты, например, data-wow-duration=”2s” задаст продолжительность кручения в 2 секунды.

Демо, более подробную документацию и полный список data-атрибутов можно найти на официальном сайте WOW.js, полный список классов анимации — на официальном сайте Animate.js.

Анимация средствами JQuery

По статистике, почти 50% сайтов используют JQuery. Если ваш сайт входит в их список и у вас тоже подключена эта популярная библиотека, то, возможно, стоит не изобретать велосипеды, а воспользоваться встроенными в неё средствами анимации?

Это могут быть как стандартные $.show(), $.hide(), $.fadeIn(), $fadeOut и т.д., так и функция $.animate(), которая позволяет создавать гораздо более сложные анимации.

Подробнее об анимации в JQuery можно почитать здесь.

Стоит также упомянуть о библиотеке Velocity.js, которая предоставляет такое же API для анимации как и JQuery, но при этом никаких зависимостей не имеет. Пригодится тем, кому нужна анимация из JQuery, но сам JQuery не нужен.

Итак, подведем итоги:

Я хочу сделать анимацию…

И в Canvas, и в HTML: GSAP.

Только в Canvas: tween.js.

Только в HTML: WOW.js + Animate.css или Move.js.

В HTML, и мой сайт использует JQuery: JQuery Effects.

Не смешно? А здесь смешно: @ithumor

Источник: https://tproger.ru/digest/5-animation-tools-for-web/

Поделиться:
Нет комментариев

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

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