Блог

Я нахожусь в процессе создания магазина Shopify и хотел бы немного выйти за рамки того, что предлагают темы. В частности, я пытаюсь добавитьwow.js и animate.css.

Как вы можете видеть ниже, я добавил CDN для Animate.css в head тег template.liquid .

Затем я добавил CND для Wow.js и активирован как таковой:

Кажется, что скрипты загружаются просто отлично, даже добавляет animated класс при прокрутке элемента, но по какой-то причине ни одно из действий не выполняется.

Мы высоко ценим любой вклад в решение этой проблемы!

Ну, это было крайне раздражающе. В любом случае, способ ссылаться / активировать анимацию Animation.css теперь, похоже, связан с классом, animate__animated а не просто animated , как это было раньше.

Это означает, что при инициализации wow.js нужно изменить это animationClass на animate__animated как таковое:

 new WOW({
  animateClass: 'animate__animated', // --> WOW default is animated but that does not work anymore
  }).init();  

И анимации Animation.css должны быть такими:

 <div class="wow animate__fadeInUp">Lorem</div>  

Возможно, CSS вашей темы переопределяет animate.min.css, поскольку он загружается перед ним. Попробуйте загрузить animate.min.css последним, непосредственно перед закрывающим </head> тегом