Друзья. В этой теме я хочу кратко рассказать вам о ВОЛШЕБНОЙ библиотеке. Изначально я планировал написать подробную статью...но возникли некоторые трудности которые я пока не решил.(Осталось всего одна). Не пинайте сильно просто не мог не запостить эту няшку))) Встречайте:yahoo:-библиотека Animate.css Постараюсь объяснить в двух словах. Данная библиотека позволяет отказаться(в некотором роде) от JS. Да-да! У вас не обман зрения.все именно так.Для начала я бы хотел продемонстрировать сия чудо ТЫЦ Для тех кто наигрался я продолжу. Пока я не буду подробно описывать всех прелестей(Как подключить, настроить и т.д)Единственное что я хочу сказать: 1 Пока есть затруднения с префиксом 2 В некоторых случаях приходится применять JS(Например если хотите прицепить анимацию на hover) Первую проблему для себя я решил просто.Я использую LESS. Над второй я еще не работал. В заключение я хочу сказать, что выражаю огромную благодрность Дэну Эдену...И хочу сказать себе "какого черта я не встретился с этим раньше?!" P.S. Сейчас я нахожусь на работе, но как только приду сразу постараюсь по подробнее расписать эту статью)...Ну не мог я не поделится этим прямо сейчас. P.P.S Скачать библиотеку можно по этим ссылкам. Полная версия , Упакованная
Извиняюсь за задержку. Пока появилось время расскажу вам все немного подробнее. Итак-поехали! 1. Подключаем библиотеку Она подключается как и другие обычные библиотеки: HTML: <link href="animate.css" rel="stylesheet"> 2.Применяем эффект Ну например вы хотите добавить к ссылке эффект flip Делается это очень просто-Сначала добавляем класс animated, а затем добавляем наш класс flip.Вот так) HTML: <a href="#" class="animated flip"> Так же это можно сделать через JS. HTML: <script> $(document).ready(function() { $('a').addClass('animated flip'); }) </script> 3. Проблемные места В основном все эффекты будут вешаться на какое нибудь событие(hover,active и т.д) Сделать это довольно проблематично(но можно) без JS. На JS это будет выглядеть так: HTML: <script> $(document).ready(function() { $('a.animated').hover( function() { $(this).addClass('bounce'); // Добавляем класс bounce }, function() { $(this).removeClass('bounce'); // Убираем класс } )}) </script> И вторая ЗАНОЗИЩЕ!!! Не буду здесь разводить дискуссии по поводу префиксов. Просто данная библиотека показывает как они неудобны. HTML: -webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } } -moz-keyframes rollIn { 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } } -ms-keyframes rollIn { 0% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -ms-transform: translateX(0px) rotate(0deg); } } -o-keyframes rollIn { 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } } keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } Единственное спасение(в данный моментт)-переменные LESS. P.S Ну вот наверное и все, что я хотел вам рассказать. Пишите в комментариях ваши вопросы-буду рад ответить на них)
