Scroll Animation | JavaScript
Vložit
- čas přidán 11. 08. 2022
- 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/philip-anderson/...
License code: NFAQUM8GKWGRDYEW
uppbeat.io/t/monument-music/t...
License code: IKUEPIOQUZARCFM1
uppbeat.io/t/anuch/our-champion
License code: HJALZSI8T5LRSEXA
uppbeat.io/t/monument-music/s...
License code: EBHHXJNDPBVA6NNT
uppbeat.io/t/yeti-music/turn-...
License code: WKLFXOKY34UXHON4 - Jak na to + styl
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 CZcams 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. 👏👏
Great video. Very direct and straight to the point. What font extension is your vs code pls?
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!
Thank You I learnt a lot from this video!
Glad it was helpful!
Thank you for this great video. Your valuable information made my day.
Glad it was helpful!
Thank you so much for sharing your knowledge. You are a great teacher.
So nice of you!
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!
Thats amazing sir 😍
Love to see more such video from you specially on boundingclientreact 😊
Very soon
Happy coding my friend.
@@DevMadeEasy Happy coding Sir.
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
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!
very objective. thanks :)
Glad it was helpful!
thanks
you are the man
Glad it helped
Happy Coding, my friend!
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.
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
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
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
What if we add thi in a carousel?.
Will it add fade in effect?
Its not bad.
Happy Coding my friend.
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
thanks bro
Any time
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 is the vs code theme that is used in this video??
Hello Dev, I use monokai pro.
@@DevMadeEasy thanks.
Very good
Thanks
what if I want to add paragraph below the word "content"?
You can use paragraphs, images, whatever you want.
Happy Coding my Friend.
Which theme u use brother
Hello DEV, on VS Code?
Monokai Pro
Hi) Can you explain, pleade, what is 5 and 4?
Lines 4 and 5 of JS?
@@DevMadeEasy expression 5 * 4
have you used the AI to dub your voice with Silvio Santos Voice?
Not yet, I may give it a try... Lol
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.
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.
*_good ... see later ..._*
Its great Scroll Animation using JS...
I guess people who likes JS will love it!
Happy Coding my friend!
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!