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.
features
- custom animation
- embed this in a container Show Sample
- jquery ui themes
- Switch to normal view: Switch or press Esc
- nice plugin interface
- many config options
- tree-like hierarchies are possible
Compatibility
- Chrome/Chromium
- Safari
- Firefox
- IE
- Opera
- iPad
- Chrome for Android: YES in desktop mode
View Demo jmpress.js
Download jmpress.js
Presentations sometimes feel like the bane of the business community, but now you can show whatever you want in a right way and without pain