Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://kristofferandreasen.github.io/wickedCSS/
A library for CSS3 animations. The animations are more vibrant than most simple animations.
https://kristofferandreasen.github.io/wickedCSS/
animation animation-library css
Last synced: 12 days ago
JSON representation
A library for CSS3 animations. The animations are more vibrant than most simple animations.
- Host: GitHub
- URL: https://kristofferandreasen.github.io/wickedCSS/
- Owner: kristofferandreasen
- License: mit
- Created: 2015-07-20T05:45:49.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2019-10-31T12:53:30.000Z (over 4 years ago)
- Last Synced: 2024-03-17T16:32:41.346Z (3 months ago)
- Topics: animation, animation-library, css
- Language: HTML
- Homepage: http://kristofferandreasen.github.io/wickedCSS/
- Size: 1.25 MB
- Stars: 356
- Watchers: 12
- Forks: 53
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-web-resources - Wicked CSS
- awesome - Wicked CSS
README
# 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](http://kristofferandreasen.github.io/wickedCSS/).
# Usage
To use the library, simply download and link to the file in your header.
Or the non-minified version.
Simply add the animation class to your element and it will perform your wicked animation.
In this case, the contents of the div will perform the barrelRoll animation. All the classes can be found on the [Project Page](http://kristofferandreasen.github.io/wickedCSS/).
The classes can be applied to all elements including images.
##### 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](http://mynameismatthieu.com/WOW/).
The animation will fire when the element enters the screen. Remember to include jQuery before wow.js like so:
*Jquery with local fallback:*
window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')
*wow.js*
new WOW().init();
It can be used like this:
##### 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.
```javascript
$(window).scroll(function() {
$('#animatedElement').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+450) {
$(this).addClass("barrelRoll");
}
});
});
```