JQuery. smoove-jQuery and CSS3 cool scrolling page content element animation special effect plug-in, jquerycss3

JQuery. smoove-jQuery and CSS3 cool scrolling page content element animation special effect plug-in, jquerycss3
Plugin introduction:

JQuery-smoove is a jQuery and CSS 3 cool scrolling page content element animation special effect plug-in. When the content element animation plug-in scrolls to a specified position on the page, the HTML element of this position executes the specified CSS3 animation effects, such as rotation, flip, zoom in, and zoom in. The Smoove page Rolling Element animation special effect plug-in can easily produce a variety of gorgeous CSS 3 animation effects.

 

Basic usage

$('.smoove').smoove(options);

The above Code uses the default parameter to initialize jQuery smoove on the element whose class is Smoove.

You can usedata-attributesProperty to overwrite the default parameters of the plug-in, for example, the following example:

<Div class = "foo"> </div> <div class = "bar" data-move-x = "-200px" data> </div> <script src "/ jquery/jquery. min. js "> </script> <script src ="/libs/jquery. smoove. min. js "> </script> <script> // overwrite the default parameter $ (". foo ,. bar "). smoove ({offset: '000000', // moveX is overwrite ". -200px of bar"
MoveX: '100px ', moveY: '100px',}); </script>

Note: when using the data-attributes attribute, you must change the attribute's camping format to the character format, for example:moveXTo changedata-move-x

 

Optional parameters:

Name	Type	Default Value	Description
Offset	Integer or string	150	The distance before the object slides to the bottom of the screen, for example, 10%.
Opacity	Integer (0-100)	0	Transparency before the object slides into the screen.
Perspective	Integer	1000	The object's 3D perspective, in pixels.
TransformOrigin	String	50% 50%	ObjecttransformOfOrigin, Unit pixel, percentage, or default keyword (left, right, top or bottom)
SkewY	Angle	None	The 2D slope along the Y axis.
Move	String	None	The distance between the X axis and the Y axis 2D, for example:100px,50%.
Move3d	String	None	3D Movement distance along the X axis, Y axis, and Z axis, for example:10px,10px,10px.
MoveX	String	None	Move objects along the X axis, for example:10px or 10%
MoveY	String	None	Move objects along the Y axis, for example:10px or 10%
MoveZ	String	None	Move objects along the Z axis, for example:10px or 10%
Rotate	String	None	2D rotation, for example:90deg
Rotate3d	String	None	3D Rotation along the X, Y, and Z axes, for example:1,1,1,90deg
RotateX	String	None	3D Rotation along the X axis, for example:90deg
RotateY	String	None	3D Rotation along the Y axis, for example:90deg
RotateZ	String	None	3D Rotation along the Z axis, for example:90deg
Scale	Decimal or string	None	2D Scaling (x, y) on the x and y axes, for example2.5Or2,0.5
Scale3d	String	None	3D Scaling (x, y, z) along the x, y, and z axes, for example:2,3,0.5
ScaleX	Decimal	None	Zooming in the X axis direction.
ScaleY	Decimal	None	Y-axis scaling.
Skew	Angle	None	2D skew along the X and Y axes, for example:90deg,90deg
SkewX	Angle	None	2D skew along the X axis.
SkewY	Angle	None	2D skew along the Y axis.