Crazy Scroll Animation Using CSS Only

In this video, width topic Crazy Scroll Animation Using CSS Only, I will guide everyone to create extremely smooth page scrolling animation effects using only CSS, No need for complicated calculations like Javascript, everything becomes easy with CSS.
Download Code: www.lundevweb.com/2024/06/cre...
-----
Hello everyone, I'm creating a lot of new projects every day and sharing them 😍, including things you'll love to know about javascript and web Developer, Designer. Subscribe to the channel so you don't miss it ✅.
#javascript #code #css
-----
Theme VsCode I'm Using: • Create Your Own VSCode...
Featured video series
React Js Tutorial: • React JS
Design Slider - Carousel web: • Design Slider - Carous...
E-Commerce Web Coding: • E-Commerce Website Code
Design Parallax SCrolling Effect: • Reponsive Parallax Scr...
Web Applycation Code: • Web Application Code
Javascript Tutorial: • Javascript Tutorial
CSS Tutorial: • CSS Tutorial
Many other impressive videos: / @lundeveloper
Contact With me:
Instagram: / lundev.web
Email: [e-mail]
Buy me a cup of coffee by clicking the thanks button on any video. Thank you very much for your support 😍.
Here, I share all my knowledge about Developer and Web Design including languages ​​such as HTML, CSS, SASS, Javascript, Vue, React, Bootstrap, Tailwind along with clean code techniques and UI UX Design.

[@lundeveloper]

If you find the video interesting and interesting, don't forget to like and subscribe to watch many interesting videos about web design and programming

[@maazdev9000]

Subbed 🎊

[@lundeveloper]

@@maazdev9000 Thank you

[@omizhut]

Hey Lun i have a question that how you find such interesting ideas to come up with do you take inspiration from some where or what ?
i will be waiting for your reply thanks and you can also make video about it but still I need reply for this ahaha btw love what you do keep it up!

[@VIN0DPANDEY-so3ro]

we want web designing
and a proper glassmorphing+[fully advanced]

[@uvlokesh6849]

❤

[@galileor713]

Sound like mr beast ai generators

[@mohammadiaa]

Wdym

[@mileri2864]

i think it is a mr beast ai generator

[@mohammadiaa]

@@mileri2864 oh

[@visiontv112]

So

[@CyborgCoder]

I'm pretty sure it is.

[@lundeveloper]

Does this surprise you?

[@HaRisH-rj2ip]

Well, I'm surprised ❤❤ keep doing more

[@M1-Pro]

Yes it did🔥🔥

[@SyedZainAli850]

Good job 👍

[@roshinif]

Why not

[@abhishekmehandiya8084]

No one match your content in youtube 🎉 ❤

[@javiervarela8189]

I didn't know the existence of view() property, it's awesome.

[@lundeveloper]

Please follow the channel to see more new things 😍

[@Tormentor60]

It is cool, but you should still continue to do this kind of thing in JS, since this is not yet suported in Safari and Firefox.

[@Alex-ni6ed]

​@@Tormentor60 recuerda la regla: si puedes hacerlo solo con css entonces no lo hagas con js.

[@Tormentor60]

@@Alex-ni6ed But you can't, because it is not supported in Safari and Firefox.

[@gurfatehsingh9767]

your video making and sound effects grabs attention

[@tower1235]

Sound effects are added by AI

[@patates1165]

this is %100 commented by AI

[@lundeveloper]

I'm trying to do everything as well as I can, and the sound effects were something I thought very carefully about adding. Thank you very much 😍😍😍❤️❤️❤️

[@funnyoceanofmemes1656]

do you know what i am serious when i m saying this ..." i will add this in my next project 100% " . very very thankyou for these animations ..... i am looking upto you for bringing more such vedios🥰

[@fdelaneau]

Hâte the voice tone, love the content. Viewing your videos is a dilemma 😅

[@danimatuko]

Amazing! The importance of css is getting greater as it evolves and can do more stuff without js. So is HTML

[@theduce407]

I cannot articulate how amazing this is!

[@md.niamatullahatif42]

Surprised with the result in such a easy way!!!😯

[@jonux13]

FANTASTIC!!!! AWESOME CSS ANIMATION DEMO!!!!

[@scott-richardson]

This is fantastic! A huge enhancement to CSS and no longer needing JS to tie it to the scroll position.

[@scott-richardson]

Shame Safari doesn’t support it yet. Grr. But a polyfill surely exists.

[@IsmailSheikh-xs1dr]

I knew about scroll animations but the way you explained was so simplified it was amazing.

[@lundeveloper]

Thank you so much bro 😍😍

[@jmr1920]

another awesome css tutorial... cant wait for the next one....

[@benio9512]

Just what i needed ngl

[@codingbyte847]

Your videos are always fu***ng awesome ❤

[@lundeveloper]

haha Thank you so much bro 😍😍

[@abcdabcd8605]

Bro this was awesome!!! Hadn't thought we could make this kind of animation this easily!!

[@mdkhaledshuvo]

I was searching for it for this week. And now I got it. Thank you soo much man.. I am going to use this effect on my portfolio on Next.js as I don't want to use AOS.. Anyway, already subscribed and liked.. And this is a comment also ❤❤

[@lundeveloper]

Thank you so much bro

[@diego.almeida]

I just found out this channel, and I'm learning so much from it. Awesome content, perfectly presented.

[@lundeveloper]

Thank you bro 😍

[@AlThePal78]

made my life easier I will test this with my portfolio :)

[@davidfitcher2953]

You explained it perfectly well and fun

[@user-qy7fn9hw8z]

Brooooooo ! Thats Awesome 🥵

[@MuhammadMoizKhalid]

wow really good animation applying with such ease

[@awaluddintogar1175]

This is what ive looking for
Thank you bro
Subbed

[@lundeveloper]

Thank you bro ❤️

[@longyuanchuan]

You're an excellent source of information and inspiration, excellent video editing, excellent educational content, excellent presentation, thank you... Subscribed

[@davidcantea4519]

You are a genius thank you

[@biketips1337]

Mind-blowing 🎉 Very Clean and simple

[@lundeveloper]

Thank you so much 😍

[@nirupamsharma7277]

love your content bro. i don't know how to thank you. you give some much for free. reallly appriciate your work. keep doing it.

[@lundeveloper]

Thank you so much bro 😍😍

[@Undrios]

Thank you for these mind blowing tutorials 🔥🔥🔥🔥🔥

[@lundeveloper]

Thank ☺️☺️

[@DanielAyioka]

Amazing 👏

[@Brlitzkreig]

Wow this is truly outstanding content

[@infounknown1409]

your channel is better than a bootcamp course

[@FatimaSarwar105]

Just subscribed you. Love this content ❤.

[@lundeveloper]

Thank you so much 😍😍😍

[@christian14882]

Thks u for sharing!!! 🤙🏾

[@lundeveloper]

Thanks for watching my video

[@aswin_4ever]

never in my rarest dreams i thought mrbeast would take css classes

[@andreiribac6284]

it's fantastic! it's really cool!

[@lundeveloper]

Thank you bro 😍

[@jhsalman]

Wow brother you done a interesting project. Thank you so much

[@lundeveloper]

Thank you ☺️☺️

[@AJ-Pixelyze]

Another amazing tutorial. I wonder if you can do tutorial on building a carousel/slider something like swiper have the standard one using js?

[@MrAlexutzu007]

this is so cool. Thanks for sharing!

[@lundeveloper]

😍😍

[@dprophecyguy]

keep these professional level css stuff coming. idea for playlist implement modern css interaction from various websites like (linear, raycast, vercel) in an own playlist

[@mohitashliya8750]

Thanks fornteaching us something nnew

[@powerofthoughts_pot]

Its really useful. Please make more videos about CSS animation. ❤Love from Srilanka🇱🇰

[@lundeveloper]

Thank you so much

[@HasithRanasinghe]

Great! But what are the unsupported browsers ?

[@xecol12]

Atm chrome, edge and opera are the only supported i guess.

[@codingvidyalaya8370]

Why you always surprise us , we know you are the best 😂

[@lundeveloper]

Thank you so much bro

[@codingvidyalaya8370]

@@lundeveloper ❤️

[@gkd1]

Superb

[@adrielsantana8929]

This is Incredible, the only style thing I GARANTEE you cant do using CSS only is to apply a gradient border in a dynamic width/height container with low background opacity. I bet 🤪

[@hassanad94]

Its so cool, but browser support is 71%. But so nice :D

[@isaacdruin]

As much as I dislike the Mr Beast AI voice, your tutorials are great. Keep up the good work.

[@duruiz]

that's a really cool introduction to it! thanks!
can I suggest 3 things? 2 are serious 1 is joking
1. the ai voiceover bugged me a little, I suggest you really talk to us, it will make more personal and cool, in case you can't talk I suggest another voice over.
2. zero doesn't have units in css, so anywhere you use 0px/rem/em I think is better to use just zero :)
3. the lacking of spaces before opening brackets make me craaaazy, but thats the joke one, I know some people prefer that way (but I hate it 😂)

[@schimalaysiantwitchtv1655]

Love your videos ❤

[@lundeveloper]

Thank you so much 😍

[@amanpatel355]

Best ❤

[@abdderrahmanesalmi5366]

can you do a tutorial of this website with all the images of it? it's really awesome with a cool design.

[@nayanbiswas370]

This guy is just awesome ❤

[@lundeveloper]

Thank you 😍😍

[@udit.roshan]

Best channel on CSS rn

[@lundeveloper]

Thank you bro 😍

[@patunolaibukun2506]

i agree with this 👍
i will start recreating all the projects

[@MdNaimurRahmanHera]

awesome🔥

[@user-de1if9dw1o]

Best video I've seen today ❤

[@lundeveloper]

wow, Thank You 😍😍

[@re-member]

Great tutorial. Thank you. Hopefully it won't take too long for Safari and Firefox to support those properties.

[@lundeveloper]

I hope so too

[@irfansaeedkhan7242]

wowwww never though that would be possible in css

[@lundeveloper]

That's right, CSS is getting stronger day by day

[@mr.fabian8471]

Thanks!!!!

[@chromegoogle-yi4jv]

insane content to learn

[@sasa-bv9gu]

Hello! That was a very useful video!
I would like to know how these functions impact the performance of the page. Would this solution be faster than using JS? And, on its own, how does it impact the performance of the pagev?

[@ceciliameetsworld]

this was cooool

[@Prince3ff]

It's amazing can I use this in product level projects ?

[@vishalghule4807]

Excellent content as always. But can you provide some "GSAP " animation content.

[@vishalghule4807]

Hope you see this

[@lundeveloper]

Yes, I will make it

[@aayushgupta7839]

​@@lundeveloper for react + gsap too if possible.

[@MeherUllahKhanRaj]

Whoa 😊

[@muktadirrudro7552]

Great work. Is it supported on all browsers? Specially safari?

[@jacoleighwessels3104]

Liked and subscribed thanks

[@lundeveloper]

Thank you so much 😍

[@codingmania7958]

Firstly, Nice video as always!
But i wanted to ask if there's any way to stop the reverse animation, like the animation works in only one direction?

[@sorcerernilss]

wow amaizing!

[@lundeveloper]

😍😍

[@zino1397]

Hey man great work, i would like to know how to get assets like that , the images that all

[@PicSta]

Crazy good and all without JS.

[@henriktholstrup7264]

Simply brilliant - :-D but you are making several (expensive) apps I have bought retired ;-)

[@dishanta-adhikari]

lit 🔥

[@ManojKukkadapu]

Thanks for the wonderful explanation 🫠 subscribed😃

[@lundeveloper]

Thank you ❤️

[@nodeguru7663]

Finally I found this channel 🎉🎉🎉🔥🔥

[@lundeveloper]

Thank you ☺️☺️

[@user-ew1dl4dh3e]

subscribed!

[@lundeveloper]

Thank you bro 😍

[@ahmetsoner9106]

Emeğine sağlık ❤

[@lundeveloper]

Thank you watching my content

[@PRsHungama]

wohh... without GSAP 😍🤤

[@yavallejo]

Amazing Video 🇨🇴

[@lundeveloper]

Thank you 😍

[@narasimmans5418]

🔥

[@siegfriedschmitz5260]

which vscode extension do you use for css syntax highlighting? looks beautiful

[@lundeveloper]

I made a video sharing about that, you will find it in the diaper description section

[@learnidotapp]

Cool

[@lundeveloper]

Thank you

[@siddanth6436]

Make a video on awesome screenshot of page according to size required. Using only css

[@DKGupta-cb5iv]

👏👏

[@tommeka1210]

You're so good

[@lundeveloper]

Thank you so much ^^

[@abhishekchaturvedi2752]

Most high skill 9 min video

[@xazon]

Do I need to add some kind of library or something? When I try to add animation-timeline: view(); it says "Unknown CSS property 'animation-timeline'" and "Unknown function 'view'"...

[@TheBlackApex]

Hey Lun!!

[@fetonoforno95]

i gotta ask bro, where do you find those high quality images

[@gurfatehsingh9767]

you are awesome bro

[@lundeveloper]

Thank you so much bro

[@gurfatehsingh9767]

@@lundeveloper I really like your VS as well, please do make a video on customisation of it. Thanks

[@lundeveloper]

@@gurfatehsingh9767 I did it, you will find the video in the diaper description section

[@gurfatehsingh9767]

@@lundeveloper yayyyy!! Thanks

[@abcdabcd8605]

Can you also post videos on JavaScript important topics

[@MercurySteel]

Hopefully the algorithm would be kind to this video

[@iQuickGaming]

with Mr. Beast explaining this im surely gonna learn it very well

[@ManojKukkadapu]

Post part-2 video on left to right animation and right to left animation bro

[@motivibes381]

Dope 🔥 can you make landing page using GSAP ⚡

[@lundeveloper]

Yes I Can

[@frostmichael8360]

Very good content !
(Updated :) A warning about the browser compatibility - more visual, more explicit - would have been very appreciated (I didnt seen / heard it in my first watch).

[@lucasfranco1758]

8:17

[@frostmichael8360]

@@lucasfranco1758 Thks @lucasfranco1758, updating my comment.

[@omarvite9373]

Is it better than js? Talking about efficiency

[@kwistore2022]

❤💯🎉

[@lundeveloper]

😍😍😍

[@ZeninX4]

Could you please make a video on media queries too.

[@saurabhp94]

Is the support out with most browsers?