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 🛠
I love how dramatic all the music and animations are. Most coding tutorials out there on UA-cam 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?
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. 👏👏
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!
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;
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.
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.
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!
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;
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!
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 🛠
I love how dramatic all the music and animations are. Most coding tutorials out there on UA-cam 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?
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.
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. 👏👏
Thank you for this incredible video. Please keep making more.
Thank you! Will do!
Thank you, it was a quick , to the point and simple tutorial for a powerful tool.
Glad you liked it!
Happy Coding my friend!
Sir thank you for spreading your knowledge with us. You are a great guru!
Thanks and welcome...
Happy Coding my friend!
Thank you so much for sharing your knowledge. You are a great teacher.
So nice of you!
Happy coding my friend!
Thank you for this great video. Your valuable information made my day.
Glad it was helpful!
Thank You I learnt a lot from this video!
Glad it was helpful!
Great video. Very direct and straight to the point. What font extension is your vs code pls?
Thats amazing sir 😍
Love to see more such video from you specially on boundingclientreact 😊
Very soon
Happy coding my friend.
@@DevMadeEasy Happy coding Sir.
Very nice solution 👍 It would be nice to use for page loading, like progress bar🎉
Hello Web Warrior, Thank you for your feedback! I'm glad you found the solution helpful.
Happy Coding my friend!
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.
use translateY instead in the css
Thank You 😍😍😍😍😍
Always welcome
@@DevMadeEasy thank you very much, I am new to web programming, your tutorials teach me a lot, and are helpful for me
thanks
you are the man
Glad it helped
Happy Coding, my friend!
thx for video. but i have a question. what is 5 and 4 mean in triggerBottom
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!
@@DevMadeEasy
checkBoxes();
function checkBoxes(){
console.log (window.innerHeight/ 5 * 4);
I have same question @DevMadeEasy. its at 11:25, 9th line of code. Thanks for answer
very objective. thanks :)
Glad it was helpful!
thanks bro
Any time
Very good
Thanks
What is the font family used in the HTML page it looks cartoonistic. Could you please tell what font family that is ?
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;
U
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?
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.
marroê! o Silvio Santos me ensinando JS. good video though ;)
''Quem quer dinheiro?''
''Sai pra lá, sai pra lá!''
Grande figura aí no Brazil, vi vários shows aos Domingos.
Which theme u use brother
Hello DEV, on VS Code?
Monokai Pro
have you used the AI to dub your voice with Silvio Santos Voice?
Not yet, I may give it a try... Lol
Sir html show will come in all boxes or 1 box
Hi... Apka ye chala program mere html Or css ki yo files thik chal ri hai or is ki ni
can you explain me why (window.innerHight / 5 * 4)
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.
What if we add thi in a carousel?.
Will it add fade in effect?
Its not bad.
Happy Coding my friend.
Nice and useful tutorial, but that background music ?? damn son.
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!
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!
Thanks for the tip!
Happy Coding my friend.
Hi) Can you explain, pleade, what is 5 and 4?
Lines 4 and 5 of JS?
@@DevMadeEasy expression 5 * 4
*_good ... see later ..._*
Its great Scroll Animation using JS...
I guess people who likes JS will love it!
Happy Coding my friend!
what if I want to add paragraph below the word "content"?
You can use paragraphs, images, whatever you want.
Happy Coding my Friend.
What is the vs code theme that is used in this video??
Hello Dev, I use monokai pro.
@@DevMadeEasy thanks.
Font name ?😍
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;
In case of mine not working 😫
I will, if ou need any help say hello....
Happy Coding my friend!
@@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?
Parece o Sílvio Santos falando inglês... kkkkkkkkkkkkk
I just love that guy...
@@DevMadeEasy I liked a lot of your video, so much, I've been subscribed to your channel.
everything is great except your font
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!