Scroll Animation | JavaScript

[@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.

[@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. 👏👏

[@NaveenReddy-vm3ps]

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

[@DevMadeEasy]

Thanks and welcome... Happy Coding my friend!

[@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!

[@daggerv3]

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

[@DevMadeEasy]

Thank you! Will do!

[@fabiomatta1530]

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

[@DevMadeEasy]

So nice of you! Happy coding my friend!

[@NareshBojja-k2t]

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

[@DevMadeEasy]

Glad it was helpful!

[@rikter2114]

Thank You I learnt a lot from this video!

[@DevMadeEasy]

Glad it was helpful!

[@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.

[@godwyneben]

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

[@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!

[@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

[@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

[@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

[@alan_johnson_]

thanks you are the man

[@DevMadeEasy]

Glad it helped Happy Coding, my friend!

[@franciscomoreira3114]

very objective. thanks :)

[@DevMadeEasy]

Glad it was helpful!

[@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.

[@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

[@krishnavamsi1126]

thanks bro

[@DevMadeEasy]

Any time

[@SAIEN333]

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

[@DevMadeEasy]

Its not bad. Happy Coding my friend.

[@aabirsabil4393]

Very good

[@DevMadeEasy]

Thanks

[@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

[@redhunter873]

Which theme u use brother

[@DevMadeEasy]

Hello DEV, on VS Code? Monokai Pro

[@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

[@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.

[@debajitchakraborty2711]

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

[@DevMadeEasy]

Hello Dev, I use monokai pro.

[@debajitchakraborty2711]

@@DevMadeEasy thanks.

[@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.

[@ob5804]

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

[@DevMadeEasy]

Lines 4 and 5 of JS?

[@ob5804]

@@DevMadeEasy expression 5 * 4

[@syediqbalahmed3176]

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

[@DevMadeEasy]

Its great Scroll Animation using JS... I guess people who likes JS will love it! 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!

[@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;

[@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?

[@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.

[@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!