炫酷CSS3动画库wickedCSS

wickedCSS是一款效果非常炫酷的CSS3动画库。该CSS3动画库包含24种不同效果的CSS3动画，并且它可以和WOW.JS结合使用，在元素计入视口时产生炫酷动画效果。

使用方法

在页面中引入wickedcss.css文件。

<link rel="stylesheet" href="path/to/wickedcss.css">
                

HTML结构

使用一个<div>作为容器，里面可以放置任何内容。然后在<div>上添加执行CSS3动画需要的class类即可。

<div class="barrelRoll"> 这里放置你的内容 </div>
                

class类可以放置在任何元素上，包括图片，例如：

<img src="images/mushroom.png" class="spinner"/>
                

wickedCSS CSS3动画库的内置class类有：

• floater
• barrelRoll
• rollerRight
• rollerLeft
• heartbeat
• pulse
• rotation
• sideToSide
• zoomer
• zoomerOut
• spinner
• wiggle
• shake
• pound
• slideUp
• slideDown
• slideRight
• slideLeft
• fadeIn
• fadeOut
• rotateInRight
• rotateInLeft
• rotateIn
• bounceIn

在页面滚动时执行动画

wickedCSS动画库可以和wow.js结合使用，用于在页面滚动元素进入视口时制作动画效果。

你需要引入jquery和wow.min.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/wow.min.js"></script>
                

HTML结构如下：

<div class="wow barrelRoll"> 放置你的内容 </div>
                

然后初始化wow.js插件。

new WOW().init();
                

在页面滚动到指定位置时执行动画

你也可以在页面滚动到指定位置时执行动画。例如下面的例子在元素滚动到距离页面顶部450像素的距离时执行动画。

<script>
      $(window).scroll(function() {
        $('#animatedElement').each(function(){
        var imagePos = $(this).offset().top;
    
        var topOfWindow = $(window).scrollTop();
          if (imagePos < topOfWindow+450) {
            $(this).addClass("barrelRoll");
          }
        });
      });
</script>
                

wickedCSS CSS3动画库的github地址地址为：https://github.com/kristofferandreasen/wickedCSS