如何在Shopify上添加wow.js / animate.css？

编程问答 2022-08-14

问题描述

我正在创建Shopify商店，并且希望超出主题提供的范围。具体来说，我想添加wow.js和animate.css。

如下所示，我在api.py的{​​{1}}标签中添加了Animate.css的CDN。

enter image description here

接下来，我为Wow.js添加了CND并激活了：

enter image description here

似乎可以很好地加载脚本，甚至可以在滚动到元素时添加head类，但是由于某种原因，没有任何幻想。

enter image description here

感谢大家为缓解这一问题做出的贡献！

解决方法

可能是您主题的CSS覆盖了 animate.min.css ，因为该主题的CSS已在其主题之前加载。尝试最后加载 animate.min.css ，紧接在</head>结束标记之前

,

这真让人讨厌。无论如何，现在引用/激活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>

animate.cssjavascriptliquidshopifywow.js