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 ! 👉 Source Code Available Here: 🌱devmadeeasy.gumroad.com/l/awesomepagescrolleffect
Hey thanks! I've seen so many professional websites use animated backgrounds which transitions to the 2nd webpage as you scroll down and I wanted to learn how. This is a great start. Thank you.
Thank you so much for the kind words! 🙏😊 I'm thrilled to hear that you find my tutorials on TH-cam helpful. 🎉💻 I strive to provide the best content and tutorials to assist you on your learning journey. If you have any specific requests or topics you'd like me to cover, feel free to let me know. 🙌🎥 Stay tuned for more exciting tutorials coming your way! Keep coding and learning! 💪🚀🔥
Hello DEV, the “Color Highlight” extension for Visual Studio Code does exactly that. It highlights color codes like rgba(), hex, hsl, and others directly in your CSS or any other file type by showing the actual color as a block around the color code. This makes it easy to visualize your colors in your code as you work.
Thanks for sharing. I would use "height: 100vh; height: -webkit-fill-available; height: fill-available;" in the section class. In the Safari iOS browser 100vh is calculated on the viewport height regardless of the visibility of the bottom navigation bar. Using the fill-available corrects that.
@@DevMadeEasy no like the vscode extension. I forgot the same of it where it highlights the brackets. You see the yellow outline that highlights the 2 brackets in the css code?
just when I thought I know CSS , was killing myself to implement this effect because saw it in someone's portfolio , tried everything I knew in js , finally just 4-lines of css does it.
I'm thrilled you enjoyed the content! 🚀 As a developer, there's always more to discover in CSS. Embrace the magic of continuous learning and happy coding, my friend! 💻✨
i tried it but it does not come as the same , when i scroll , it moves like a normal scroll would and then it snaps to the next section. it does not look like the same transition shown here which is similar to fulpage.js
Hello Web Warrior, can you please show me your Code? This way I can help you. You can also send me a msg on my FB page, and I will help you out! Happy Coding, my friend!
Extremely simple..... your code is working 100%. But I added a "P" tag next/after your "First PageSome lorem text this goes on same line!!!!!!!! I think it has to do with "display:flex;"?
Hi I'm always watching your videos I'm reading and copying it, but I have a question. I'm doing the same thing, but I get double scrawl. Can I get rid of it?
And how can you leave only one section visible (the others hidden, without the scroll bar) and when you click on the links, navigate to them, always leaving only one visible?
Hi. Not good at frontend stuff, but I really dislike vh as we can make browser smaller vertically and then content also will shrink. Do you have any suggestions to make life easier with vh or just media queries?
Hello Web Warrior! I understand your concern with using viewport height (vh) units in CSS. One approach you can take is to use calc() along with px values to set a minimum height for the elements based on the viewport height. For example, instead of using height: 100vh; on a container, you could use min-height: calc(100vh - 100px); where 100px is the height of any fixed header or footer elements. This will ensure that the container element always takes up the full viewport height, while still accounting for the height of any other elements on the page. Alternatively, you could also use media queries to adjust the height of elements based on the viewport size. This would involve setting breakpoints at different screen sizes and applying different CSS rules accordingly. In any case, it's important to consider the responsive design of your website and how it will look on different devices and screen sizes. Happy Coding my friend!
Hey DEV, thanks for your feedback... The project that I'm going to release this week, it's going to be a "JavaScript Project", it's going to cover a lot of the cool stuff in JS. See you there!
Hi there! Thanks for the love and support for my videos! ❤️ I'm thrilled to hear that you're enjoying them! Regarding the scroll speed, I totally understand your concern. It can be a bit too fast at times. But no worries! I'm already on it! I'll create a slower version of the scroll effect and post it on CodePen for you to check out. I want to make sure you have the best experience possible. Keep an eye out for the updated version, and I hope it'll be just what you were looking for. Thanks again for your feedback, and happy coding on CodePen! 🚀😊
Typo? More like 99% of the time! Logically speaking, if thousands found success and the video's set in stone, that's the only explanation. Happy coding, my friend!
Hello DEV, how are you doing? While our personal preferences may differ, it's valuable to develop diverse skills that align with our company's objectives, even if they don't always match our individual tastes. Professionalism often requires us to adapt and perform tasks that may not be our favorites, but are important for the organization's success. Happy Coding!
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 !
👉 Source Code Available Here:
🌱devmadeeasy.gumroad.com/l/awesomepagescrolleffect
Hey thanks! I've seen so many professional websites use animated backgrounds which transitions to the 2nd webpage as you scroll down and I wanted to learn how. This is a great start. Thank you.
Hey Web Warrior, I am glad you liked it.
Happy Coding!
The simplicity is mind-blowing !
Best tutorial on TH-cam !!!!
Thank you so much for the kind words! 🙏😊 I'm thrilled to hear that you find my tutorials on TH-cam helpful. 🎉💻 I strive to provide the best content and tutorials to assist you on your learning journey. If you have any specific requests or topics you'd like me to cover, feel free to let me know. 🙌🎥 Stay tuned for more exciting tutorials coming your way! Keep coding and learning! 💪🚀🔥
This is life saver 🥺
Hello Web Warrior
I am glad you liked it!
Happy Coding my Friend.
Now how do you do it by using arrow keys?
Hey, what vscode addon shows the colour of your css rgba in a block around it? Thanks!
Hello DEV, the “Color Highlight” extension for Visual Studio Code does exactly that. It highlights color codes like rgba(), hex, hsl, and others directly in your CSS or any other file type by showing the actual color as a block around the color code. This makes it easy to visualize your colors in your code as you work.
It's worked🎉
Thangs for give this video.
Thangs so much
Welcome 👍
Thanks for sharing. I would use "height: 100vh; height: -webkit-fill-available; height: fill-available;" in the section class. In the Safari iOS browser 100vh is calculated on the viewport height regardless of the visibility of the bottom navigation bar. Using the fill-available corrects that.
Great tip!
@@DevMadeEasy Probably good to add
"min-height: -moz-available;" as well to the mix.
Thank you so much ! so simple and beautiful !
Glad you like it!
bro your official site is damm good 😃😃
I'm very glad you also liked it..
Happy Coding, my friend.
nice video man!!!
what extension do you use where it has that yellow line showing the brackets for example 3:49
This was a visual effect, just so you can see what I'm explaining.
@@DevMadeEasy no like the vscode extension. I forgot the same of it where it highlights the brackets. You see the yellow outline that highlights the 2 brackets in the css code?
Can we make an animation that scrolls goes top of section with any mouse scroll but it ll stop at Just any section
Yes, using JavaScript you can make increasingly robust animations.
If you want to share your codepen, I can take a look.
just when I thought I know CSS , was killing myself to implement this effect because saw it in someone's portfolio , tried everything I knew in js , finally just 4-lines of css does it.
I'm thrilled you enjoyed the content! 🚀 As a developer, there's always more to discover in CSS. Embrace the magic of continuous learning and happy coding, my friend! 💻✨
i tried it but it does not come as the same , when i scroll , it moves like a normal scroll would and then it snaps to the next section. it does not look like the same transition shown here which is similar to fulpage.js
Hello Web Warrior, can you please show me your Code?
This way I can help you.
You can also send me a msg on my FB page, and I will help you out!
Happy Coding, my friend!
yeah same to me. I think it is editing
Beautifully explained😘❤🔥
Glad you liked it
how can i make it smooth?
Hello DEV, It's already smooth, but you can make it even smoother by changing it to your liking.
Happy Coding!
Hello.... I vonder why H and P tag (which I added) is not displayed block, but inline?
Hey Dev, can you show me your code?
Happy Coding my friend.
Extremely simple..... your code is working 100%. But I added a "P" tag next/after your "First PageSome lorem text this goes on same line!!!!!!!! I think it has to do with "display:flex;"?
How can i add videos instead the color background sheet?
Hello Dev, you can have anything, videos, pictures...
Happy Coding!
thank you so much!
It helped me a lot 🙏
Glad to hear that!
amazing! Very helpful
So glad!
Hi I'm always watching your videos
I'm reading and copying it, but I have a question.
I'm doing the same thing, but I get double scrawl. Can I get rid of it?
Hello dev, thanks for watching it...
Can you please, send me a msg on fb showing your code?
Happy Coding my friend!
Now I have 2 scroll bars on my page. I get rid of one of them, but the other is still here. Is it fixable?
Sure!
Share your Code on my FB Page, and me or the Community will help you out!
Happy Coding my Friend!
Did you fix it? I have the same problem
Thank you 🐸
You're welcome 😊
I'm glad you liked it.
Happy Coding my Friend!
but is 100vh scroll responsive if content needs more hight?
Hey dev, how are you doing?
100vh: means it occupies the entirety of the viewport (the height of your browser).
Happy Coding!
Did you find a way to make it fit larger content?
bro itz jusht ausham i really lyke it
Thanks ✌️
And how can you leave only one section visible (the others hidden, without the scroll bar) and when you click on the links, navigate to them, always leaving only one visible?
Ask chat gpt
You have to force the scroll left
Você é brasileiro? Muito bom seu tutoral! Seu sotaque parece do rio de janeiro. Parabens pelo otimo conteudo
Olá Dev, como vai?
Fico feliz que tenha gostado.
Happy Coding meu amigo!
Very useful thanks bro
Happy to help!
why mine its not smooth when i scroll mate?mine it stop ab 1s
Hello Dev, can you go to our FB page and send me a msg?
I can send you the Source Code...
This way you can find the error.
Happy Coding!
Nice video
Thanks
Hi. Not good at frontend stuff, but I really dislike vh as we can make browser smaller vertically and then content also will shrink. Do you have any suggestions to make life easier with vh or just media queries?
same issue
Hello Web Warrior!
I understand your concern with using viewport height (vh) units in CSS. One approach you can take is to use calc() along with px values to set a minimum height for the elements based on the viewport height.
For example, instead of using height: 100vh; on a container, you could use min-height: calc(100vh - 100px); where 100px is the height of any fixed header or footer elements. This will ensure that the container element always takes up the full viewport height, while still accounting for the height of any other elements on the page.
Alternatively, you could also use media queries to adjust the height of elements based on the viewport size. This would involve setting breakpoints at different screen sizes and applying different CSS rules accordingly.
In any case, it's important to consider the responsive design of your website and how it will look on different devices and screen sizes.
Happy Coding my friend!
thank you so much
You're welcome!
YOU. CHANGED. MY. F*CKING. LIFE!!!! THANKS SO MUCH!
Hello DEV, I'm glad you liked it.
Happy Coding my friend!
We are waiting more projects in JavaScript
Hey DEV, thanks for your feedback...
The project that I'm going to release this week, it's going to be a "JavaScript Project", it's going to cover a lot of the cool stuff in JS.
See you there!
wow !!
Hello DEV, I am glad you liked it...
Welcome to our DEV Tribe!
Can you please share the code
The link is in description
Happy Codig my Friend!
How can we Control the speed of this scroll, this is too fast, BTW Love Your Videos
Hi there! Thanks for the love and support for my videos! ❤️ I'm thrilled to hear that you're enjoying them!
Regarding the scroll speed, I totally understand your concern. It can be a bit too fast at times. But no worries! I'm already on it! I'll create a slower version of the scroll effect and post it on CodePen for you to check out. I want to make sure you have the best experience possible.
Keep an eye out for the updated version, and I hope it'll be just what you were looking for. Thanks again for your feedback, and happy coding on CodePen! 🚀😊
@@DevMadeEasy ☺️
Add transition in container thanks
is this mobile friendly?
IF not can easily be done...
Happy Coding my friend.
PS.: I don't remember!
It is
*_good ... see later ..._* 🐦
VLW Silvio Santos do front, vlw!
go to 6:10 for the actual magic
Hello DEV, Happy Coding my Friend.
*_vola ... okay ..._*
Hey Syed Iabal, I'm glad you liked it!
Happy Coding my friend.
lam cc gi a, edit video mau me vc
The f* it's not working 😐
Typo? More like 99% of the time! Logically speaking, if thousands found success and the video's set in stone, that's the only explanation. Happy coding, my friend!
@@DevMadeEasy it worked only after I set the scroll snap-align: ' centre '
I absolutely HATE pages and apps with this function. Makes me abandon them.
Hello DEV, how are you doing?
While our personal preferences may differ, it's valuable to develop diverse skills that align with our company's objectives, even if they don't always match our individual tastes. Professionalism often requires us to adapt and perform tasks that may not be our favorites, but are important for the organization's success.
Happy Coding!
you should'nt thats look cool