Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Animate.css - CSS3 Библиотека для создания анимации

Дата добавления: 31.03.2014 - 15:25
Добавил: Buger
Количество просмотров: 1179
Количество комментариев: 0
Размер файла: 35.3Kb
Рейтинг материала: 5.0 / 2
Animate.css - CSS3 Библиотека для создания анимации
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 5.0
/
голосов 2

CSS улучшилось многими функциями, которые делают веб-разработку намного интереснее.
Одна из этих функций, эффекты анимации на CSS3. До этого, чтобы создать анимацию, вы должны были работать только с Javascript.
Но теперь вы можете легко создать анимацию с помощью CSS3.

Animate.css - это готовая к использованию библиотека для эффектов анимации.
Эта библиотека предоставляет вам более 50 различных анимационных эффектов, которые работают стабильно на большинстве браузеров с поддержкой CSS3.
Так же вы можете применить анимацию на свой текст, изображения, формы и так далее.
Скачать полную библиотеку, вы можете с нашего сайта.

 

Приступая К Работе


С Animate.css, все, что вам нужно сделать, это включить соответствующие классы элементов. Чтобы приступить к работе, необходимо, подключить библиотеку animate.css файл в <head>...</head>.

По умолчанию, Animate.css будет воспроизводиться только один раз при первой загрузке страницы. Затем он останется статичным. Чтобы быть в состоянии контроля анимации, нам потребуется немного Javascript.
В этом вопросе, мы подключим jQuery, вот так:

 

<head>
...
    <link rel="stylesheet" type="text/css" media="all" href="/css/animate.css">
    <script type="text/javascript" src="/jquery-latest.min.js"></script>
...
</head>

 

HTML-Разметка


Для приминения различного эффекта анимации вы должны добавить .animated класс элемента, тот который вы хотите анимировать:

Пример: ( wobble ) и будет наш класс эффекта анимации.

 

<div class="option animated wobble">Этот текст будет анимировать</div>

 

Анимация будет осуществляться только на странице загрузки, так что вам, возможно, также потребуется использовать Javascript, чтобы применить анимацию на триггер события.
В .option также могут быть настроены в соответствии с вашими потребностями.

 

Дополнительные Параметры CSS


Анимация, как мы определили ранее, будет воспроизводиться только один раз и по предварительно определенной продолжительности и времени задержки.

Если вам нужно больше продолжительности или времени задержки, то вот как это можно настроить.
Пусть цикла анимации может производиться от нескольких раз и до бесконечности, вы можете использовать атрибут animation-iteration-count.
Убедитесь также, что имеются префиксы webkit, moz, и др. Чтобы сделать его бесконечным, нужно добавить infinite, как и значение.

Если же вам нужно, чтобы повторялась анимация только несколько раз, просто введите значение числом, которое вы хотите.

 

-vendor-animation-iteration-count: infinite | <number>;

 

Для настройки длительности, соответствующий атрибут использования задержки контроля "animation-duration" и "animation-delay".
Ниже приведен пример кода опции.

 

.option {  
  -webkit-animation-duration: 3s;  
  -webkit-animation-delay: 2s;  
  -webkit-animation-iteration-count: 5;  
}  

 

Javascript Управления


Для большего контроля на анимации, нам нужна маленькая помощь Javascript. Допустим, мы хотим добавть текстовую ссылку для запуска анимации на кнопке.

Во-первых, мы должны добавить ссылку на ссылку, например, так:

 

<div class="demo animated">
    <p>Этот текст будет анимировать. <a href="" id="ref">Нажмите, чтобы анимировать!</a></p>
</div>

 

Для использования выберите функцию click.

С Javascript, вы можете определить имя анимации. Мы будем использовать подход, создав animate функции, и анимации вместе с элементом класса (в вышеприведенном коде мы добавили demo атрибут).
И Javascript-код, как показано ниже.

 

<script language="javascript">
    $(function() {
        $("#ref").click(function() {
            animate(".demo", 'bounce');
            return false;
        });
    });
    
    function animate(element_ID, animation) {
        $(element_ID).addClass(animation);
        var wait = window.setTimeout( function(){
            $(element_ID).removeClass(animation)}, 1300
        );
    }
</script>

 

В заключении


Эффект анимации, действительно, является одним из лучших способов сделать ваш сайт более привлекательным.



Источник: Не указан
Добавлять комментарии могут только зарегистрированные пользователи.