Want gorgeous scroll animations on your website? So did we! The only problem is that most JavaScript plugins we came across for doing so were total overkill and felt a bit like lighting a candle with a flame-thrower. With so many awesome effects possible with CSS3 these days, we felt it was time for a new, simpler way to spice up scrolling on your website, without all the clutter that tends to come with it, so we got to work…
Introducing jQuery Smoove
Smoove is a super simple jQuery plugin for creating awesome CSS animations as you scroll down the page, making your content smoothly glide into view. It supports a number of different slick effects & 3D animations and only takes a single line of code to run.
Lightweight
The plugin weighs in at only 3.3KB (minified) and doesn’t require any CSS files to work.
Responsive
Smoove was built with responsive web design in mind and automatically adapts to any changes to the viewport.
Free & Open Source
Yep that’s right, it doesn’t cost a penny and is licensed under GNU GPLv2. Feel free to fork it on GitHub.
Usage
Using jQuery Smoove is as simple as including the JavaScript file in your project and adding one single line of code to run it. What makes it even better is that it’s hosted on CloudFlare’s super-fast CDN, so you don’t even have to download it!
The following example shows how easy it is to create a similar effect as we have right here on ABE Media, making objects glide in from the bottom.
Loading JavaScript files
Load jQuery & jQuery Smoove from CloudFlare’s CDN.
<!-- Always include jQuery before loading any plugins -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Load jQuery Smoove from cdnjs -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.6/jquery.smoove.min.js"></script>Initiate jQuery Smoove
Initiate Smoove for all objects with the class .foo, setting the moveY parameter to make them smoothly move up their Y-axis. See the documentation for a full list of possible parameters.
$(".foo").smoove({moveY : '100px'});Using HTML5 data-attributes
Alternatively you can also set the options using data-attributes. Doing so will override any parameters set in the JavaScript.
Note: When defining options via data-attributes, CamelCase names are split with hyphens e.g. moveY becomes data-move-y.
<div class="foo" data-move-y="100px"></div>Demo
To see jQuery Smoove in action just visit our front page and scroll up & down the page.
Get Started
Enough of the talking - time for some action! Check the following links to get started.
If you have any questions or feedback feel free to give us a shout or use the comments section below.
Stay awesome!
Posted in Announcements