Getting Started

html5.parallax.js is a Jquery Plugin base on HTML5.
It with Stellar, Mousewheel and Easing to make a customized scrolling animation.
Combined the CSS3 effect to go to accomplish what you need a parallax scrolling effect.

First, we need to setting $(element).parallScroll() against the element.

$("body").parallScroll(); //Start in a Tag

$("#myContainer").parallScroll(settings, selector); //Start the plugin

settings = Plugin setting selector = Element name

element.parallScroll ({ parameter setting })

useEasing://boolean to using Easing effect (def: true)

interval://interval of scrolling page (def: 25)

scrollLimit://right scroll limit (def: 8000)

scrollRatio://rate ratio of scrolling page (def: 500)

naviRatio://rate ratio of navigation bar clicked (def: 800)

naviLocate://navigation's id name & starting position

For Example : { navi_demo: 0, navi_start: 100 }

scrollAxis://Set scrolling axis (def: 'x')

horiScroll://Set scrolling to be horizontal scrolling (def: true)

vertiScroll://Set scrolling to be vertical scrolling (def: true)

response://Refreshes parallax content on window load and resize (def: false)

parallaxB://Enable or disable the Backgrounds of parallax (def: true)

parallaxE://Enable or disable the Elements of parallax (def: true)

hideElem://Hide parallax elements that move outside the viewport (def: true)

hideType://Customise hidden (def: function($elem){$elem.fadeOut()})

showType://Customise shown (def: function($elem){$elem.show()})

refValueW://The reference value of browser width (def: $(window).width())

refValueH://The reference value of browser height (def: $(window).height())

navId://setting the navigation name to plugin (def: '#navi')

formula://proportional Formula

For Example : function(a, b){ return Math.round(a / b * 100) / 100; }

Mix Effect's Rule

if A = stellar, B = Parallax, C = CSS3

then :

A + B + C == FINE

A +(B or C) == FINE

but :

A + B + B == ERROR

A + C + C == ERROR

Document

Html5.parallax.js provides to any element to setting the custom animation in scrolling.
When you setting the element as below : ( For example Frame Action )

</div>

As above, data-stellar-ratio provides parallax scrolling, data-frame provides parallax action
and data-animated provides the CSS3 animation effects.

The Rule of Parameter Setting :

No.1 All parameters are setting in pixel ( No accept percent )

when resize the window will auto calculate relative pixel

No.2 data-init-* is a action initialized setting

No.3 data-init-dist setting the start position of animation ( Pixel )

No.4 data-action-* is a customise animation setting

No.5 data-action-direct setting the Direction of animation ( Boolean )

No.6 data-action-axis setting the Axis of animation ( Boolean )

No.7 sdist & edist exist in all action ( sdist def: 0 ) ( edist def: window scope )

NOTE! window scope is Width in horizontal scroll and Height in vertical

Rotate Action

Rotate Action Setting :

rotate : animation trigger angle

speed : animation rotate speed

direct : animation direction in scrolling

Rotate Action Setting Example :

data-init-rotate='{"rotate":"0"}' data-rotate='{"speed":"6", "direct":"1"}'

Scale Action

Scale Action Setting :

dist : animation position

sdist : animation starting position

scale : animation starting size

speed : animation speed in distance

resize : each scaling size

direct : animation direction in scrolling

max : animation scaling maximum size

min : animation scaling minimum size

Scale Action Setting Example :

data-init-scale='{"dist":"6400", "scale":"1"}' data-scale='{"sdist":"6400", "speed":"400", "resize":"0.5",

Frame Action

Frame Action Setting :

dist : animation position

sdist : animation starting position

now : currently animation frame

next : next animation frame

speed : animation speed in distance

Frame Action Setting Example :

data-init-frame='{"dist":"7400","now":"0","next":"0"}' data-frame='{"sdist":"7400", "speed":"200"}' <img src="1.png" style="display:block;"> <img src="2.png" style="display:none;"> <img src="3.png" style="display:none;">

Mask Action

Mask Action Setting :

dist : animation position

sdist : animation starting position

speed : animation speed in distance

clip : each adjustment of mask clip

direct : animation direction in scrolling

axis : animation axis in scrolling

Mask Action Setting Example :

data-init-mask='{"dist":"8600"}' data-mask='{"sdist":"8600", "speed":"100", "clip":"10",

// Exist when using a custom mask image

CSS Sprite Action

CSS Sprite Action Setting :

speed : animation Moving speed

direct : animation direction in scrolling

axis : animation axis in scrolling

CSS Sprite Action Setting Example :

data-sprite='{"speed":"3", "direct":"1", "axis":"0"}'

Move Action

Move Action Setting :

dist : animation position

sdist : animation starting position

posi : animation ending position

speed : animation Moving speed

moving : each moving distance of image

direct : animation direction in scrolling

max : animation scaling maximum position

min : animation scaling minimum position

Move Action Setting Example :

data-init-move='{"dist":"10800", "posi":"140"}' data-move='{"sdist":"10800", "speed":"50", "moving":"12",

Contact

html5.parallax.js was produced by Shawn Wu in 20131024

@Wu Shang En on Facebook or Twitter

@This project under the MIT License

@Fork me on Github