How can I recreate this website scrolling effect?
July 19, 2015 7:36 AM Subscribe
What do you call the scrolling effect on this webpage? How do I implement it?
I know it involves javascript ;) But I'm not great at much beyond HTML/CSS. So far I just haven't been able to google this because "slider" etc are generic terms and I was wondering if there was a more common name. I have looked at the source code at the webpage linked above, but I'm hoping for a much more minimal demo somewhere where I can really see what's going on. Thanks for any tips!
I know it involves javascript ;) But I'm not great at much beyond HTML/CSS. So far I just haven't been able to google this because "slider" etc are generic terms and I was wondering if there was a more common name. I have looked at the source code at the webpage linked above, but I'm hoping for a much more minimal demo somewhere where I can really see what's going on. Thanks for any tips!
here's a link discussing various libraries.
oh. i thought you were talking about the "immersive story" part, rather than "just" the parallax effect.
snow fall is the big example (snow fall).
posted by andrewcooke at 7:46 AM on July 19, 2015
oh. i thought you were talking about the "immersive story" part, rather than "just" the parallax effect.
snow fall is the big example (snow fall).
posted by andrewcooke at 7:46 AM on July 19, 2015
Response by poster: I've seen parallax, but I mostly associate that with panels that move at different speeds like a video game.
To clarify, I don't want that, I want the panels to fade in beneath the preceding one when you get to the end, like in the example.
posted by deern the headlice at 7:48 AM on July 19, 2015
To clarify, I don't want that, I want the panels to fade in beneath the preceding one when you get to the end, like in the example.
posted by deern the headlice at 7:48 AM on July 19, 2015
I'm not sure how to implement it from scratch, but HTML5 Up's Big Picture template has this same effect.
Ah, just saw your comment. It doesn't recreate the fade-in effect.
posted by lunch at 7:57 AM on July 19, 2015 [1 favorite]
Ah, just saw your comment. It doesn't recreate the fade-in effect.
posted by lunch at 7:57 AM on July 19, 2015 [1 favorite]
Basically anything with any scroll effects on the web seems to be called parallax.
There are a number of libraries which do various effects. Skrollr seems pretty capable, and should let you do it mostly in HTML/CSS (with some data-* attributes). Basically you include the library and then set attributes on the HTML elements that define their behavior at various scroll depths. If you google "skrollr" you will find some examples and tutorials.
posted by bjrn at 8:35 AM on July 19, 2015
There are a number of libraries which do various effects. Skrollr seems pretty capable, and should let you do it mostly in HTML/CSS (with some data-* attributes). Basically you include the library and then set attributes on the HTML elements that define their behavior at various scroll depths. If you google "skrollr" you will find some examples and tutorials.
posted by bjrn at 8:35 AM on July 19, 2015
Best answer: That site is on the list of "made with Readymag" examples, so it may be from one of their templates, or it may not, since it looks like they allow users to use their own as well.
posted by sageleaf at 10:06 AM on July 19, 2015
posted by sageleaf at 10:06 AM on July 19, 2015
Response by poster: Ahhh ;) That might explain it.
posted by deern the headlice at 10:20 AM on July 19, 2015
posted by deern the headlice at 10:20 AM on July 19, 2015
« Older From Reykjavik to Rome: Complicated Itineraries... | Literature with a hook for a science class? Newer »
This thread is closed to new comments.
posted by AzraelBrown at 7:45 AM on July 19, 2015