By default, this plugin doesn't provide any animations or CSS to load elements.
This plugin only toggle classes on elements.
Load plugin and its' dependencies.
<!-- Place somewhere in the <head> of your document -->
< script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js "> </ script >
< script src ="jquery.fade-on-scroll.js "> </ script > < div class ="fade-on-scroll ">
< img src ="http://placehold.it/350x150 " />
</ div > $ ( document ) . ready ( function ( ) {
$ ( '.fade-on-scroll' ) . fadeContentOnScroll ( ) ;
} ) ;
< / script > < div class ="fade-on-scroll-multiple ">
< div class ="fade-element ">
< img src ="http://placehold.it/350x150 " />
</ div >
< div class ="fade-element ">
< img src ="http://placehold.it/350x150 " />
</ div >
< div class ="fade-element ">
< img src ="http://placehold.it/350x150 " />
</ div >
</ div > $ ( document ) . ready ( function ( ) {
$ ( '.fade-on-scroll-multiple' ) . fadeContentOnScroll ( {
elements : '.fade-element'
} ) ;
} ) ;
< / script > Config through attributes < div class ="fade-on-scroll-multiple " data-fade-elements =".fade-element ">
< div class ="fade-element ">
< img src ="http://placehold.it/350x150 " />
</ div >
< div class ="fade-element ">
< img src ="http://placehold.it/350x150 " />
</ div >
< div class ="fade-element ">
< img src ="http://placehold.it/350x150 " />
</ div >
</ div > $ ( document ) . ready ( function ( ) {
$ ( '.fade-on-scroll-multiple' ) . fadeContentOnScroll ( ) ;
} ) ;
< / script > Auto init configured by attributes < div data-toggle ="fade-on-scroll " data-fade-elements =".fade-element ">
< div class ="fade-element ">
< img src ="http://placehold.it/350x150 " />
</ div >
< div class ="fade-element ">
< img src ="http://placehold.it/350x150 " />
</ div >
< div class ="fade-element ">
< img src ="http://placehold.it/350x150 " />
</ div >
</ div >
settings
type
default
description
elements`string
null`
null
startClassstring'fade-start'This class will be added to the element to animate. Marks "this element will be animated"
readyClassstringfalseThis class will be added when loading animation is ready.
threshold0 <= {number} >= 10.4Start class will be removed when this percentage of the element's height is visible.
lengthnumber400The length of animation in milliseconds.
delaynumber250The delay between fading elements when multiple element should be loaded.
settings
attribute name
elementsdata-fade-elements
startClassdata-fade-start-class
readyClassdata-fade-ready-class
thresholddata-fade-threshold
lengthdata-fade-length
delaydata-fade-delay
Event name
description
fade-on-scroll.initTriggered on the element the plugin is initialized when plugin preparation is ready.
fade-on-scroll.init-elementTriggered on the fading elements when the plugin preparation is ready.
fade-on-scroll.loadingTriggered on the fading elements when loading starts (when startClass is removed).
fade-on-scroll.loadedTriggered on the fading elements when loading ready (after startClass is removed delayed by length).