1. Теперь за форумную активность начисляются биткоины и другие криптоденьги. Подробнее.
    Скрыть объявление
  2. Появилась архивная версия форума arhiv.xaker.name, где собраны темы с 2007 по 2012 год.
    Скрыть объявление

Творим чудеса с помощью библиотеки Animate.css

Тема в разделе "CSS, HTML, JS", создана пользователем хопкинс, 30 авг 2013.

  1. хопкинс
    хопкинс Новичок
    Симпатии:
    35
    Друзья. В этой теме я хочу кратко рассказать вам о ВОЛШЕБНОЙ библиотеке. Изначально я планировал написать подробную статью...но возникли некоторые трудности которые я пока не решил.(Осталось всего одна). Не пинайте сильно просто не мог не запостить эту няшку)))

    Встречайте:yahoo:-библиотека Animate.css

    Постараюсь объяснить в двух словах. Данная библиотека позволяет отказаться(в некотором роде) от JS. Да-да! У вас не обман зрения.все именно так.Для начала я бы хотел продемонстрировать сия чудо ТЫЦ

    Для тех кто наигрался я продолжу. Пока я не буду подробно описывать всех прелестей(Как подключить, настроить и т.д)Единственное что я хочу сказать:

    1 Пока есть затруднения с префиксом
    2 В некоторых случаях приходится применять JS(Например если хотите прицепить анимацию на hover)

    Первую проблему для себя я решил просто.Я использую LESS.
    Над второй я еще не работал.

    В заключение я хочу сказать, что выражаю огромную благодрность Дэну Эдену...И хочу сказать себе "какого черта я не встретился с этим раньше?!"

    P.S. Сейчас я нахожусь на работе, но как только приду сразу постараюсь по подробнее расписать эту статью)...Ну не мог я не поделится этим прямо сейчас.

    P.P.S Скачать библиотеку можно по этим ссылкам. Полная версия , Упакованная
     
    Последнее редактирование: 30 авг 2013
    30 авг 2013
  2. хопкинс
    хопкинс Новичок
    Симпатии:
    35
    Извиняюсь за задержку. Пока появилось время расскажу вам все немного подробнее. Итак-поехали!

    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 Ну вот наверное и все, что я хотел вам рассказать. Пишите в комментариях ваши вопросы-буду рад ответить на них)
     
    2 сен 2013
    Хулиган нравится это.
  3. bumer72
    bumer72 Новичок
    Симпатии:
    1
    Круто нужно попробовать обязательно)
     
    1 окт 2015

Поделиться этой страницей

Загрузка...