Home > Features > Dev Depot: Create a 3D tilted scroll effect with this jQuery plugin • Bookmark   • Newsletters   • Register Search Options

FEATURE

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

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

August 14, 2014
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
  39.66%
Yes, but in a few years
  36.87%
No
  23.46%
Out of 179 votes. Results based on votes submitted by members of XBIZ.net social network.

" 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. "

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.

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.


BUSINESS ANALYSIS

Adult Distributors Reveal Strategies for Success in 2017

It’s time for a look at the future: distributors are gearing up for the New Year with predictions for new product categories, the new “Fifty Shades” film release, and both vendor and... More »

Visa Cracks Down on ‘Shell’ Billing Firms

There was a time not so long ago when website operators created billing companies in favorable jurisdictions, whose sole purpose was to bill customers for services provided by the operator and remit the... More »

Retailers Forecast Consumer Trends for 2017

With the New Year barreling down upon us, retailers already are anticipating product categories to grow, and what both vendors and consumers can expect in the coming year. Promotions for 2017 and the release... More »
XBIZ NEWSLETTERS
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.






POPULAR PRODUCTS & SERVICES
Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Access the latest issues of the industry's leading trade publications in digital form. View online or download for offline viewing.

UPCOMING EVENTS

Everything To Do With Sex Show

Jan 27 - Jan 29
Halifax, Nova Scotia

The European Summit

Mar 04 - Mar 07
Barcelona-Sitges, Spain

The TEA Show

Mar 05 - Mar 06
Hollywood, CA

Phoenix Forum 2017

Mar 23 - Mar 26
Tempe, Arizona
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!