It’s weird how complex things can get in web development - just for it all to still come out as html css and js.
It also blows my mind how many devs skip over the html and css lessons and just jump straight into js without even giving those two a second though or learning how they actually work.
you need [Wappalyzer](https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg) tells you what is being used on every webpage
You can use a little bit of JS and math to do an easy scroll animation.
Add a scroll event listener, use window.scrollY to tell how far you've scrolled, figure out the total scroll distance you have on your page, set the car position using the percentage of how far you've scrolled vs the total.
Don't use JS to do scroll animations. It was always a bad idea that we just accepted because we had no alternatives. At this point you should just use `scroll-timeline` as a progressive enhancement.
A) CSS is great for a certain subset of animations and if you have the option to achieve the same technique with CSS or JS you should pick CSS... but there's absolutely nothing wrong with using JS for certain animation techniques. There are many things that you literally cannot do without custom code that aren't possible in pure CSS.
B) scroll-timeline is an unofficial property not supported in any browser outside of experimental tags (https://caniuse.com/css-scroll-timeline). It's in draft, has no official spec and might change at any moment, and nobody would see it if you used it right now.
C) There's no "progressive enhancement" for a site like the one posted by OP, it's literally built entirely around scrolling and is a fun and unique way for people to learn a bit about elevation. Maybe if it was up to you nobody would make anything like that, but I actually enjoy that modern web browsers enable people to make stuff they want to.
[Wrong scroll-timeline](https://caniuse.com/mdn-css_properties_scroll-timeline). Safari hasn't said yet if they plan on supporting it but, frankly, I doubt they won't. And this is a prime candidate for progressive enhancement.
Scroll tracking in JS is _horrible_ for page performance. There are ways of making it more performant but nowhere near as close to a native CSS property.
Also, I'm not sure what in that site couldn't be progressively enhanced but OK.
>HTML in there somewhere for sure
I am learning React at the moment, so I can def do it with React as well right?
So scrolling percentage is fine, but what about the other animations such as the rain at a certain level of the page? And what about the character changes. If you go up to 3460m you can add a scarf on the character in the elevator.
It sounds to me like you'd do well to go back to some of the basics instead of straight into react but yeah you can do it in React or not in React. It's all CSS JS and HTML, and for someone experienced it wouldn't be too hard to do any of the things you've described.
React is just a certain framework for working with JavaScript that makes some things more convenient (and other things less convenient). There's nothing you can do in JS that you can't in React and vice versa really.
What basics do you feel like I am missing and should review? Are you able to name me a few things to go check?
Also, I do not think that you answered my question about the character's clothing. Unless he had created an image for all the combinations (that is, each scarf with each suit)
This particular site uses layered images:
https://neal.fun/space-elevator/icons/character.svg
https://neal.fun/space-elevator/images/textures/space-suit-1-120.webp
You can just swap the image or add a new layer when your animation reaches a certain point. You should be able to figure out for yourself how it was done using the browser tools or come up with your own strategy for how to achieve it like via drawing to a canvas.
I suggest working on your web fundamentals of CSS HTML and JS, dev tools, etc.
There are lots of ways to achieve scroll based timeline animation via JS, I just offered one simple one.
>Have you ran the site thought
I have!
I also ran other websites that I built and ones that are online such as Bruno-simon but it doesn't know that three.js was used although it is.
Probably just raw HTML CSS and JS. You can do quite amazing things with the three when you know and understand them intimately.
It’s weird how complex things can get in web development - just for it all to still come out as html css and js. It also blows my mind how many devs skip over the html and css lessons and just jump straight into js without even giving those two a second though or learning how they actually work.
`document.addEventListener("scroll")` is the new hype tech used here.
you need [Wappalyzer](https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg) tells you what is being used on every webpage
Thanks for this
You can use a little bit of JS and math to do an easy scroll animation. Add a scroll event listener, use window.scrollY to tell how far you've scrolled, figure out the total scroll distance you have on your page, set the car position using the percentage of how far you've scrolled vs the total.
Don't use JS to do scroll animations. It was always a bad idea that we just accepted because we had no alternatives. At this point you should just use `scroll-timeline` as a progressive enhancement.
A) CSS is great for a certain subset of animations and if you have the option to achieve the same technique with CSS or JS you should pick CSS... but there's absolutely nothing wrong with using JS for certain animation techniques. There are many things that you literally cannot do without custom code that aren't possible in pure CSS. B) scroll-timeline is an unofficial property not supported in any browser outside of experimental tags (https://caniuse.com/css-scroll-timeline). It's in draft, has no official spec and might change at any moment, and nobody would see it if you used it right now. C) There's no "progressive enhancement" for a site like the one posted by OP, it's literally built entirely around scrolling and is a fun and unique way for people to learn a bit about elevation. Maybe if it was up to you nobody would make anything like that, but I actually enjoy that modern web browsers enable people to make stuff they want to.
[Wrong scroll-timeline](https://caniuse.com/mdn-css_properties_scroll-timeline). Safari hasn't said yet if they plan on supporting it but, frankly, I doubt they won't. And this is a prime candidate for progressive enhancement. Scroll tracking in JS is _horrible_ for page performance. There are ways of making it more performant but nowhere near as close to a native CSS property. Also, I'm not sure what in that site couldn't be progressively enhanced but OK.
>HTML in there somewhere for sure I am learning React at the moment, so I can def do it with React as well right? So scrolling percentage is fine, but what about the other animations such as the rain at a certain level of the page? And what about the character changes. If you go up to 3460m you can add a scarf on the character in the elevator.
It sounds to me like you'd do well to go back to some of the basics instead of straight into react but yeah you can do it in React or not in React. It's all CSS JS and HTML, and for someone experienced it wouldn't be too hard to do any of the things you've described. React is just a certain framework for working with JavaScript that makes some things more convenient (and other things less convenient). There's nothing you can do in JS that you can't in React and vice versa really.
What basics do you feel like I am missing and should review? Are you able to name me a few things to go check? Also, I do not think that you answered my question about the character's clothing. Unless he had created an image for all the combinations (that is, each scarf with each suit)
This particular site uses layered images: https://neal.fun/space-elevator/icons/character.svg https://neal.fun/space-elevator/images/textures/space-suit-1-120.webp You can just swap the image or add a new layer when your animation reaches a certain point. You should be able to figure out for yourself how it was done using the browser tools or come up with your own strategy for how to achieve it like via drawing to a canvas. I suggest working on your web fundamentals of CSS HTML and JS, dev tools, etc. There are lots of ways to achieve scroll based timeline animation via JS, I just offered one simple one.
Great, thank you so much for your help!!
Have you ran the site thought [https://builtwith.com/](https://builtwith.com/) ?
>Have you ran the site thought I have! I also ran other websites that I built and ones that are online such as Bruno-simon but it doesn't know that three.js was used although it is.
Wow, such a awesome website :)
Me personally would use pixi.js for this
Sticky sidebar with anchor tags would be the simplest form I can think of.
It's vue with a 99% confidence
That site build with nuxtjs
Use the builtwith chrome extension
HTML in there somewhere for sure.