This is my first ever public JavaScript “library” and also my first GitHub!
SlideIns.js is just simple jQuery code that allows you to have content on a page “slide in” from left, right, or middle (middle just fades in basically). This concept was taken from Apple.com pages, where they recently started having little subtle animations featured on their pages – for example as you scroll down an iPad or iPhone might slide in from the right of the screen. The main feature is that the animations occur as you scroll down and reveal the content further down on a page. (So obviously lower content that would animate offscreen waits until its visible on the users screen once they scroll down to it.)
We are using this new feature on our updated website at work that we are launching in the next few months, so I figured I’d wrap up the code and push it up here. Its by no means perfect, and could probably use a little more debugging, but I’ll continue to maintain the GitHub repo to keep it up to date.
Heres the GitHub: https://github.com/jkat98/SlideIns
Heres a sample page: http://jasonkrol.com/upload/misc/slideins_sample/sample.html
Its basically as simple as including the slideins.js file (or slideins.min.js), making sure you have jQuery included, and some minor classes to your html:
[sourcecode language=”javascript”]
$().ready(function(){
SlideIns(450,’easeOutQuint’);
});
[/sourcecode]
[sourcecode language=”html”]
[/sourcecode]
Note: You can include as many “slidein_row”s as you want. Currently the way I have it designed, the animations wait until the previous row is complete. So if you had 100 rows, and you paged down really fast, you would sit there and watch each row animate in one after the other – like a queue. Without the queue, the animation really started to suffer and very strange things would occur.
Enjoy! Please feel free to share any feedback as I would always appreciate any and all constructive criticism and/or kudos!