Author: | jibrian |
---|---|
Views Total: | 1,264 views |
Official Page: | Go to website |
Last Update: | January 15, 2015 |
License: | MIT |
Preview:

Description:
Couch is a small standalone JavaScript library used to lazy load any DOM elements with a subtle slide animation powered by CSS3 transitions and transforms.
Basic Usage:
Place the couch.js at the end of the document.
<script src="couch.js"></script>
Wrap the DOM elements you want to lazy load into a container element with an unique ID ‘couch’.
<div id="couch"> <img data-src="1.svg"> <img data-src="2.svg"> <img data-src="3.svg"> ... </div>
The CSS/CSS3 rules to animate the DOM elements as they come into view.
#couch { max-width: 100%; } #couch > * { opacity: 0; max-width: 100%; display: block; margin: 100px auto 100px auto; transform: translateY(100px); } .onscreen { opacity: 1 !important; transition: 1s ease; -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; -ms-transition: 1s ease; transform: translateY(0px) !important; -webkit-transform: translateY(0px) !important; -moz-transform: translateY(0px) !important; -o-transform: translateY(0px) !important; -ms-transform: translateY(0px) !important; }
Config the lazy load functionality.
var couch = new Couch('couch', { // sets the distance from the bottom the element needs to be to be loaded threshold: -1, // sets the delay between loading elements. delay: 10 });