As the capabilities of today’s digital display devices, mobile and otherwise, continue to evolve, many web designers are seeking to keep pace by introducing new processes, as well as a healthy dose of eye-candy, in order to stay ahead of their many competitors, via offering web weary viewers something new.
While excesses in design are never a good thing, such as the overuse of Flash based graphics and other bandwidth heavy content on some websites, occasionally something very different is needed.
The 3D Tilted Page Scroll jQuery plugin offers a unique approach to presenting visually rich graphical displays, wherein individual screens slide in from top or bottom, controllable via a mouse scroll or other gesture, with a catchy “tilted” 3D effect.
Fortunately, a variety of easily accessible technologies, such as jQuery, allow developers to pursue plugins and custom code to create attractive presentations, such as the following 3D perspective scroll.
Created by Pete R., the founder of diverse web based projects such as Travelistly and BucketListly, the 3D Tilted Page Scroll jQuery plugin (www.thepetedesign.com/demos/tiltedpage_scroll_demo.html) offers a unique approach to presenting visually rich graphical displays, wherein individual screens slide in from top or bottom, controllable via a mouse scroll or other gesture, with a catchy “tilted” 3D effect, which visually skews the appearance of the web pages being scrolled through — so that they soar into and out of view.
Compatible with a wide range of modern browsers on both desktop and mobile platforms, 3D Tilted Page Scroll allows coders to “create a beautiful scrolling effect [that turns] a simple layout website into something surprising.” Although not fully tested on Internet Explorer, the plugin works well with other web browsers such as Chrome, Firefox, and Safari.
Implementation is easy and akin to using any other plugin, where the first step is to include a call to the latest jQuery library, along with one for the jquery.tiltedpage_scroll.js and tiltedpage_scroll.css files into a web page’s <head> element.
Laying out the required HTML markup is straightforward, for example, a container DIV encapsulates multiple section elements, each of which represents a single page:
<div class=”main”>
<section class=”page1”> ... </section>
<section class=”page2”> ... </section>
<section class=”page3”> ... </section>
</div>
Once the HTML is in place, simply call the Tilted Page Scroll function and watch the magic happen:
$(“.main”).tiltedpage_scroll({ ... options ... });
A variety of setup options are available, including “sectionContainer,” for those who are not yet ready to make the move to HTML 5 and who want to define a custom CSS selector to use, such as a DIV (this is useful when targeting browsers that may not fully support HTML 5, such as older versions of the Internet Explorer browser).
Altogether this free plugin is a useful way to showcase your website and its content to your viewers.
If you like this type of effect and the forward-looking design philosophy that it represents, then you may enjoy some of the 3D Tilted Page Scroll author’s other plugins (www.thepetedesign.com/#plugins), including interactive 3D objects and backgrounds, along with immersive sliders and unique navigational metaphors such as a wheel menu that harkens back to the days of old rotary dial telephones.