Web Dev

Unique scrolling website. jQuery Plugins and techniques.

2012-05-13

The top trends of web design are managing content in a completely different way as we always used it. No more common breadcrumbs, left side or top side menus with navigation links. Now we get more fancy way of representing our portfolio, photo galleries or promotion pages. More and more websites uses parallax effect and sliding/scrolling content with object animation, putting data visualization to the next level.

You can ask how they do all these fancy stuff? A pinch of modern technologies like HTML5 and CSS3, powered with jQuery, will make any unflavored sites totally fresh.

Here you will find a list of tutorials and also a list of jQuery plugins for creating a scrolling presentational website. Enjoy!

Acsensor.js

Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system, where pages are navigated by clicking on customizable navigation are or by using previous/next buttons. These full screen scrollable pages area ideal for portfolio or brand sites.

Features:

Make every div child a stage of the site
Add in every div a link for the next div (true/false)
Create a visual navigation (true/false)
Deactivate the arrow key (true/false)
Adapt and scroll to the active content)
Create friendly Code.
URL logical support

View Demo Acsensor.js
Download Acsensor.js

Scrollorama

Good plugin to do all sorts of stuff, like objects flying, rotating and fading; parallax effect and ability to pin content etc.

Features:

Transitions (Any numeric CSS property): Fade In, Fly In, Rotate In, Zoom In
Pin content and unpin it
Parallax
Easing

View Demo Scrollorama
Download Scrollorama

Curtain.js

This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect. Exactly like a curtain rises.

To navigate, you can use your keyboard instead the scrollbar or your mouse wheel to navigate into the document. But that's not all, there is more features! For example, you can easily add a fixed element or multiple "steps" element into a panel.

Features

"next" and "prev" link
link to a specific panel
Dynamically create new panel

Compatibility

Safari
Firefox
Chrome
IE7/IE8/IE9
iOs (iPhone/iPad) but the curtain effect is disabled
Android (Chrome/Opera) but the curtain effect is disabled

View Demo Curtain.js
Download Curtain.js

Impress.js

Impress.JS is a free JavaScript library that skilled web developers can use to create presentations that run in a browser and look nothing like PowerPoint. Instead of moving through slides, you fly over a large map of concepts, zooming and shifting between them. It’s a presentation tool based on the power of CSS3 transforms and transitions in modern browsers.

Compatibility
Currently impress.js works fine in latest Chrome/Chromium browser, Safari 5.1 and Firefox 10. With addition of some HTML5 polyfills (see below for details) it should work in Internet Explorer 10 (currently available as Developers Preview). It doesn't work in Opera, as it doesn't support CSS 3D transforms.

As a presentation tool it was not developed with mobile browsers in mind, but some tablets are good enough to run it, so it should work quite well on iPad (iOS 5, or iOS 4 with HTML5 polyfills) and Blackberry Playbook.

Additionally for the animations to run smoothly it's required to have hardware acceleration support in your browser. This depends on the browser, your operating system and even kind of graphic hardware you have in your machine.

For browsers not supporting CSS3 3D transforms impress.js adds impress-not-supported class on #impress element, so fallback styles can be applied to make all the content accessible.

View Demo Impress.js
Download Impress.js

jmpress.js

A jQuery plugin to build a website on the infinite canvas.
Started as a jQuery port of impress.js and utilizes the power of CSS3 transforms and transitions in modern browsers.