特效描述:wickedCSS3 动画库演示特效。一款基于wickedCSS3动画库制作24种不同的动画效果演示,WOW.JS结合使用效果更佳。
代码结构
1. 引入CSS
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css"> <link rel="stylesheet" href="dist/wickedcss.css"/> <link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="css/materialize.css"/>
2. 引入JS
<script src="js/modernizr-2.8.3.min.js"></script> <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="js/materialize.js" type="text/javascript"></script> <script src="js/wow.min.js" type="text/javascript"></script>
3. HTML代码
<div class="container"> <!-- Animation image --> <!-- <div class="section"></div> <div class="section"></div>--> <div class="section"></div> <div class="section"></div> <div class="container center-align"> <div class="col s12"> <div id="animationelement" class="floater"></div> </div> </div> <div class="section"></div> <div class="section"></div> <div class="container center-align"> <div class="row"> <div class="col s12 m3 l2"> <a href="#" id="floaterButton" class="waves-effect waves-light btn-large white blue-text" >floater</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="barrelRollButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'barrelRoll', 'clicked'])">barrelRoll</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="rollerRightButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'rollerRight', 'clicked'])">rollerRight</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="rollerLeftButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'rollerLeft', 'clicked'])">rollerLeft</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="heartbeatButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'heartbeat', 'clicked'])">heartbeat</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="pulseButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'pulse', 'clicked'])">pulse</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="rotationButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'rotation', 'clicked'])">rotation</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="sideToSideButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'sideToSide', 'clicked'])">sideToSide</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="zoomerButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'zoomer', 'clicked'])">zoomer</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="zoomerOutButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'zoomerOut', 'clicked'])">zoomerOut</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="spinnerButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'spinner', 'clicked'])">spinner</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="wiggleButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'wiggle', 'clicked'])">wiggle</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="shakeButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'shake', 'clicked'])">shake</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="poundButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'pound', 'clicked'])">pound</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="slideUpButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'slideUp', 'clicked'])">slideUp</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="slideDownButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'slideDown', 'clicked'])">slideDown</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="slideRightButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'slideRight', 'clicked'])">slideRight</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="slideLeftButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'slideLeft', 'clicked'])">slideLeft</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="fadeInButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'fadeIn', 'clicked'])">fadeIn</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="fadeOutButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'fadeOut', 'clicked'])">fadeOut</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="rotateInRightButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'rotateInRight', 'clicked'])">rotateInRight</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="rotateInLeftButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'rotateInLeft', 'clicked'])">rotateInLeft</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="rotateInButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'rotateIn', 'clicked'])">rotateIn</a> <div class="section"></div> </div> <div class="col s12 m3 l2"> <a href="#" id="bounceInButton" class="waves-effect waves-light btn-large white blue-text" onClick="_gaq.push(['_trackEvent', 'bounceIn', 'clicked'])">bounceIn</a> <div class="section"></div> </div> </div> </div> </div> <script type="text/javascript"> new WOW().init(); </script> <script type="text/javascript"> /* BUTTON FUNCTIONS */ $('#rotationButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("rotation"); }); }); $('#sideToSideButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("sideToSide"); }); }); $('#zoomerButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("zoomer"); }); }); $('#zoomerOutButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("zoomerOut"); }); }); $('#spinnerButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("spinner"); }); }); $('#pulseButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("pulse"); }); }); $('#shakeButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("shake"); }); }); $('#barrelRollButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("barrelRoll"); }); }); $('#floaterButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("floater"); }); }); $('#wiggleButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("wiggle"); }); }); $('#poundButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("pound"); }); }); $('#rollerRightButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("rollerRight"); }); }); $('#rollerLeftButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("rollerLeft"); }); }); $('#heartbeatButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("heartbeat"); }); }); $('#fadeInButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("fadeIn"); }); }); $('#fadeOutButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("fadeOut"); }); }); $('#slideUpButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("slideUp"); }); }); $('#slideDownButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("slideDown"); }); }); $('#slideLeftButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("slideLeft"); }); }); $('#slideRightButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("slideRight"); }); }); $('#rotateInRightButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("rotateInRight"); }); }); $('#rotateInLeftButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("rotateInLeft"); }); }); $('#rotateInButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("rotateIn"); }); }); $('#bounceInButton').click(function() { $(this).each(function(){ $('#animationelement').removeClass(); $('#animationelement').addClass("bounceIn"); }); }); </script>