📜Awesome Page Scroll Effect | HTML & CSS✨

[@DevMadeEasy]

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!

[@kenway1815]

The simplicity is mind-blowing !

[@k.mahesh277]

Best tutorial on KZbin !!!!

[@DevMadeEasy]

Thank you so much for the kind words! 🙏😊 I'm thrilled to hear that you find my tutorials on KZbin 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! 💪🚀🔥

[@wanderlust1814]

This is life saver 🥺

[@DevMadeEasy]

Hello Web Warrior I am glad you liked it! Happy Coding my Friend.

[@sammiller9855]

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]

Great tip!

[@sammiller9855]

@@DevMadeEasy Probably good to add "min-height: -moz-available;" as well to the mix.

[@RajKumar-23317]

It's worked🎉 Thangs for give this video. Thangs so much

[@DevMadeEasy]

Welcome 👍

[@apofeniaisidora]

Thank you so much ! so simple and beautiful !

[@DevMadeEasy]

Glad you like it!

[@jainisminsights1406]

bro your official site is damm good 😃😃

[@DevMadeEasy]

I'm very glad you also liked it.. Happy Coding, my friend.

[@jithinsurendran678]

nice video man!!!

[@sarthakkharade7112]

Beautifully explained😘❤🔥

[@DevMadeEasy]

Glad you liked it

[@danielkristensen5296]

amazing! Very helpful

[@DevMadeEasy]

So glad!

[@ivanvargas8498]

thank you so much! It helped me a lot 🙏

[@DevMadeEasy]

Glad to hear that!

[@mycomputer-b6j]

bro itz jusht ausham i really lyke it

[@DevMadeEasy]

Thanks ✌️

[@dalanpa]

Thank you 🐸

[@DevMadeEasy]

You're welcome 😊 I'm glad you liked it. Happy Coding my Friend!

[@gggabrielelel]

Você é brasileiro? Muito bom seu tutoral! Seu sotaque parece do rio de janeiro. Parabens pelo otimo conteudo

[@DevMadeEasy]

Olá Dev, como vai? Fico feliz que tenha gostado. Happy Coding meu amigo!

[@itzyuzuruclips]

Nice video

[@DevMadeEasy]

Thanks

[@Anonymous-oo3xy]

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]

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! 💻✨

[@digo0203ify]

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?

[@emgodas]

Ask chat gpt

[@wil-fri]

You have to force the scroll left

[@balenmohammed1657]

Very useful thanks bro

[@DevMadeEasy]

Happy to help!

[@hethinksyourfrenchalan3280]

Hey, what vscode addon shows the colour of your css rgba in a block around it? Thanks!

[@DevMadeEasy]

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.

[@rajashreedas3391]

wow !!

[@DevMadeEasy]

Hello DEV, I am glad you liked it... Welcome to our DEV Tribe!

[@mufeezhanif]

thank you so much

[@DevMadeEasy]

You're welcome!

[@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.]

yeah same to me. I think it is editing

[@트츠크]

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!

[@AnnaBriker]

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]

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

[@jhefaranal]

YOU. CHANGED. MY. F*CKING. LIFE!!!! THANKS SO MUCH!

[@DevMadeEasy]

Hello DEV, I'm glad you liked it. Happy Coding my friend!

[@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

[@balenmohammed1657]

We are waiting more projects in JavaScript

[@DevMadeEasy]

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!

[@vedatsozen]

Can we make an animation that scrolls goes top of section with any mouse scroll but it ll stop at Just any section

[@DevMadeEasy]

Yes, using JavaScript you can make increasingly robust animations. If you want to share your codepen, I can take a look.

[@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?

[@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]

Hello.... I vonder why H and P tag (which I added) is not displayed block, but inline?

[@DevMadeEasy]

Hey Dev, can you show me your code? Happy Coding my friend.

[@FoxiAndMolly]

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;"?

[@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!

[@sajmon_sweeden]

How can i add videos instead the color background sheet?

[@DevMadeEasy]

Hello Dev, you can have anything, videos, pictures... Happy Coding!

[@mesquitatm]

how can i make it smooth?

[@DevMadeEasy]

Hello DEV, It's already smooth, but you can make it even smoother by changing it to your liking. Happy Coding!

[@luan12m85]

VLW Silvio Santos do front, vlw!

[@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!

[@syediqbalahmed3176]

*_good ... see later ..._* 🐦

[@fabioZ-s2y]

is this mobile friendly?

[@DevMadeEasy]

IF not can easily be done... Happy Coding my friend. PS.: I don't remember!

[@zetovicfabio]

It is

[@lalitendraswamy9918]

Can you please share the code

[@DevMadeEasy]

The link is in description Happy Codig my Friend!

[@syediqbalahmed3176]

*_vola ... okay ..._*

[@DevMadeEasy]

Hey Syed Iabal, I'm glad you liked it! Happy Coding my friend.

[@pilotgfx]

go to 6:10 for the actual magic

[@DevMadeEasy]

Hello DEV, Happy Coding my Friend.

[@aLac-iv4oz]

lam cc gi a, edit video mau me vc

[@Hannah-Bee]

I absolutely HATE pages and apps with this function. Makes me abandon them.

[@DevMadeEasy]

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!

[@xaimweb]

you should'nt thats look cool

[@SkNasimPC]

The f* it's not working 😐

[@DevMadeEasy]

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!

[@SkNasimPC]

@@DevMadeEasy it worked only after I set the scroll snap-align: ' centre '