Honestly, thank you for mixing your audio well. Listening on ear buds at a noisy location and not being injured when the intro music plays is not a given at all 😅
I really love this kind of content. The web design part is kind of forgotten nowadays. Scroll animations are so necessary but I can’t barely find any videos about it. Thanks for creating this tutorial!
Since nobody point that out, using scroll & resize without passive option can hurt the perfomances of the page. Using passive make the event out of the main thread and updating only when there is an available tick available.
This is interesting and I am glad you have done the video. But as a visitor to a non-animated website, I've never thought, I wish there were some animations.
So cool! Sometimes I enter those sites like ´One Page Love´ and I get completely lost about some of the effects I see there (and I dont even mention Awwwards). It would be cool if you posted more real world examples like this.
I'm just thinking I can design any moving containers this way 💡 it's nothing new but this logical page looks really nice, plus a step by step walkthrough of the changes
thank you so much you nailed it ..... but i ty use css without js....its kinda hird to achieve smooth animation onscroll simly with css especially the scroll back effect ..... i see you implemented a feature from scratch this feature is also available on react/spring it is calles parallax and it is truly amazing because its also frustrating to have smooth animations with tge scroll progress just between 0 and 100% for all the pages .... it is a nice a approach to have 100% per each page it could even allow you to set the speed of the page increasing the heigh of the page or its distance from tge previous page if its going to have 100vh
reallly nnaaailed it by setting only the scroll variable in js on resize and on scroll and using in css so it could perform tge calculations automatically when the scroll changes ..... it is truly amazing because if evrything is imlemented from js it becomes a tittle bit unmaintanable ......BUT it is still limited if we may wanna position all tge elements with a fixed position while respecting the minimum aspect ratio ..... because we may need to use conditions and i'm wondering could css use conditions ???? like the calc function could it have conditions
It's impressive that you can do all that in mostly CSS, and I think it's good how you explained your thought process rather than just giving the code. But, as a user, I feel I'd just be SO confused by a site like this. You go to it and expect to scroll down normally, but all this distracting stuff happens. It's hard to know what are images or what is interactable UI, and the text that apparently goes with each image is often hidden behind it. As a user, I'd find a normally scrolling article-style site much more readable. 🤷
Sometimes I feel like we are regressing back to the early days when every site seemed to want to have so much animation that the user could not navigate the page. Life really is cyclical. 😞
@@CWhitmer22015 yep! I want to stay in with the design trends but sometimes I feel they're a bit too much. Especially when trying to make a website accessable for everyone!
It's impressive, but please, PLEASE don't hijack my scroll wheel. Just let me scroll down the darn page. You shouldn't ever do it for the same reason you shouldn't ever make a website switch your mouse buttons (showing a context menu on left click): Because you should not change the baseline of how a user's input works, unless of course you want to be abnoxious to the max.
Agreed. Even for landing pages. It just messes with the user experience and makes it tricky to navigate. A client may even appreciate the visual flair, but they won't appreciate the way it handicaps their conversion rate. If you're just trying to make other developers hard with your CSS skills, though, then go for it.
If you code something from scratch, which has backend/frontend. How you check for vulnerabilities? is there some site or tool for that? I want to code lots of stuff (mainly for myself) but afraid to make public, maybe its full of holes.
I've tried your code but it seems to lose the ability to change images if you refresh the page. Maybe its because the listener is set to window and not document? I'm not sure.
Netlify's landing page website also have this scroll animation, I'm trying to break it down and work on it, but I left no time, but at least this cidei came out! 😁✌👍
Hey Web Dev Simplified, can you do carousel mouse drag to slide (but item number is unkown) and items are clickable but now when you grap? I tried many packages like motion and did not achive what i want.
This css wont pass a css validator though. You probably still need to go about this with js if you want to use it for a real website. Unless im missing something and theres a way to make it pass the validator?
@@deepeshchhetri850 There's clickbait, and then there's misleading clickbait. If the video delivers, it's not misleading, but that doesn't mean it wasn't clickbait.
Can you help us to build a referral program using express . Users should have the ability to share the links to other platforms that my program can track
hey i have question. i have an account on ure personnal site and i want to share the content (CSS) i buy with the member of my family ? Do i have the right to do that ? thanks
I think this is a horrible website. I feel stress using it. Its just too much, straight into my face with this big white "screenshot" comming up. Info.. I'm 32 and a webdevloper, not 70 or so..
There is no reason to put animations everywhere just b3cause you know how. That is the shittiest web page I’ve seen since my first web page on Netscape navigator in the 1990s
Honestly, thank you for mixing your audio well. Listening on ear buds at a noisy location and not being injured when the intro music plays is not a given at all 😅
Something you don't think about 'til you watch certain youtubers. Definitely a nice detail!
Knowing all these feels almost illegal but seriously god level work man!
This was much needed, the step by step breakdown.
Pls do more such videos.
I really love this kind of content. The web design part is kind of forgotten nowadays. Scroll animations are so necessary but I can’t barely find any videos about it. Thanks for creating this tutorial!
Since nobody point that out, using scroll & resize without passive option can hurt the perfomances of the page.
Using passive make the event out of the main thread and updating only when there is an available tick available.
This is Top Tier UA-cam Content. Thank you Kyle!
this video is insanely clear, even to a begginer programmer
To say that it's impressive is really an understatement.
Blew my mind on so many levels!
You are incredibly clear and straight to the point. I wish everyone was like you. Amazing coder too
This helped me finish a project i was stuck! Thanks a lot man
Incredibly talented
Bim. Well done! Looks so simple lol
This is interesting and I am glad you have done the video. But as a visitor to a non-animated website, I've never thought, I wish there were some animations.
¡Gracias!
¡De Nada!
Incredible teacher, awesome tutorial, thank you 👏
Fantastic 😊 would love to see a similar explanation of how some of the Apple scroll animations are done in 2024 and not using 4-5 years ago code.
Now first I will try to make it and then I will see your video , I got the idea how website work. Now let's go 😁
So cool! Sometimes I enter those sites like ´One Page Love´ and I get completely lost about some of the effects I see there (and I dont even mention Awwwards). It would be cool if you posted more real world examples like this.
doing this in CSS is some skill. Respect Sir!
nice. more scroll animations please :). Essential part of modern website building toolkit.
Stack cards on page scroll using css sticky and javascript 2023 #part 1
ua-cam.com/video/D9L3qRi2dc8/v-deo.html
Try this
Please do more in-depth website analysis like this
Amazing tutorial
You are an awesome teacher. You make excellent videos and I love your personality. Keep up the good work.
Thank You. Excellent. Please do more videos like this one. 😀
Thank you for making this amazing video. This is exactly what I'm looking for. God bless you.
would be great ti this tutorial revisited with the new view timeline API
Freaking top video Kyle. I don’t say this lightly.
Brilliant!
I'm just thinking I can design any moving containers this way 💡 it's nothing new but this logical page looks really nice, plus a step by step walkthrough of the changes
So awesome!
This was truly masterful
Is there more detailed explanation of the (oldVal - oldMin) * newRange / oldRange + newMin formula?
thanks Kyle as always 👍
how to create mini map in CSS like vscode, can you make video on this topic please?
The site is cool but from a UX perspective is a complete mess lol.
Even as an experienced inernet user it confused me hard.
I've learnt something new 😊
Any idea to get rid of a problem? The counter doesnt work, if the page height is set to a vh value - and to keep vh is critical for the website
I think that you forgot to add the link to the intersection observer vídeo at 31:28
So cool! And perfect
please post any videos about tailwind
thank you so much you nailed it ..... but i ty use css without js....its kinda hird to achieve smooth animation onscroll simly with css especially the scroll back effect ..... i see you implemented a feature from scratch this feature is also available on react/spring it is calles parallax and it is truly amazing because its also frustrating to have smooth animations with tge scroll progress just between 0 and 100% for all the pages .... it is a nice a approach to have 100% per each page it could even allow you to set the speed of the page increasing the heigh of the page or its distance from tge previous page if its going to have 100vh
reallly nnaaailed it by setting only the scroll variable in js on resize and on scroll and using in css so it could perform tge calculations automatically when the scroll changes .....
it is truly amazing because if evrything is imlemented from js it becomes a tittle bit unmaintanable ......BUT it is still limited if we may wanna position all tge elements with a fixed position while respecting the minimum aspect ratio ..... because we may need to use conditions and i'm wondering could css use conditions ???? like the calc function could it have conditions
Man, Thank you
It's impressive that you can do all that in mostly CSS, and I think it's good how you explained your thought process rather than just giving the code. But, as a user, I feel I'd just be SO confused by a site like this. You go to it and expect to scroll down normally, but all this distracting stuff happens. It's hard to know what are images or what is interactable UI, and the text that apparently goes with each image is often hidden behind it. As a user, I'd find a normally scrolling article-style site much more readable. 🤷
Sometimes I feel like we are regressing back to the early days when every site seemed to want to have so much animation that the user could not navigate the page. Life really is cyclical. 😞
@@CWhitmer22015 yep! I want to stay in with the design trends but sometimes I feel they're a bit too much. Especially when trying to make a website accessable for everyone!
are that is parallax effect?
It's impressive, but please, PLEASE don't hijack my scroll wheel. Just let me scroll down the darn page. You shouldn't ever do it for the same reason you shouldn't ever make a website switch your mouse buttons (showing a context menu on left click): Because you should not change the baseline of how a user's input works, unless of course you want to be abnoxious to the max.
Agreed. Even for landing pages. It just messes with the user experience and makes it tricky to navigate.
A client may even appreciate the visual flair, but they won't appreciate the way it handicaps their conversion rate.
If you're just trying to make other developers hard with your CSS skills, though, then go for it.
Great content! I have a question though. How did you come up with that formula?
Google "linear interpolation".
It's just a formula to find x is what % of given number.
Better solution: GSAP or this?😊
If you code something from scratch, which has backend/frontend.
How you check for vulnerabilities? is there some site or tool for that?
I want to code lots of stuff (mainly for myself) but afraid to make public, maybe its full of holes.
can you create a video on htmx
If I have 4 or 5 or more section of content, should I let the scroll limit to 200, 300?
I've tried your code but it seems to lose the ability to change images if you refresh the page. Maybe its because the listener is set to window and not document? I'm not sure.
Can you tell me how to do the same thing in react
Netlify's landing page website also have this scroll animation, I'm trying to break it down and work on it, but I left no time, but at least this cidei came out! 😁✌👍
Interesting, but I don't like it when sites do this over the top animation :-) (This and the side scrolling ... like on netflix)
Next Shourts on JS valueOf () vs toString() ?
Hey Great video , but I am really curious how you deduced the formula for the parallax effect ???
Google "linear interpolation" (that's what that formula is; I wish he had mentioned that).
how can i do this in sveltekit pleaseeee helpppp
Hey Web Dev Simplified, can you do carousel mouse drag to slide (but item number is unkown) and items are clickable but now when you grap? I tried many packages like motion and did not achive what i want.
This css wont pass a css validator though. You probably still need to go about this with js if you want to use it for a real website. Unless im missing something and theres a way to make it pass the validator?
Is this code under MIT license? Are we allowed to use it? I noticed the package is available on Github but there is no notice about the license.
You are welcome to use the code as you see fit. I cannot add a license, though, as the images themselves are not owned by me.
apart from the images though?@@WebDevSimplified
Why don't we encourage padding-inline-start instead of padding-left?
This video made me realise how terrible my math comprehension is 😆
How to make one navigation bar code for multiple pages? Please help me :(
Create a layout
There is also a library called aos which can help you do some simple animate on scrolls really easily
i though you were focusing on ur react course
Dude redeveloped ScrollMagic and Gsap
Dope
Coool!
First time I've seen a clickbait title and thumbnail from WDS. At least the video delivered on it 😂
what's so clickbait about the title & thumbnail?
How’s it clickbait if the video delivered it? 🤔
Kyle always delivers 🎉
@@deepeshchhetri850 There's clickbait, and then there's misleading clickbait.
If the video delivers, it's not misleading, but that doesn't mean it wasn't clickbait.
Personally.. why would anybody even want all that crap scrolling on the page.. while scrolling!? It's actually visually annoying!
yeah i think its hella annoying
exactly
Myself, I find it visually gratifying
Can you help us to build a referral program using express . Users should have the ability to share the links to other platforms that my program can track
Sure, I could help you out
10:37 The JS needs a minor refactor, no reason to run the code of setProroperty again if already 100.
Very nice though what you did.
you cloud make this pure css with scroll timeline
and provides the code. just built my website in 30 minutes 😊
Nice
My thought process: F12
Meanwhile I still figuring out how to center a div with css
it looks complicated but when you explain it its kinda easy to understand
Good God please don't ever push this project to a production site.
Isnt this kind of animation very confusing for normal users?
not really. this is for marketing not for a user interface lol
hey i have question. i have an account on ure personnal site and i want to share the content (CSS) i buy with the member of my family ? Do i have the right to do that ? thanks
Of course you can. I hope they enjoy the course too.
@@WebDevSimplified thank you very much for the quick answer ^^
perfect!
Would love to see kinda animation recreated in tailwind css
Me too.
same like css but with class="[some css code here]"
wow! it's gonna be janky, jittery and stutteryon Mobile.
number slot machine animation? 999,999 🤔 each digit needs to be animated to count up or count down to the final number -> 123,000
Just 100 lines code?😀. AI has made me too lazy
Yaaru saami nee?🤷
now mobile version
create a video on open source .
I think this is a horrible website. I feel stress using it. Its just too much, straight into my face with this big white "screenshot" comming up. Info.. I'm 32 and a webdevloper, not 70 or so..
first
Good job bro, JESUS IS COMING BACK VERY SOON;WATCH AND PREPARE
There is no reason to put animations everywhere just b3cause you know how. That is the shittiest web page I’ve seen since my first web page on Netscape navigator in the 1990s
its a training webpage, how you could implement different elements - smartass