lazzy.js

A lightweight jQuery plugin for adding custom animations to elements sequentially.

Adventages:

• You can define your own css animation.
• You only define the objects.
• You can define your own timing.
• You can use the effect on scroll
• Super simple to install, and works with any css animation library, so if you already use it, that will be very fast to setup.

Version

1.0.0

Documentation

Installation

1.- Download the jquery Plugin here or use the next options:

• Bower
• NPM
• CDN

2.- (Optional) Includes the script before </body> tag and jQuery before </head>:

<script type="text/javascript" src="src/lazzy.js"></script>

3.- Init the plugin whit the next javascript code:

$('.my-element').lazzy();

By default the plugin adds the .is-show class to all your defined elements with a delay of 200ms you can modify this values later.

4.- Customize your classes to adds showing effects for your elements, example:

.my-element { /* The custom animation */
	opacity: 0;
	transform: scale(1.5);
	transition: all 200ms ease;
}

.my-element.is-show { /* The default element style */
	opacity: 1;
	transform: scale(1);
}

Advanced Use

The complete options for lazzy are this:

$('.my-element').lazzy({
	className: "is-show", // animated css class (default is is-show)
	delay: 200,
	onScroll: false, // Triggering animation when scrolls down to the elemen (default is false)
	triggerOffset: 0, // distance to the element when triggering the animation (default is 0)
	afterFinish: function() {
		// the callback is fired when the animation is finished
	}
});

Contribute

You're free to contribute to his project in any way you want, only make a PR request.

Roadmap

This are our backlog to the future relases:

• Optimize the animation cycle.
• Adds default animations.
• Adds reverse scroll functionality.
• Makes the script jQUery free.

Contributors

Thanks to everyone who has contributed to the project so far:

• Eduardo Higareda
• Walter Reyes
• Emmanuel de Oleo