Какие плагины нужны для сервера. Плагины успеха: что установить на сервере, чтобы повысить онлайн. Плагины для сервера Minecraft
Будем учиться анимировать объекты сайта легко и быстро, при помощи двух скриптов. Название которых вы можете наблюдать выше, в заголовке этой статьи. Но в начале, давайте я вам расскажу, для чего нужен каждый из них.
WOW.js – это маленькая библиотека, которая позволяет включать анимацию на определенном этапе прокрутки страницы. Весит очень мало, и к тому же полностью самостоятельна – то есть нет необходимости подключать jQuery или других монстров.
Animate.CSS – скрипт, который непосредственно отвечает за саму анимацию. По сути wow.js берет анимации именно из этой штуки.
Как скачать и подключить.1 шаг. Для работы нам понадобиться скачать скрипты wow.js и animate.css
Файл animate.css – библиотека, в которой прописаны стили для анимации элементов на странице. Для того, чтобы визуально оценить и выбрать вид анимации, обычно, я использую страничку ресурса http://daneden.github.io/animate.css/
2 шаг. Подключаем скрипты
Тег script необходимо всегда добавлять в конец body. Это делается для быстроты загрузки страницы. Каждый раз, когда браузер доходит до тега script, загрузка и рендеринг всего сайта замораживается, пока скрипт не будет загружен. От этого зачастую мы видим сайты, которые долгое время просто белый лист. А так же, если скрипт размещён в конце body, у вас есть гарантия что body - ready и скрипт точно отработает.
Шаг 3. Необходимо инициализировать скрипт добавив вот такой код, сразу после его подключения:
new WOW().init();
На этом подключение заканчивается, и настает пора второго этапа.
Использование WOW.jsШаг 1. Выбираем элемент, который хотим анимировать и добавляем ему класс class="wow" . В коде ниже, я показал это на примере картинки:
Шаг 2. Выбираем анимацию, и добавляем её дополнительным классом к нашей картинке:
Шаг 3 (не обязательно). Добавляем настройки для анимации если надо, при помощи специальных data-атрибутов:
В коде выше мы указали, что анимация должна срабатывать, когда картинка пройдет 200 пикселей от низа экрана. Но при этом у нее будет задержка в пол секунды, а сама анимация будет занимать по времени ровно 2 секунды.
Настройки WOW.js анимации через атрибутыdata-wow-duration – указываем время проигрывания анимации
data-wow-delay – ставим задержку перед проигрыванием анимации
data-wow-offset – включение анимации, когда элемент проходит определнное количество пикселей от низа экрана
data-wow-iteration – количество повторов анимации
Обращаю ваше внимание на то, что эти атрибуты не обязательные. Если вы их не укажете, анимация будет просто проигрываться по умолчанию, как только элемент появится на экране при прокрутке окна браузера.
Этот материал посвящён анимации на HTML страницах, о производительности анимации, перспективности использования, а так же анимации в HTML5 мобильных приложениях и играх.
Javascript анимацияПервым делом начнём с рассмотрения JS анимации на HTML странице. Анимация на яваскрипте может проводиться либо с setInterval, с помощью которой можно задать статично кадры в секунду, либо с помощью обычной функции которая в конце вызывает саму себя ну или с window.requestAnimationFrame.
Вот простейшая логика работы анимации в JS:
var el=document.getElementById("elem");
mar=10; //статичные начальные данные
//цикл начинается
mar=mar+1;
el.style.marginLeft=mar+"px";
//цикл заканчивается
Прелесть JS в том что можно удобным способом расширить нативный инструментарий и использовать например анимацию на jQuery или использовать Velocity . Это существенно ускоряет производительность. Однако в частности Velocity использует JS не совсем для анимации, так ака само анимирование производиться там в CSS о котором речь пойдёт ниже.
SVG анимацияНельзя не упомянуть о SVG анимации. Сама она очень хороша, но в мобильных браузерах она не работает. Вернее работает только SMIL на Андроид 3.0-выше. Как бы неприятно было это говорить сам SVG работает в методе WebView, но всё что связано с анимацией в этом тэге увы...
Везде где она работает - она показывает хорошую производительность. Убедитесь сами.
