No video
📜Awesome Page Scroll Effect | HTML & CSS✨
Рет қаралды 82,612
Күн бұрын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
@DevMadeEasy 2 жыл бұрын
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
@sayaankhan3484 Жыл бұрын
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.
@DevMadeEasy Жыл бұрын
Hey Web Warrior, I am glad you liked it. Happy Coding!
@Anonymous-oo3xy 4 ай бұрын
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.
@DevMadeEasy 4 ай бұрын
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! 💻✨
@sammiller9855 2 жыл бұрын
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 2 жыл бұрын
Great tip!
@sammiller9855 2 жыл бұрын
@@DevMadeEasy Probably good to add "min-height: -moz-available;" as well to the mix.
@k.mahesh277 Жыл бұрын
Best tutorial on KZfaq !!!!
@DevMadeEasy Жыл бұрын
Thank you so much for the kind words! 🙏😊 I'm thrilled to hear that you find my tutorials on KZfaq 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! 💪🚀🔥
@kenway1815 9 ай бұрын
The simplicity is mind-blowing !
@wanderlust1814 5 ай бұрын
This is life saver 🥺
@DevMadeEasy 5 ай бұрын
Hello Web Warrior I am glad you liked it! Happy Coding my Friend.
@apofeniaisidora 10 ай бұрын
Thank you so much ! so simple and beautiful !
@DevMadeEasy 10 ай бұрын
Glad you like it!
@digo0203ify 3 ай бұрын
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?
@RajKumar-23317 9 ай бұрын
It's worked🎉 Thangs for give this video. Thangs so much
@DevMadeEasy 9 ай бұрын
Welcome 👍
@jainisminsights1406 6 ай бұрын
bro your official site is damm good 😃😃
@DevMadeEasy 5 ай бұрын
I'm very glad you also liked it.. Happy Coding, my friend.
@gggabrielelel 3 ай бұрын
Você é brasileiro? Muito bom seu tutoral! Seu sotaque parece do rio de janeiro. Parabens pelo otimo conteudo
@DevMadeEasy 3 ай бұрын
Olá Dev, como vai? Fico feliz que tenha gostado. Happy Coding meu amigo!
@pilotgfx 4 ай бұрын
go to 6:10 for the actual magic
@DevMadeEasy 4 ай бұрын
Hello DEV, Happy Coding my Friend.
@jithinsurendran678 10 ай бұрын
nice video man!!!
@danielkristensen5296 Жыл бұрын
amazing! Very helpful
@DevMadeEasy Жыл бұрын
So glad!
@ivanvargas8498 Жыл бұрын
thank you so much! It helped me a lot 🙏
@DevMadeEasy Жыл бұрын
Glad to hear that!
@sarthakkharade7112 11 ай бұрын
Beautifully explained😘❤🔥
@DevMadeEasy 11 ай бұрын
Glad you liked it
@user-tw8fj4dy5s 11 ай бұрын
bro itz jusht ausham i really lyke it
@DevMadeEasy 11 ай бұрын
Thanks ✌️
@dalanpa 7 ай бұрын
Thank you 🐸
@DevMadeEasy 7 ай бұрын
You're welcome 😊 I'm glad you liked it. Happy Coding my Friend!
@itzyuzuruclips 6 ай бұрын
Nice video
@DevMadeEasy 6 ай бұрын
Thanks
@balenmohammed1657 2 жыл бұрын
Very useful thanks bro
@DevMadeEasy 2 жыл бұрын
Happy to help!
@mufeezhanif Жыл бұрын
thank you so much
@DevMadeEasy Жыл бұрын
You're welcome!
@SuperValza Жыл бұрын
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?
@ElQueComenta2.0 Жыл бұрын
same issue
@DevMadeEasy Жыл бұрын
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!
@user-bc6vz6sh6t Жыл бұрын
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?
@DevMadeEasy Жыл бұрын
Hello dev, thanks for watching it... Can you please, send me a msg on fb showing your code? Happy Coding my friend!
@arobenrajkumar Жыл бұрын
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
@DevMadeEasy Жыл бұрын
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!
@AshokWorld. 9 ай бұрын
yeah same to me. I think it is editing
@jhefaranal 4 ай бұрын
YOU. CHANGED. MY. F*CKING. LIFE!!!! THANKS SO MUCH!
@DevMadeEasy 4 ай бұрын
Hello DEV, I'm glad you liked it. Happy Coding my friend!
@luan12m85 7 ай бұрын
VLW Silvio Santos do front, vlw!
@Saqib_Arain Жыл бұрын
How can we Control the speed of this scroll, this is too fast, BTW Love Your Videos
@DevMadeEasy Жыл бұрын
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! 🚀😊
@Saqib_Arain Жыл бұрын
@@DevMadeEasy ☺️
@Code_with_zain Ай бұрын
Add transition in container thanks
@vedatsozen 5 ай бұрын
Can we make an animation that scrolls goes top of section with any mouse scroll but it ll stop at Just any section
@DevMadeEasy 5 ай бұрын
Yes, using JavaScript you can make increasingly robust animations. If you want to share your codepen, I can take a look.
@AnnaBriker 2 жыл бұрын
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?
@DevMadeEasy 2 жыл бұрын
Sure! Share your Code on my FB Page, and me or the Community will help you out! Happy Coding my Friend!
@AK-kq1mk Жыл бұрын
Did you fix it? I have the same problem
@saifosama1833 Жыл бұрын
but is 100vh scroll responsive if content needs more hight?
@DevMadeEasy Жыл бұрын
Hey dev, how are you doing? 100vh: means it occupies the entirety of the viewport (the height of your browser). Happy Coding!
@AK-kq1mk Жыл бұрын
Did you find a way to make it fit larger content?
@balenmohammed1657 2 жыл бұрын
We are waiting more projects in JavaScript
@DevMadeEasy 2 жыл бұрын
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!
@mesquitatm104 4 ай бұрын
how can i make it smooth?
@DevMadeEasy 4 ай бұрын
Hello DEV, It's already smooth, but you can make it even smoother by changing it to your liking. Happy Coding!
@usernad8520 Жыл бұрын
what extension do you use where it has that yellow line showing the brackets for example 3:49
@DevMadeEasy Жыл бұрын
This was a visual effect, just so you can see what I'm explaining.
@usernad8520 Жыл бұрын
@@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?
@FoxiAndMolly 10 ай бұрын
Hello.... I vonder why H and P tag (which I added) is not displayed block, but inline?
@DevMadeEasy 10 ай бұрын
Hey Dev, can you show me your code? Happy Coding my friend.
@FoxiAndMolly 10 ай бұрын
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;"?
@bagelproductions23 Жыл бұрын
How can i add videos instead the color background sheet?
@DevMadeEasy Жыл бұрын
Hello Dev, you can have anything, videos, pictures... Happy Coding!
@syediqbalahmed3176 2 жыл бұрын
*_good ... see later ..._* 🐦
@nguyentiensu3825 Жыл бұрын
why mine its not smooth when i scroll mate?mine it stop ab 1s
@DevMadeEasy Жыл бұрын
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!
@lalitendraswamy9918 6 ай бұрын
Can you please share the code
@DevMadeEasy 6 ай бұрын
The link is in description Happy Codig my Friend!
@user-me5pb3zh6j Жыл бұрын
is this mobile friendly?
@DevMadeEasy Жыл бұрын
IF not can easily be done... Happy Coding my friend. PS.: I don't remember!
@zetovicfabio Жыл бұрын
It is
@syediqbalahmed3176 2 жыл бұрын
*_vola ... okay ..._*
@DevMadeEasy 2 жыл бұрын
Hey Syed Iabal, I'm glad you liked it! Happy Coding my friend.
@aLac-iv4oz 9 ай бұрын
lam cc gi a, edit video mau me vc
@user-hb4vv8ug7v 4 ай бұрын
The f* it's not working 😐
@DevMadeEasy 4 ай бұрын
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!
@user-hb4vv8ug7v 4 ай бұрын
@@DevMadeEasy it worked only after I set the scroll snap-align: ' centre '
Online Tutorials
Рет қаралды 24 М.
GreatStack
Рет қаралды 6 МЛН