jQuery Smoove - Gorgeous CSS3 Scroll Effects

Smoove makes it easy to implement awesome CSS3 transition effects, making your content smoothly glide into the page as your scroll down the page.

Setup

Load from CDN

The easiest way to get up and running is to load jQuery Smoove from cdnjs. Make sure jQuery is loaded first though.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.6/jquery.smoove.min.js"></script>

Install with Bower

Use the following command to install jQuery Smoove using bower.

$ bower install jquery-smoove

Or simply add jquery-smoove to your project's bower.json.

  "dependencies": {
    "jquery-smoove": "latest"
  }

Download

You can also just download the latest package.

• Download latest version
• or curl -O https://raw.github.com/abeMedia/jquery-smoove/master/dist/jquery.smoove.js

Usage

jQuery Smoove needs to be activated via JavaScript.

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

This will initiate jQuery Smoove on the .foo elements with the default settings. Options can however be overridden on individual objects via data-attributes as outlined in the following example.

<div class="foo"></div>
<div class="bar" data-move-x="-200px" data></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.6/jquery.smoove.min.js"></script>
<script>
  // Attach Smoove to elements and set default options
  $(".foo, .bar").smoove({
    offset  : '15%',
    // moveX is overridden to -200px for ".bar" object
    moveX   : '100px',
    moveY   : '100px',
  });
</script>

Also note that when defining parameters via data-attributes, CamelCase names are split with hyphens e.g. moveX becomes data-move-x.

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.

Demo

Visit ABE Media Web Design and scroll down the page to see the plugin in action.

Copyright

© 2014 Adam Bouqdib - http://abemedia.co.uk