Здравствуйте, давайте подключим к wordpress сайту CSS библиотеку – Wicked CSS, которая позволяет добавлять красивые эффекты анимации на веб-страничку.


Скачать исходники для статьи можно ниже

Примеры анимации, которые можно создать можно посмотреть здесь:
“kristofferandreasen.github.io/wickedCSS/”

Для применения анимации к определенной страницы сайта можно воспользоваться плагином CSS & JavaScript Toolbox:
Активных установок: 20 000+
Сайт плагина: “ru.wordpress.org/plugins/css-javascript-toolbox/”

Или же использовать виджет “HTML-код” вместе с плагином Widget Logic:
Активных установок: 300 000+
Сайт плагина: “ru.wordpress.org/plugins/widget-logic/”

Давайте подключим библиотеку Wicked CSS и создадим простую анимацию.

Пример будет состоять из следующего кода:

Html-код:

<div class="barrelRoll"> Добро пожаловать на сайт!</div>

И код:

<link rel="stylesheet" href="http://kristofferandreasen.github.io/wickedCSS/wickedcss.css">

<script src="http://www.jquerycookbook.com/demos/scripts/jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            $("#someTable td.age").filter(function () {
                return parseInt($(this).text(), 10) > 50;
            }).addClass('highlite');
        });
    </script>
    
    
    <script> 
$(window).scroll(function() { 
  $('#animatedElement').each(function(){ 
   var imagePos = $(this).offset().top;
   var topOfWindow = $(window).scrollTop();
   if (imagePos < topOfWindow+100) {
   $(this).addClass("barrelRoll2");
   } 
  }); 
}); 
</script>

Давайте всавим вышеуказанный код в виджет “HTML-код”, а для этого нужно войти в админку wordpress, в левом меню выбрать пункт ” Внешний вид”, подпункт “Виджеты”:

Чтобы поменять анимацию достаточно изменить класс, например на следующий:

HTML-код:

<div class="heartbeat"> Добро пожаловать на сайт!!</div>

Библиотека Wicked CSS может быть интегрирована с wow.js.

Вот пример взаимодействия Wicked CSS и WOW.js:
“kristofferandreasen.github.io/wickedCSS/examples.html”