Skip to content

abemedia/jquery-smoove

Repository files navigation

jQuery Smoove - Gorgeous CSS3 Scroll Effects

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

CDNJS Build Status Dependency Status

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.10/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.

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.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.10/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
min_width integer 768 Disable smoove on screens with less pixel width.
min_height integer none Disable smoove on screens with less pixel height.
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 - 2017 Adam Bouqdib - http://abemedia.co.uk