material scroll animation

How we can create a material type scrolling animation using HTML CSS JS? Solution: See this Material Scroll Animation With CSS and JavaScript, Scrolling Down Button.

Previously I have shared some scroll related programs, but this is a material design scrolling animation. Basically, material design is a grid-based layout with shadow combination and animation. It is introduced by Google, and nowadays you will see this type of design on every google product. Also nowadays an arrow down button for the scroll is very popular, and this program is a combination of these two things scroll and material design.

Today you will learn to create Scrolling Down Button Animation. Basically, there is a header section with a title text and a circular button with an arrow down icon. The arrow button placed half over the header and half over the container. And there are dummy heading and dummy texts in the program. When you will click on the arrow down button, then the header’s heigh will reduce and the container elements will shift upside with scrolling. And the arrow down icon will change to an arrow up icon, it for scroll down or normalize again.

So, Today I am sharing Material Scroll Animation With CSS and JavaScript. There I have used HTML to create the layout, CSS for styling, and JavaScript for functioning. This program has a cool design and smooth animation, and it is ready to use. You can use this program on your website after modification.

If you are thinking now how this Scrolling Down Button animation actually is, then see the preview given below.

Preview Of Scrolling Down and Up Animation

See this video preview to getting an idea of how this scroll effect looks like.

Live Demo

Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

You May Also Like:

Material Scroll Animation Source Code

Before sharing source code, let’s talk about it. First I have created the main container div and placed two text sections, one for scroll down and one for scroll up. After that, I have created a header section and placed the title and a button inside it. Also in the HTML file, I have linked other files like CSS and JavaScript.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS first I gave basic values like size, margin, padding, position, etc to all the elements. There I have linked an external SVG icon to create the arrow down and arrow up icon. I have used CSS transform command to create transformation and transition command for animation.

JavaScript handling here the toggle function in this program. It fetched the elements using document.querySelector command and stored in variables. Now JS detecting the click using .addEventListener command and activating the toggle class. Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program you have to create 3 files. First file for HTML, second for CSS, and third file for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given below.

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created Material Scroll Animation With CSS and JavaScript, Scrolling Down Button Program. If you have any doubt or ques tion comment down below.

Thanks For Visiting, Keep Visiting.

LEAVE A REPLY

Please enter your comment!
Please enter your name here