Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin

Overview

#Tilted Page Scroll by Pete R. Create a beautilful 3D tilted scrolling effect for your website with jQuery Tilted Page Scroll. Created by Pete R., Founder of Travelistly and BucketListly

Demo

View demo

Compatibility

Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. I have 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.js and tiltedpage_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.
  });

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

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

Other Resources

  • Tutorial (Coming Soon)
You might also like...

A beautiful 3D Earth 🌏

A beautiful 3D Earth 🌏

Language: English | 中文简体 3D Earth is a beautiful component of earth flying line based on threejs look: Install npm install 3d-earth or yarn add 3d

Dec 30, 2022

A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti

Jan 1, 2023

Add a water ripple effect to your background using WebGL.

jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug

Dec 30, 2022

Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr

Nov 29, 2022

Switch the background-image with using effect.

jQuery.BgSwitcher Switch the background image with using effect. Demo http://rewish.github.io/jquery-bgswitcher/ Usage div class="box" pLorem ip

Dec 30, 2022

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Dec 6, 2022

A motion hover effect for a background grid of images.

A motion hover effect for a background grid of images.

Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install

Dec 31, 2022

fixed-background-effect

Fixed Background Effect A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect. Article

Oct 28, 2022

A mouse particle effect react component

A mouse particle effect react component

react-mouse-particles A mouse particle effect react component A very fun react library that can be used to create mouse particle effects, which are as

Dec 17, 2022
Comments
  • fix for when using responsive boxes

    fix for when using responsive boxes

    If using the padding bottom technique to create square tiles, the plugin doesn't work because parent().height will return the height without the padding.

    opened by willyboy 0
A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

Codrops 571 Nov 21, 2022
Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac

Niklas 51 Nov 15, 2022
A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Codrops 351 Dec 26, 2022
Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

Rohail 8 May 6, 2022
Simple jQuery plugin for 3d Hover effect

jQuery Hover3d jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015

Rian Ariona 333 Jan 4, 2023
A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

jQuery GRIDDER 1.4.2 ======= A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images. We have all

Orion Gunning 455 Nov 6, 2022
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

Thumbnail Grid with Expanding Preview A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Googl

Codrops 353 Jan 4, 2023
A simple yet powerful native javascript plugin for a cool typewriter effect.

TypewriterJS v2 NPM Repository JSFiddle Example Emoji Example CDN You can use the CDN version of this plugin for fast and easy setup. <script src="htt

Tameem Safi 1.8k Jan 4, 2023
A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti

Akihiro Oyamada 68 Nov 28, 2022