3D Tilted Scroll Effect with jQuery

Create a 3D Tilted Scroll Effect with jQuery Tilted Page Scroll Plugin

Yet another great plugin from Pete R. If you are keen on having a 3D Tilter Scroll Effect on your website, this is your plugin.  It really gives modern and not traditional look and it can be a nice way to show your portfolio. It very easy to be implemented.

3D Tilted Scroll Effect with jQuery

3D Tilted Scroll Effect with jQuery



Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. Not tested this on IE.

Basic Usage

With this plugin, you can create a beautiful scrolling effect and turn a simple layout website into something surprising.

To do this, first you have to include the latest jQuery library together with jquery.tiltedpage_scroll.jsand tiltedpage_scroll.css into your document’s <head>. Now lay out your HTML markup as follows:

<div class="main">
  <section class="page1">
  <section class="page2">
  <section class="last-page">

That’s it for the HTML part. Isn’t that easy? Now, you can just call the function like this, and watch the magic happens:

    sectionContainer: "> section",     // In case you don't want to use <section> tag, you can define your won CSS selector here
    angle: 50,                         // You can define the angle of the tilted section here. Change this to false if you want to disable the tilted effect. The default value is 50 degrees.
    opacity: true,                     // You can toggle the opacity effect with this option. The default value is true
    scale: true,                       // You can toggle the scaling effect here as well. The default value is true.
    outAnimation: true                 // In case you do not want the out animation, you can toggle this to false. The defaul value is true.

Now you will have another cool way to showcase your website to your viewers. I hope you find this free plugin useful.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

If you want to see more plugins, visit The Pete Design, or follow Pete on Twitter and Github.



You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *