Laxxx.js ---a light weight Plugin to create animation when scrolling

It's a imple & light weight (<3kb gzipped) vanilla javascript plugin to create smooth & beautiful animations when you scrolllll! 


How I create this animated page with the Plugin?

Step1: 

Link the lax.js file to your website ,which is the eaiest way to apply. Or with the npm install to apply especially with React and so on.

Step2:
JS 
Add the script in the body  for init the plugin.

Step3:
HTML
Select the tags which you want to add animations and attach the classname and attributes.

Set the classname to lax to point the animation tags.
And data-lax-preset is the default animation setting which is easier and quick apply. Or you can customize the animation attributes with custom data setting.

Supported preset values from official:

Default Strength
linger	n/a
lazy	100
eager	100
lazy	100
slalom	50
crazy	n/a
spin	360
spinRev	360
spinIn	360
spinOut	360
blurInOut	40
blurIn	40
blurOut	40
fadeInOut	n/a
fadeIn	n/a
fadeOut	n/a
driftLeft	100
driftRight	100
leftToRight	1
rightToLeft	1
zoomInOut	0.2
zoomIn	0.2
zoomOut	0.2
swing	30
speedy	30

Transform	Key
opacity	data-lax-opacity
translate	data-lax-translate
translateX	data-lax-translate-x
translateY	data-lax-translate-y
scale	data-lax-scale
scaleX	data-lax-scale-x
scaleY	data-lax-scale-y
skew	data-lax-skew
skewX	data-lax-skew-x
skewY	data-lax-skew-y
rotate	data-lax-rotate
rotateX	data-lax-rotate-x
rotateY	data-lax-rotate-y

Transform

Default Strength
linger	n/a
lazy	100
eager	100
lazy	100
slalom	50
crazy	n/a
spin	360
spinRev	360
spinIn	360
spinOut	360
blurInOut	40
blurIn	40
blurOut	40
fadeInOut	n/a
fadeIn	n/a
fadeOut	n/a
driftLeft	100
driftRight	100
leftToRight	1
rightToLeft	1
zoomInOut	0.2
zoomIn	0.2
zoomOut	0.2
swing	30
speedy	30

If you just wanna change the specific value of preset. Just add the value you want after the preset name after the "-".Such as..

Supported attributes keys from official:

Transforms

Key
opacity	data-lax-opacity
translate	data-lax-translate
translateX	data-lax-translate-x
translateY	data-lax-translate-y
scale	data-lax-scale
scaleX	data-lax-scale-x
scaleY	data-lax-scale-y
skew	data-lax-skew
skewX	data-lax-skew-x
skewY	data-lax-skew-y
rotate	data-lax-rotate
rotateX	data-lax-rotate-x
rotateY	data-lax-rotate-y

Filter	Key
brightness	data-lax-brightness
contrast	data-lax-contrast
hue-rotate	data-lax-hue-rotate
blur	data-lax-blur
invert	data-lax-invert
saturate	data-lax-saturate
grayscale	data-lax-grayscale

Filter

Key
opacity	data-lax-opacity
translate	data-lax-translate
translateX	data-lax-translate-x
translateY	data-lax-translate-y
scale	data-lax-scale
scaleX	data-lax-scale-x
scaleY	data-lax-scale-y
skew	data-lax-skew
skewX	data-lax-skew-x
skewY	data-lax-skew-y
rotate	data-lax-rotate
rotateX	data-lax-rotate-x
rotateY	data-lax-rotate-y

Filters (note - these may be unperformant on low powered machines)

Key
brightness	data-lax-brightness
contrast	data-lax-contrast
hue-rotate	data-lax-hue-rotate
blur	data-lax-blur
invert	data-lax-invert
saturate	data-lax-saturate
grayscale	data-lax-grayscale

Filter	Key
background position	data-lax-bg-pos
background position-x	data-lax-bg-pos-x
background position-y	data-lax-bg-pos-y

Filter

Key
brightness	data-lax-brightness
contrast	data-lax-contrast
hue-rotate	data-lax-hue-rotate
blur	data-lax-blur
invert	data-lax-invert
saturate	data-lax-saturate
grayscale	data-lax-grayscale

Other

Key
background position	data-lax-bg-pos
background position-x	data-lax-bg-pos-x
background position-y	data-lax-bg-pos-y

x

Key
background position	data-lax-bg-pos
background position-x	data-lax-bg-pos-x
background position-y	data-lax-bg-pos-y

For more attributes and values setting, go to Github

My demo code Github