smoove.js--Gorgeous CSS3 Scroll Effects

It's really popular to apply CSS3 moving effects in nowadays website,which looks amazing compare to the static status.

The official Github here

Step1:
link the bootstrap I've used in this demo:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css">

link the script files of jQuery and smoove from cdn in the end of body section:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.9/jquery.smoove.min.js"></script>

Step2:
HTML

html

Because of the bootstrap layout, I used the class row and col-md-4 to seperate the sections.

All the items you want css3 fancy effects should have the attributes setting.

Then doing a little style for good looking in the head.

css

Step3:
JS

js

There are a lot options for smoonv.

Options

Name	Type	Default	Description
offset	integer or string	150	Distance to the bottom of the screen before object glides into view e.g. 10%.
opacity	integer (0-100)	0	The opacity of the object before it comes into view.
perspective	integer	1000	3D perspective in pixels.
transformOrigin	string	50% 50%	Origin of the transform in pixel, percentage or keyword (left, right, top or bottom).
skewY	angle	none	2D skew along Y-axis e.g. 90deg.
move	string	none	2D move along the X- and the Y-axis e.g. 100px,50%.
move3d	string	none	3D move along the X-, Y- and the Z-axis e.g. 10px,10px,10px.
moveX	string	none	Move the object along its X axis e.g. 10px or 10%.
moveY	string	none	Move the object along its Y axis e.g. 10px or 10%.
moveZ	string	none	Move the object along its Z axis e.g. 10px or 10%.
rotate	string	none	2D rotation e.g. 90deg.
rotate3d	string	none	3D rotation along X-, Y- and Z-axis e.g. 1,1,1,90deg.
rotateX	string	none	3D rotation along X-axis e.g. 90deg.
rotateY	string	none	3D rotation along Y-axis e.g. 90deg.
rotateZ	string	none	3D rotation along Z-axis e.g. 90deg.
scale	decimal or string	none	2D scale on X- and Y-axis (x,y) (e.g. 2.5 or 2,0.5).
scale3d	string	none	3D scale on X-, Y- and Z-axis (x,y,z) (e.g. 2,3,0.5).
scaleX	decimal	none	2D scale on X-axis.
scaleY	decimal	none	2D scale on Y-axis.
skew	angle	none	2D skew along X- and the Y-axis (e.g. 90deg,90deg).
skewX	angle	none	2D skew along X-axis e.g. 90deg.
skewY	angle	none	2D skew along Y-axis e.g. 90deg.