Хостинг серверов Minecraft playvds.com
  1. Вы находитесь в русском сообществе Bukkit. Мы - администраторы серверов Minecraft, разрабатываем собственные плагины и переводим на русский язык плагины наших собратьев из других стран.
    Скрыть объявление

  2. Данный раздел создан исключительно для релизов! Вопросы по лаунчеру или обвязке задавайте ТОЛЬКО в соответсвующей теме автора. Любые другие темы будут удалены, а авторы понесут наказание.

Добро пожаловать! Только для релизов!

Веб библиотека анимаций

Тема в разделе "Веб-обвязки и лаунчеры", создана пользователем iBlue, 10 авг 2013.

  1. Автор темы
    iBlue

    iBlue Активный участник

    Баллы:
    48
    Skype:
    KPbIWKA.skype
    Имя в Minecraft:
    KPbIWKA
    Всем привет рубакитцы сегодня я как обычно лазил по просторам нашего великого интернета и наткнулся на очень интересную штучку
    1. Для начала следует скачать и подключить библиотеку. Есть три варианта.
    • Скачать библиотеку http://daneden.me/animate/ там же и все списки анимаций.
    • Далее подключаем файл animate.css через тег <link> как это делается с любым другим стилевым файлом.
    <link href="animate.css" rel="stylesheet">
    2. Чтобы применить эффект анимации к желаемому элементу, добавляем к нему два класса — animated и класс с названием эффекта, допустим fadeInDown Например, вы желаете добавить мерцание ко всем изображениям на странице. В HTML записываем следующее:
    <img src="images/figure.jpg" alt="Винни-Пух" class="animated flash">
    Если на сайте используется jQuery, то добавление классов упрощается и делается через JavaScript.
    <script> $(document).ready(function() { $('img').addClass('animated flash'); }) </script>
    3. Сама анимация включается автоматически при загрузке страницы. Это удобно для всплывающих сообщений, призванных привлечь внимание пользователя (пример 1).
    Пример 1. Всплывающее сообщение
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Предупреждение</title> <link href="style/animate.css" rel="stylesheet"> <style> .warning { background: #fc0; padding: 10px; border: 1px solid #000; } </style> </head> <body> <div class="animated fadeInDown warning"> Зенитное часовое число оценивает экваториальный секстант! </div> </body> </html>
    ​
    Чтобы эффект срабатывал при наведении на элемент курсора мыши, придётся использовать JavaScript. В качестве примера рассмотрим картинки, которые двигаются при наведении на них курсора мыши. К тегу <img> добавляем класс animated и подключаем jQuery (пример 2).
    Пример 2. Галерея
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Галерея</title> <link href="style/animate.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> $(document).ready(function() { $('img.animated').hover( function() { $(this).addClass('bounce'); // Добавляем класс bounce }, function() { $(this).removeClass('bounce'); // Убираем класс } )}) </script> </head> <body> <img src="images/thumb1.jpg" alt="" class="animated"> <img src="images/thumb2.jpg" alt="" class="animated"> <img src="images/thumb3.jpg" alt="" class="animated"> </body> </html>
    ​
    ​
    В данном примере при наведении курсора на изображение с классом animated добавляется ещё один класс bounce; если курсор убрать, то класс bounce также убирается.
    4. Окончательно можно настроить анимацию по своему вкусу, изменив скорость анимации, а также задав время задержки через CSS. И то и другое не обязательно и применяется при необходимости.
    .animated { -webkit-animation-duration: .6s; -o-animation-duration: .6s; -moz-animation-duration: .6s; animation-duration: .6s; -webkit-animation-delay: 1s; -o-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; } Ну вот и все=) ставте лайки! демо: http://daneden.me/animate/
     
    iBlue, 10 авг 2013
    #1
    Сникерсни нравится это.
    2. Хостинг MineCraft
    <
  2. Groove

    Groove Старожил Пользователь

    Баллы:
    103
    Skype:
    belog81
    Имя в Minecraft:
    nety
    А демо есть?
     
    Groove, 11 авг 2013
    #2
  3. Автор темы
    iBlue

    iBlue Активный участник

    Баллы:
    48
    Skype:
    KPbIWKA.skype
    Имя в Minecraft:
    KPbIWKA
    добавил
     
    iBlue, 11 авг 2013
    #3
    The Midnight Wizard нравится это.

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