Creating an eye-catching and simple layout is not easy because both features contradict each other. Having an eye catching design with advanced technology usually sacrifices the simplicity of the process. Today, I’ve decided to create a plugin that will let you retain the simplicity while adding a cool scrolling effect to your website. Let me introduce to you jQuery Tilted Page Scroll.
JQuery Tilted Page Scroll is a plugin that lets you turn your HTML markup into a 3D layout with tilted scrolling effect. The concept is similar to my plugin called One Page Scroll, but in this case, the scrolling is native and so the plugin will be compatible on most devices out of the box.
Note: This plugin has been tested on Chrome, Firefox, Safari, both on desktop and mobile. This has not been tested on IE.
[tut demo=”https://onextrapixel.com/examples/tilted-page-scroll/” download=”https://onextrapixel.com/examples/tilted-page-scroll/tilted-page-scroll.zip”]
Using Tilted Page Scroll
How does this work?
First things first, the plugin will have to detect when each element is in the viewport and to do this I had to bind a method to the scroll event so that it loops through each element and detects the location in real time. The calculation is done by using the $(window).scrollTop() to keep track of the scroll location and compare it with the top offset of each element. If the scrollTop value is more than the element’s top offset, it means that the element is now in the viewport and then I can add a class name to signify it.
Once that is done, it is time to calculate the opacity, scale and tilted angle that increases/decreases according to the user’s scroll position. This took me many hours through trial and error to find the perfect calculation but eventually I found a solution that works well with the concept of this plugin.
Basically, what the calculation does is use the scrollTop() value as a variable in the equation, together with the top offset, the height of the section, and the window’s height to determine the tilted degree, opacity and scale. I also have to define the floor value so that these values don’t go out of the valid range (for example, opacity should be between 0 and 1). Once all the numbers are ready, I simply apply it using CSS opacity and CSS3 transform for scale and tilted angle.
Now, the plugin will react to the scroll behaviour and transform the layout accordingly.
How-Tos
To use this plugin, you will need to include the latest jQuery library available here, jQuery.tiltedpage_scroll.js and tiltedpage_scroll.css which can be found here, in to your document’s <head>.
Now, prepare your HTML markup as shown below:
HTML:
<body>
..
<div class="main">
<section class="page1">
...
</section>
<section class="page2">
...
</section>
...
<section class="last-page">
...
</section>
</div>
..
</body>
The class name of each section isn’t mandatory but it will help you style each section with CSS easier. Each section will represent each page and any content inside it will be animated. Once that is done, call the function as follows:
JS:
$(".main").tiltedpage_scroll({
sectionContainer: "> section",
angle: 50,
opacity: true,
scale: true,
outAnimation: true
});
That’s it! The settings above will give you a default out-of-the-box configuration that will get you up and running in a few minutes. For those who are looking for a way to customize this plugin, don’t sweat. I’ve provide a few options for you to play around with:
- sectionContainer: In case you do not want to use section in your layout, you can define your custom tag here with CSS selector. For example, if you want all div containers that are one level lower than “main” container, then use “> div”. The default value is “> section”.
- angle: You can define how far the container will be tilted when it is appearing in the viewport here. If you want a more subtle effect, try decreasing the value to 10. The default value is 50.
- opacity: When the section is appearing inside the viewport the opacity will gradually increase as well. You can toggle this off by setting this option to false. The default value is true.
- scale: The scale of the section also increases gradually as you scroll. Toggle this to false if you want to disable this animation. The default value is true.
- outAnimation: This option will allow you to enable/disable the exit animation when the section is out of the viewport on the opposite side (section disappearing upward). Toggle this to false to only animate when the section enters. The default value is true.
[tut demo=”https://onextrapixel.com/examples/tilted-page-scroll/” download=”https://onextrapixel.com/examples/tilted-page-scroll/tilted-page-scroll.zip”]
Conclusion
That’s all the options for this plugin. You will now have a super simple, yet elegant layout for your website within minutes. I hope you will find this plugin useful somehow, and if you have any questions, suggestions or want to talk, feel free to ask me in the comments below.
