https://github.com/sirodiaz/scroll-animate

A jQuery plugin that animate elements with the scroll event using CSS3 animations
https://github.com/sirodiaz/scroll-animate

animation css css3-animations data-animation jquery

Last synced: 10 days ago
JSON representation

A jQuery plugin that animate elements with the scroll event using CSS3 animations

• Host: GitHub
• URL: https://github.com/sirodiaz/scroll-animate
• Owner: SiroDiaz
• License: mit
• Created: 2016-05-19T15:00:41.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-05-24T15:34:40.000Z (over 8 years ago)
• Last Synced: 2023-10-30T04:31:39.673Z (about 1 year ago)
• Topics: animation, css, css3-animations, data-animation, jquery
• Language: JavaScript
• Homepage: http://sirodiaz.github.io/scroll-animate/
• Size: 14.6 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# scroll-animate

A jQuery plugin that animate elements with the scroll event using CSS3 animations

## Usage

Include your CSS animation classes in your .css file. For example you can use

**animate.css** as animation library.

```html

```

Include jQuery and the scroll-animate at the end of the body tag and initialize the plugin

for every data-animate elements.

```html



    
Titulo uno





    
Titulo uno





    


        
Titulo uno

        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum doloremque ratione, voluptates quae sint nam aliquam explicabo dolore fugiat earum eveniet temporibus quasi voluptatem, cumque molestiae, aspernatur qui ullam autem?

    



    $('[data-animate]').scrollAnimate({startAnimation: 'animated'});

```

Use **data-animate="animationName"** to select the animation or animations that you

want to be execute.

The only one property that you can set in settings is *startAnimation* that is by default

*animated*(from animate.css) and defines the CSS class that will start the animation.