Hi,
I was wondering, how does the scrolling and transitioning to viewing single pages and back work here? It is so simple yet elegant. https://stevejobsarchive.com/
Hi,
I was wondering, how does the scrolling and transitioning to viewing single pages and back work here? It is so simple yet elegant. https://stevejobsarchive.com/
At first glance, it is just a clever use of CSS animations. When you click on a topic to learn more, the “modal” fades in where the opacity animates from 0 to 1
What about the scroll parrallex effect from the top to the articles. Perhaps something like this with css animations Create parallax scrolling effect with vanilla Javascript - DEV Community
I guess its a combination of parallax and css animations
What parallax in particular? Maybe I am missing something
If you can attach a screen capture, that would help!
When you scroll down at first, the icon text fades out and the first email cover scrolls up in a nice way until you can see the content below it
Ah it is using position: Sticky to replicate a nice effect. This site is so beautiful yet simple. What an elegant design
@kirupa how can you create so smooth transitions here https://mikematas.com/
He designed the Steve jobs archive site mentioned above. This might be what he is using Documentation | Framer for Developers
A tool like Framer or Webflow can simplify a lot of this! In looking at the source code and inspecting in the dev tools, it is just a clever use of transforms to bring content into view and to shift content outside of view!
The Steve Jobs Archive is giving out a free ebook.
:: Copyright KIRUPA 2024 //--