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

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

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

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

Тренинг по вёрстке сайта на HTML5 и CSS3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

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

(обязательно)

Комментариев: 6
  •  Александр | 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

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

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