Библиотека CSS3 анимации
В этом посте я хочу поделиться с вами одним, на мой взгляд, весьма интересным ресурсом.
На этом сайте вы можете посмотреть все имеющиеся CSS3 эффекты в действии и скачать css файл с их свойствами к себе в проект.
Думаю вы замечали на landing page, как при прокрутке страницы ее содержимое выезжает с боковых сторон сайта, что-то подобное и я сделал для иллюстрации возможностей этой библиотеки с css эффектами.
Как использовать CSS библиотеку анимационных эффектов?
1. Скачиваем css файл библиотеки и добавляем к себе как обычный файл стилей
01 | <link rel= "stylesheet" type= "text/css" href= "css/animate.css" > |
2. Теперь с помощью jQuery определяем элемент к которому динамически добавляем обязательный класс animated и класс нужного эффекта, например:
01 | $( '#yourElement' ).addClass( 'animated bounceOutLeft' ); |
3. Вы также можете настроить время выполнения анимации, задержку или кол-во ее повторов, добавив такие свойства к нужному классу(элементу):
01 | #yourElement { |
02 | -vendor-animation-duration: 3 s; |
03 | -vendor-animation-delay: 2 s; |
04 | -vendor-animation-iteration-count: infinite; |
05 | } |
Выводы
Использовать эту библиотеку можно и как пособие по CSS эффектам. Можно посмотреть реализацию нужного вам эффекта и применить только его в вашем проекте не загружаю всю библиотеку.
А в паре с библиотекой jQuery сделать ваш сайт более живым и отзывчивым к действиям пользователя не составит особого труда
Рубрика: CSS, jQuery, Online инструменты, Программы и скрипты, Скачать
Огромное спасибо! Это как раз то что ищешь и долгими месяцами не знаешь где взять))
Очень рад, что смог вам помочь ))
Также я написал более подробно про реализацию демо-примера с эффектным появление текстовых блоков.
Появление элементов сайта с CSS3 эффектами
Спасибо, что читаете мой блог, пишите вопросы на интересующие вас темы, буду отвечать новыми постами