jquery-smoove

    0.2.11 • Public • Published

    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

    Install

    npm i jquery-smoove

    DownloadsWeekly Downloads

    3

    Version

    0.2.11

    License

    GPL-2.0

    Last publish

    Collaborators

    • abemedia