Scroll Animation | JavaScript

Learn How to Make a Scroll Animation using CSS and JavaScript, step-by-step from scratch.
As you will notice in this tutorial: one block comes from the right and another one from the left!
______________________________________________________________
🌱💜Support our channel from as little as $1-3 by becoming a Patreon because by doing that, you will help our Channel and also you will have access to 🖥️ Source Code of our videos!
➤ bit.ly/3sthx5B
______________________________________________________________
📚Resources:
➤ bit.ly/3cp2S5W
______________________________________________________________
🏆Recommended Videos🏆
🎬Login & Registration Form Using HTML & CSS & JS✨
➤ • Login & Registration F...
🎬Neumorphism Login Form | HTML & CSS✨
➤ • 🎬Neumorphism Login For...
🎬CSS Text Typing Animation | HTML & CSS✨
➤ • CSS Text Typing Animat...
🎬Countdown Timer | JavaScript✨
➤ • Countdown Timer | Java...
🎬Counter up animation | Javascript✨
➤ • Counter up animation |...
______________________________________________________________
🛴 Follow me on:
👉Facebook: bit.ly/3cp2S5W
👉Instagram (New): bit.ly/3ura3TW
______________________________________________________________
🎵Background Music:
bensound.com
Music from Uppbeat (free for Creators!):
uppbeat.io/t/p...
License code: NFAQUM8GKWGRDYEW
uppbeat.io/t/m...
License code: IKUEPIOQUZARCFM1
uppbeat.io/t/a...
License code: HJALZSI8T5LRSEXA
uppbeat.io/t/m...
License code: EBHHXJNDPBVA6NNT
uppbeat.io/t/y...
License code: WKLFXOKY34UXHON4

[@DevMadeEasy]

If you find this video helpful, give it a like👍🏻 as this would help it reach even more people! Also, subscribe if you haven't ! Thank you! 🙏 🌟 Source Code: Dive into ScrollAnimationJS! 🚀 Get it now: devmadeeasy.gumroad.com/l/ScrollAnimationJS 🛠

[@the_kid777]

I love how dramatic all the music and animations are. Most coding tutorials out there on KZbin nowadays have this somewhat fancy, chill vibe to them. But life, in its true form, is not fancy, nor is it chill. Life's drama, isn't it?

[@DevMadeEasy]

It's easy to get lost, find certain parts boring, so if we bring the code to life, people start to enjoy what they do, doing it better.

[@aabirsabil4393]

Very good

[@DevMadeEasy]

Thanks

[@AnmolTheSage]

Can you please tell me how I can do this but horizontally? So like I want boxes to animate from top to bottom and vice versa.

[@gabrielmilagro8449]

use translateY instead in the css

[@godwyneben]

Great video. Very direct and straight to the point. What font extension is your vs code pls?

[@daggerv3]

Thank you for this incredible video. Please keep making more.

[@DevMadeEasy]

Thank you! Will do!

[@meditationrelaxingrakric3446]

everything is great except your font

[@DevMadeEasy]

Hello there, all right, thanks for you feedback. Abou the font you can use Google Fonts and pick up one that you like the most. Happy Coding my friend!

[@rikter2114]

Thank You I learnt a lot from this video!

[@DevMadeEasy]

Glad it was helpful!

[@DrMostafa-qi7fb]

can you explain me why (window.innerHight / 5 * 4)

[@DevMadeEasy]

The expression `(window.innerHeight / 5 * 4)` is calculating 80% of the viewport height, which serves as the trigger point for the animation when scrolling. Happy Coding my friend.

[@geejota]

have you used the AI to dub your voice with Silvio Santos Voice?

[@DevMadeEasy]

Not yet, I may give it a try... Lol

[@NareshBojja-k2t]

Thank you for this great video. Your valuable information made my day.

[@DevMadeEasy]

Glad it was helpful!

[@zenzomc9496]

thx for video. but i have a question. what is 5 and 4 mean in triggerBottom

[@DevMadeEasy]

I'm glad you like it my friend DEV, can you please send the lines of code you're talking about? I'm always online on my FB Page, so send me a msg! Happy Coding!

[@Lisi_Mxo]

@@DevMadeEasy checkBoxes(); function checkBoxes(){ console.log (window.innerHeight/ 5 * 4);

[@pawelczar]

I have same question @DevMadeEasy. its at 11:25, 9th line of code. Thanks for answer

[@PrefnaVagheni]

I'm still a newbie but for sure you've earned a subscriber. you use techniques that are understandable even though someone lacks experience. this trick of 400% and -400% on transform is my new thing today. 👏👏

[@rajamanickam3270]

What is the font family used in the HTML page it looks cartoonistic. Could you please tell what font family that is ?

[@DevMadeEasy]

The font family used in the HTML page is "Poppins." To achieve its cartoonistic and beautiful appearance, a text shadow was applied with the following CSS: font-family: Poppins; text-shadow: 2px 2px 10px #000;

[@mitalithakur4829]

U

[@barnabasgonda6887]

Very nice solution 👍 It would be nice to use for page loading, like progress bar🎉

[@DevMadeEasy]

Hello Web Warrior, Thank you for your feedback! I'm glad you found the solution helpful. Happy Coding my friend!

[@ricardodeoliveiraalves339]

Parece o Sílvio Santos falando inglês... kkkkkkkkkkkkk

[@DevMadeEasy]

I just love that guy...

[@ricardodeoliveiraalves339]

@@DevMadeEasy​ I liked a lot of your video, so much, I've been subscribed to your channel.

[@CheeseToastie-f1x]

very nice thanks. but i could have done without the intense fight scene background music. jsut advice for next time buddy, i left you a sub and like!

[@DevMadeEasy]

Thanks for the tip! Happy Coding my friend.

[@syediqbalahmed3176]

*_good ... see later ..._*

[@DevMadeEasy]

Its great Scroll Animation using JS... I guess people who likes JS will love it! Happy Coding my friend!

[@bhawanajadaun7590]

Sir html show will come in all boxes or 1 box

[@mitalithakur4829]

Hi... Apka ye chala program mere html Or css ki yo files thik chal ri hai or is ki ni

[@franciscomoreira3114]

very objective. thanks :)

[@DevMadeEasy]

Glad it was helpful!

[@redhunter873]

Which theme u use brother

[@DevMadeEasy]

Hello DEV, on VS Code? Monokai Pro

[@fabiomatta1530]

Thank you so much for sharing your knowledge. You are a great teacher.

[@DevMadeEasy]

So nice of you! Happy coding my friend!

[@urgut_mx]

Thank You 😍😍😍😍😍

[@DevMadeEasy]

Always welcome

[@urgut_mx]

@@DevMadeEasy thank you very much, I am new to web programming, your tutorials teach me a lot, and are helpful for me

[@Abhaysharma-jx1qv]

Thank you, it was a quick , to the point and simple tutorial for a powerful tool.

[@DevMadeEasy]

Glad you liked it! Happy Coding my friend!

[@alan_johnson_]

thanks you are the man

[@DevMadeEasy]

Glad it helped Happy Coding, my friend!

[@SAIEN333]

What if we add thi in a carousel?. Will it add fade in effect?

[@DevMadeEasy]

Its not bad. Happy Coding my friend.

[@krishnavamsi1126]

thanks bro

[@DevMadeEasy]

Any time

[@SukiChanXD]

I don't understand how you used the var(--clr), i tried it just like that and it didn't work. Do i have to download something for that?

[@DevMadeEasy]

Hey Dev: No download nescessary It's just saying that anything with the class "blue" should have a special color code called "--clr". So when the HTML code creates the box with the class "box blue show", it's saying that the box should have the special color code "--clr" that we defined in the CSS code earlier. In other words, the box will have a blue color because the CSS code says that anything with the class "blue" should use the color code "--clr", which we defined as #4285f4.

[@NaveenReddy-vm3ps]

Sir thank you for spreading your knowledge with us. You are a great guru!

[@DevMadeEasy]

Thanks and welcome... Happy Coding my friend!

[@MrAbbo11]

Nice and useful tutorial, but that background music ?? damn son.

[@DevMadeEasy]

Hey dev, thanks for your feedback! About the bg music, well, I am a developer learning "Video Edition", is it too loud or the music is not good? Happy Coding my friend!

[@NareshKushwaha-rp7rh]

Thats amazing sir 😍 Love to see more such video from you specially on boundingclientreact 😊

[@DevMadeEasy]

Very soon Happy coding my friend.

[@NareshKushwaha-rp7rh]

@@DevMadeEasy Happy coding Sir.

[@IanGabrielFerranco]

what if I want to add paragraph below the word "content"?

[@DevMadeEasy]

You can use paragraphs, images, whatever you want. Happy Coding my Friend.

[@gabrielmartins6696]

marroê! o Silvio Santos me ensinando JS. good video though ;)

[@DevMadeEasy]

''Quem quer dinheiro?'' ''Sai pra lá, sai pra lá!'' Grande figura aí no Brazil, vi vários shows aos Domingos.

[@mitalithakur4829]

In case of mine not working 😫

[@DevMadeEasy]

I will, if ou need any help say hello.... Happy Coding my friend!

[@mitalithakur4829]

@@DevMadeEasy hlo sir.... But sir i tried 2 times but scroll ni ho re hai boxes.... And in html file show class will be applied in all boex?

[@ob5804]

Hi) Can you explain, pleade, what is 5 and 4?

[@DevMadeEasy]

Lines 4 and 5 of JS?

[@ob5804]

@@DevMadeEasy expression 5 * 4

[@debajitchakraborty2711]

What is the vs code theme that is used in this video??

[@DevMadeEasy]

Hello Dev, I use monokai pro.

[@debajitchakraborty2711]

@@DevMadeEasy thanks.

[@suryakantkhute4249]

Font name ?😍

[@DevMadeEasy]

It is "Poppins", but to achieve its cartoonistic and beautiful appearance, a text shadow was applied with the following CSS: font-family: Poppins; text-shadow: 2px 2px 10px #000;