📜Awesome Page Scroll Effect | HTML & CSS✨
Вставка
- Опубліковано 11 вер 2024
- How to make Awesome Full Page Scroll Effect using html &css Using HTML & CSS, step-by-step from scratch.
Let’s create a nice scroll animation with just 4 lines of code!
______________________________________________________________
👉 Source Code Available Here:
🌱devmadeeasy.gu...
______________________________________________________________
📚Resources
Markup | Pics Used In This Project: bit.ly/3cp2S5W
______________________________________________________________
🏆Recommended Videos🏆
🎬Login & Registration Form Using HTML & CSS & JS✨
➤ • Login & Registration F...
🎬Countdown Timer | JavaScript✨
➤ • Countdown Timer | Java...
🎬Build A Weather App | JavaScript [Beginners]✨
➤ • 🎬Build A Weather App |...
🎬CSS Text Typing Animation | HTML & CSS
➤ • CSS Text Typing Animat...
🎬Build a Step Progress Bar | JavaScript✨
➤ • Build a Step Progress ...
______________________________________________________________
🛴 Follow me on:
📟Facebook: bit.ly/3cp2S5W
🐦Twitter: bit.ly/3zejZ6f
______________________________________________________________
🎵Background Music:
bensound.com
uppbeat.io/
uppbeat.io/t/y...
License code: 7ZV2YXEDZKRMBBYC
uppbeat.io/t/h...
License code: 56MWF5EPYAGXVXQM
uppbeat.io/t/p...
License code: WTB2THDDGINQLWFW
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!
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! 💻✨
Best tutorial on UA-cam !!!!
Thank you so much for the kind words! 🙏😊 I'm thrilled to hear that you find my tutorials on UA-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! 💪🚀🔥
The simplicity is mind-blowing !
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.
This is life saver 🥺
Hello Web Warrior
I am glad you liked it!
Happy Coding my Friend.
Thank you so much ! so simple and beautiful !
Glad you like it!
It's worked🎉
Thangs for give this video.
Thangs so much
Welcome 👍
bro your official site is damm good 😃😃
I'm very glad you also liked it..
Happy Coding, my friend.
nice video man!!!
wow !!
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!
Beautifully explained😘❤🔥
Glad you liked it
amazing! Very helpful
So glad!
thank you so much!
It helped me a lot 🙏
Glad to hear that!
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
Nice video
Thanks
Thank you 🐸
You're welcome 😊
I'm glad you liked it.
Happy Coding my Friend!
Very useful thanks bro
Happy to help!
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!
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
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!
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!
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
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
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.
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?
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!
VLW Silvio Santos do front, vlw!
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!
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!
*_good ... see later ..._* 🐦
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!
Can you please share the code
The link is in description
Happy Codig my Friend!
is this mobile friendly?
IF not can easily be done...
Happy Coding my friend.
PS.: I don't remember!
It is
*_vola ... okay ..._*
Hey Syed Iabal, I'm glad you liked it!
Happy Coding my friend.
go to 6:10 for the actual magic
Hello DEV, 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 '