Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
Jul 25, 2015
Jul 24, 2015
Jul 21, 2015
Jul 24, 2015
Jul 20, 2015
Jul 25, 2015

wickedCSS

A library for CSS3 animations.

The animations include regular CSS3 animations to be used in all settings. Additionally, the library includes a number of wicked animations, which aren't applicable in all situations. They can be fun to play with.

For examples and documentation View Project Page.

Usage

To use the library, simply download and link to the file in your header.

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

Or the non-minified version.

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

Simply add the animation class to your element and it will perform your wicked animation.

<div class="barrelRoll"> Place your content here </div>

In this case, the contents of the div will perform the barrelRoll animation. All the classes can be found on the Project Page.

The classes can be applied to all elements including images.

<img src="images/mushroom.png" class="spinner"/>
Classes
  • floater
  • barrelRoll
  • rollerRight
  • rollerLeft
  • heartbeat
  • pulse
  • rotation
  • sideToSide
  • zoomer
  • zoomerOut
  • spinner
  • wiggle
  • shake
  • pound
  • slideUp
  • slideDown
  • slideRight
  • slideLeft
  • fadeIn
  • fadeOut
  • rotateInRight
  • rotateInLeft
  • rotateIn
  • bounceIn

Customizations

Show on scroll

In order to show the animations on scroll, the library can be integrated with wow.js. The animation will fire when the element enters the screen. Remember to include jQuery before wow.js like so:

Jquery with local fallback:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>

wow.js

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

It can be used like this:

<div class="wow barrelRoll"> Content to Reveal Here </div>
Show on scroll - Alternative

The animation can alternatively be triggered at a specific position. In this example it will be triggered when the element is 450 pixels from the top of the screen.

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

About

A library for CSS3 animations. The animations are more vibrant than most simple animations.

Topics

Resources

License

Releases

No releases published

Packages

No packages published