3D Tilted Page Scroll Animation

byCodingFlicks -October 16, 2020

0

This blog will share a snippet based on creating a simple 3D Tilted Page Scroll Animation using HTML CSS and a simple jquery plugin called tiltedpage_scroll plugin. You have to take the CSS and js file from there and add them to your project. You also need to add the latest jquery for this project; otherwise, the plugin won't work. Previously I have shared some jquery plugins related snippet. Check those projects out if you want.

We usually see many page scrolling animation nowadays. Using this jquery plugin, we can also create this kind of page scrolling animation. We can create a lovely 3d titled scrolling effect with this jquery plugin while scrolling down the page. I used simple text for each section, but you can fill the areas with other contents.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D Tilted Page Scroll Animation</title>
    <link rel="stylesheet" href="tiltedpage-scroll.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="wrapper">
        <section class="box1">
            <h1>Homepage</h1>
        </section>
        <section class="box2">
            <h1>About</h1>
        </section>
        <section class="box3">
            <h1>Portfolio</h1>
        </section> 
        <section class="box4">
            <h1>Services</h1>
        </section>
        <section class="box5">
            <h1>Contact</h1>
        </section>
        
        <h2>Footer</h2>                
    </div>
    
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <script src="jquery.tiltedpage-scroll.js"></script>
    <script>
        $(document).ready(function(){
            $(".wrapper").tiltedpage_scroll({
            sectionContainer: "> section",
            angle: 20
            
            });
         });    
    </script>
</body>
</html>

CSS

html{
    height: 100%;
}
body{
    background: #ddd;
    padding: 0;
    text-align: center;
    position: relative;
    margin: 0;
    height: 100%;
    font-family: poppins;
}
.wrapper{
    overflow: hidden;
    float: left;
    width: 100%;
    margin: 0 auto 350px;
}
.tps-section{
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto;
    height: 100vh;
}
.wrapper h1{
    font-size: 100px;
    box-sizing: border-box;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
    padding: 20%;
    color: #fff;
    font-weight: 900;
    text-shadow: 0 4px 10px #000;
}
.box1 .tps-wrapper{
    background-color: darkkhaki;
    height: 100vh;
}
.box2 .tps-wrapper{
    background-color: darkcyan;
    height: 100vh;
}
.box3 .tps-wrapper{
    background-color: darkorchid;
    height: 100vh;
}
.box4 .tps-wrapper{
    background-color: darksalmon;
    height: 100vh;
}
.box5 .tps-wrapper{
    background-color: dimgrey;
    height: 100vh;
}
.wrapper h2{
    font-size: 100px;
    margin: 0;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 5px 10px #000;
}

Thanks for visiting the blog. Please follow our social media profiles to stay connected.

Please do not enter any spam link in the comment box.