Dev Depot: Create a 3D tilted scroll effect with this jQuery plugin

Stephen Yagielowicz

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.

Related:  

More Articles

profile

Q&A: Yanks.com Flourishes With Commander Todd Spaits

Alejandro Freixes ·
opinion

After a Long Summer, It Is Back to Work

Mitch Platt ·
opinion

The Adult Industry Can No Longer Be an Island

Eric Paul Leue ·
opinion

Is Stale Blog Content Hurting Your SEO?

Adrian DeGus ·
opinion

Digital Advertising Really Isn’t Advertising

Juicy Jay ·
opinion

Will Your Business Need a Data Protection Officer?

Chad Anderson ·
profile

WIA Profile: Maxine Lynn

Women In Adult ·
profile

Q&A: ExoClick CEO Benjamin Fonzé on Ad Network Conquest

Alejandro Freixes ·
opinion

It’s Time for FSC to Set the Terms of Debates

Eric Paul Leue ·
educational

A Legal Primer to Help Develop Explicit Brands Previously Off Limits

Lawrence G. Walters ·
Show More