3D jQuery Tilted Page Scroll plugin

Home Image Effects 3D jQuery Tilted Page Scroll plugin

3D jQuery Tilted Page Scroll plugin

6 years ago Views

18088

4324

peachananr

This is a beautilful 3D tilted scrolling effect for your website with jQuery Tilted Page Scroll.

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.js andtiltedpage_scroll.css into your document's <head>. Now lay out your HTML markup as follows:

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

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:

 $(".main").tiltedpage_scroll({
    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.
  });

Tag: image gallery