How to add HTML5/CSS3 Transform Effects on Scroll

Hello learners and coders. Today I will tell you how to add CSS3 Transform Effects on Scroll. In this HTML/CSS tutorial, you will learn how to do scroll animation in HTML5 and CSS3. 

CSS3 Transform Effects on Scroll - Output

I hope you know how to add Effects on scroll with the help of HTML5, CSS3, and Javascript. In this, I will you to add animation in it. so let’s start the animation.

Add CSS3 Transform Effects on Scroll

Now to do animation on your website while scrolling. You have to first create a website, in which you can apply a scrolling effect in it. For this follow this step.

  1. Create a folder named CSS3 Transform Effects on Scroll
  2. Create two with the help of visual studio code editor – index.html and sytle.css
  3. Download one image from the internet in which you will apply HTML, CSS code for doing scroll animation.
  4. At last, Let’s code

Here are the images of the project. So that you can be clear how files are located.

CSS3 Transform Effects on Scroll

1. Index.html

in this, you have to create a file with the code editor like a visual studio and add the following code in it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="style.css" >
    <title>Page Scroll Effect</title>
</head>
<body>
    <section>
        <span class="skewed"></span>
    </section>
    <script type="text/javascript">
        var skewed = document.querySelector('.skewed');
        window.addEventListener('scroll', function(){
            var value = -10 + window.scrollY/60;
            skewed.style.transform = "skewY("+ value +"deg)"
        })
    </script>
</body>
</html>

Here you have to add some HTML tags like section, span, class. So that it gets properly linked with javascript and CSS.

CSS3 Transform Effects on Scroll - index html

2. Style.css

In this, we will do the styling of our website through cascading. In this we will use advance CSS properties like transform, transform-origin, translate.

You will have to add a background image through the background tag.

We will also add linear-gradient to add colors on image and obtain our final result like the show on video.

*
{
    margin: 0;
    padding: 0;
}
body{
    height: 200vh;
    background: #ffffff;
}
section{
    position: absolute;
    width: 100%;
    height: 100vh;
    background: url(bg.jpg), linear-gradient(230deg, #f533d4, #2461bb);
    background-blend-mode: luminosity;
    background-size: cover;
}
section .skewed {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    transform: skewY(-10deg);
    transform-origin: top left;
}
CSS3 Transform Effects on Scroll - style css

3. Javascript

You will also have to add some javascript in your HTML file. You can add javascript externally too.

In this, we will use the document.querySelector and addEventListener for animating our scrolling.

<script type="text/javascript">
        var skewed = document.querySelector('.skewed');
        window.addEventListener('scroll', function(){
            var value = -10 + window.scrollY/60;
            skewed.style.transform = "skewY("+ value +"deg)"
        })
    </script>
CSS3 Transform Effects on Scroll - index html

Thus above are the ways how to create a CSS3 Transform Effects on Scroll using HTML, CSS, and javascript.

Output:

Also:

HTML CSS Tutorial: Create Navigation Bar with Sub Menu

Divyanshu

A blog scientist by the mind and a passionate blogger by heart ❤️. Creator of BeFirstly, Life motto: Do until you die ! BeFirstly helps you to make your website rank better in search engines like Google and Bing. Follow us for more 🎉