Animate.CSS + анимация при прокрутке

Animate.CSS + анимация при прокрутке

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

Animate.CSS – именно так он называется. В нем собрано множество уже готовых к “употреблению” анимаций. Всё, что нам останется сделать – это подключить их в нужном месте и в нужное время!

Сто процентов, вас сейчас волнует один вопрос:

-Как выглядит Animate.CSS в работе?

Ну что же... отвечу: - Просто замечательно smile

Ну, а если больше конкретики… Например, всю анимацию на странице тренинга Верстаем на 5+ я реализовал именно при помощи этой штуки. Жмякните на кнопку ниже и попадете на страничку тренинга. Мотайте страницу до самого конца, и увидите, как работает анимация:

Посмотреть ДЕМО 1

А вот это Вы создадите своими руками, если пройдете урок до конца: wink

Посмотреть ДЕМО 2

Ладно, хватит чесать языком. Пора приступать к телу! Тьфу ты, ёлки-моталки, к делу!!

Урок Animate.CSS + анимация при прокрутке

Вот здесь можно скачать архив AnimateCSS.rar

Ссылка на сайт скрипта Animate.CSS

Да кстати, как только это видео наберет 100 лайков, я запишу для вас новый урок про Animate.CSS и скрипт WOW.js

Анимацию станет делать еще проще!

Жду комментариев.

Комментариев: 8 RSS

Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

Комментариев: 8
  •  Александр | 11 февраля 2015 в 00:26:17

    Спасибо, Серега!

    •  Крутой | 28 февраля 2015 в 12:55:12

      Да Спасибо Серег!

  •  Natalia Papilina | 17 февраля 2015 в 20:43:01

    Сергей урок класс! как всегда ты с теплым добрым подходом даешь материал. Поэтому не скучно слушать. Одно хочу спросить. Меня гугл вебмастер начал закидывать помидорами, что мои страницы сайта (не все...) неадаптированы (по его понятиям) к мобильным устройствам, планшету, смартфонам и др...Короче, не знаю где надо покопаться чтобы исправить это. В Css? в коде html исправлять? И что именно за свойство такое которое дает понять роботу гугла что страница стала адаптивной? а то я чую индексация может страдать от этого. Спасибо Сережа за знания, которые применяю (потихоньку, беру то что идет у меня..)

  •  Эдмунд | 1 марта 2015 в 13:54:57

    Крепкого здоровья тебе Серега и долгих лет жизни!!!

  •  Саня | 15 сентября 2015 в 23:03:53

    Спасибо. У тебя и позитив и талант для блогера. Норм чел)

  •  Анатолий | 4 декабря 2015 в 15:27:59

    Благодарю автора.

    Отличная библиотека с эффектами и хороший урок.

  •  Доброжелатель | 23 августа 2018 в 15:10:32

    За скрипт большое спасибо! Но, елки-моталки! Есть одно замечание: я считаю, что не нужно дублировать столько js-кода, а достаточно элементам с классом .mov просто добавлять класс animated. Без него все равно не заработает, к тому же у каждого элемента будет своя анимация. Как такая альтернатива тому, чтобы создавать аж n-лишних классов и прямо пропорционально плодить js-код? wink

    •  Серёга | 18 октября 2018 в 10:49:48

      Да я тогда js на уровне скопировал/вставил/поправил знал. А так ты правильно всё написал.