Web development has surely evolved over the years — Flash has fallen out of flavor and been replaced by techniques that take advantage of native web browser capabilities using tools like CSS and jQuery. That progression has paved the way for the creation of some pretty neat things, including a new tool from web developer John Polacek called Scrollorama. This jQuery plugin will take just about any HTML element (pictures, video, text) within a webpage and animate it in conjunction with scrolling. Animations include fading in, flying in, rotating and zooming, to name a few. If you'd like to tinker with a demo to see what we mean, hit the source link below and simply scroll down. And if you're a developer, feel free to download the plugin (also at the source link) and start creating slick animations right now.
Animate webpage elements with Scrollorama jQuery plugin
There are 30 Comments. Add yours.
I’m being pedantic here, but in "This jQuery plugin will take just about any CSS element ", it should be HTML element
Posted on Jan 04, 2012 | 12:58 AM EST reply Recommend (2) Flag actions
You’re right, fixed!e
Posted on Jan 04, 2012 | 4:41 AM EST reply Recommend Flag actions
And that’s what happens when there’s no edit button… hides in shame :)
Posted on Jan 04, 2012 | 4:41 AM EST reply Recommend (6) Flag actions
Reminds me a bit of.
http://eee.asus.com/eeepad/transformer-prime/features/
Regardless, does it make anyone else’s computer lag like nuts? Core i7 on Chrome here, and it’s quite jittery when many things start happening at once.
Posted on Jan 04, 2012 | 12:58 AM EST reply Recommend (1) Flag actions
The transitions aren’t smooth for me, as each frame updates for every discrete step I scroll down (I don’t know what my settings on the matter are). It is a neat effect, but I should really tweak my scrolling settings to make everything look nicer.
Posted on Jan 04, 2012 | 1:04 AM EST reply Recommend Flag actions
it depends on if i use the cursor to scroll or use a mouse, its really smooth with a smooth scroll and i’m on an old core 2 duo and IE9
Posted on Jan 04, 2012 | 1:59 AM EST reply Recommend Flag actions
I have a i7 with 8gb of ram, several (around 30ish) chrome tabs open, several skype chat windows open, a xterminal running tmuxa, and sublime text 2. It doesn’t slow anything down on my system. It only jitters because of the way the code responds to your scroll. If I use my scroll wheel on my mouse it’ll jitter. If I use the scroll section on my trackpad it’s fairly smooth.
Posted on Jan 04, 2012 | 4:47 AM EST reply Recommend Flag actions
For me, it’s the rotating and zooming. That lags like all get out.
I have an i7 with 12 gigs of ram and 40tabs open with Outlook and Skype running in the background.
Once I get past the spin, rotate, and zoom parts, it gets a lot smoother.
Posted on Jan 04, 2012 | 8:42 AM EST reply Recommend Flag actions
Its pretty and interesting no doubt, but I would never use it. It’s a little too ‘flashy’, very distracting, and could be a problem in mobile browsers.
Posted on Jan 04, 2012 | 1:02 AM EST reply Recommend Flag actions
What people seem to always forget is that jQuery is NOT native to any browser.
It’s ok for very simple stuff, but anything a bit more demanding, and even your super gaming computer will lag.
Yeah, Flash is really bad… bloody idiots.
Posted on Jan 04, 2012 | 1:06 AM EST reply Recommend (1) Flag actions
jQuery is nothing more than a Javascript library, and Javascript is native to browsers.
Posted on Jan 04, 2012 | 1:06 AM EST reply Recommend (1) Flag actions
I stand corrected, and I wish there was an edit button here.
Anyway, it is still at least decade behind what Flash is capable of doing, without lagging and with a much lower bandwidth usage.
Posted on Jan 04, 2012 | 1:10 AM EST reply Recommend (1) Flag actions
And here is where we run into the problem of “Kill Flash now!”
When people suddenly realize that the alternatives are either A) Not ratified and thus spottily covered. or B) CPU intensive and even laggier than the previous solution.
Did we need to move away from Flash? Maybe, but not in the fervent way we are currently. Flash still has an extremely useful place in web development.
Posted on Jan 04, 2012 | 1:20 AM EST reply Recommend (3) Flag actions
Exactly my point, thank you.
Do Apple fans really ever thought about the reasons why Flash was and will never be allowed in iOS devices?
They say: Plugins bad! HTML5 good!
But then you go to their website and you need the QuickTime plugin… give me a break.
What about all their efforts to try and stall HTML5 standards ratification?
Trying to get patents for some parts of HTML5. Really douchebag like moves.
But the RDF is still strong even after the “RDF generator” is gone
Posted on Jan 04, 2012 | 4:32 AM EST reply Recommend (2) Flag actions
I would have to disagree. Anything you can do in flash, you can do in HTML/CSS/Javascript. I think it is the right direction. The only downside at the moment is mobile browsers. They aren’t quite on par with desktop browsers. Though, flash isn’t the solution here either. I think there should be some significant effort in upping the mobile browsers to be on par with desktop browsing specs/functionality
Posted on Jan 04, 2012 | 4:53 AM EST reply Recommend Flag actions
False. HTML5 cannot to adaptive bitrate video streaming, which is awesome and important. Mostly I prefer HTML5, but there are a few things that it just doesn’t do well. Yet. And test for every browser is a freakin nightmare.
Posted on Jan 04, 2012 | 3:48 PM EST reply Recommend (2) Flag actions
My question would be what’s the best authoring tool for graphics developers to work with CSS and HTML5?
People conflate Flash the plugin and Flash the developer tool. Actionscript is a pretty powerful tool for those that aren’t programmers. I want to see who steps up with a great GUI tool for artists.
Posted on Jan 04, 2012 | 4:52 PM EST reply Recommend (1) Flag actions
I’m sorry, but no.
HTML/CSS/Javascript is not capable of doing stuff that flash was already capable almost 10 years ago.
Even the things it can do, it is a lot more complicated to put together and it is sluggish.
Posted on Jan 04, 2012 | 4:53 PM EST reply Recommend Flag actions
Just what we need, more damned javascript calls to more libraries and place.s.
There already to damned many of them.
For example, the page we are now on contains scripting for at least 8 different items having nothing to do with the actual textual content of the site. and at least 3 other ones which do.
Gaah!
Posted on Jan 04, 2012 | 1:14 AM EST reply Recommend Flag actions
I’m not sure I agree with that, from looking at the JS calls, they all seem totally relevant to either A. The content served on the site / functionality of notifications widgets for twitter, fb etc… and for the commenting system.
And B. for their analytics stuff and things for ad’s etc coming from sbnation or whatever it is…
Also most scripts are loading in under 1 second, with a couple taking a bit more.
Posted on Jan 04, 2012 | 9:54 AM EST reply Recommend Flag actions
I have to say… I like the idea of The Verge reporting on scripting and programming languages/libs. MOOOOOORRRREEEE PLZ!
Posted on Jan 04, 2012 | 4:48 AM EST reply Recommend (5) Flag actions
Agreed. Whilst this article is not pretending that The Verge is stuffed full of developers, it calls out some cool technology and provides a link. Perfectly done. Love it, love it, love it!
Disclaimer: I am a developer by trade, so my interest in this may not be normal.
Posted on Jan 04, 2012 | 5:10 AM EST reply Recommend (1) Flag actions
Thanks ;)
Posted on Jan 04, 2012 | 10:52 AM EST reply Recommend Flag actions
I agree, I was pleasantly surprised to see such a story on The Verge.
Posted on Jan 04, 2012 | 7:34 AM EST reply Recommend Flag actions
The surprises won’t end!
Posted on Jan 04, 2012 | 10:52 AM EST reply Recommend Flag actions
Awesome!
Posted on Jan 04, 2012 | 10:51 AM EST reply Recommend Flag actions
I just checked out his site with my iPad 2 and found it completely unimpressive. There was just a lot of text that mostly sat there. I’m not sure what he’s trying to do, but it needs work.
Posted on Jan 04, 2012 | 9:22 AM EST reply Recommend Flag actions
That’s because the ipad 2’s rendering of javascript sucks. We developed a prototype site with a 3d interface purely made out of CSS / HTML / JS where i work (just for fun mind, not for a client) and on the iPad it sucked, however on my GS2 it was buttery smooth.
Posted on Jan 04, 2012 | 9:43 AM EST reply Recommend Flag actions
Just to clarify that’s a Galaxy S 2
Posted on Jan 04, 2012 | 9:44 AM EST reply Recommend Flag actions
Sorry, but I believe the expression is "Fallen out of favor
Posted on Jan 04, 2012 | 1:53 PM EST reply Recommend Flag actions
Something to say? Choose one of these options to log in.