What was this cool website effect?
June 4, 2015 2:00 AM Subscribe
A few months ago, I was reading some long-form news article (that I probably found here) and I really liked the mechanics of how the site was displayed as you read it. Unfortunately, I have no idea where the site was or even what the story was about. Hopefully, y'all can help. Description and specific questions inside.
As you scrolled down the page, whenever there was an image (which were large and may or may not have been chapter/section headings) the image would be blurry until it was completely displayed on the screen. It would kind of fade into focus, so it would start out very blurry and be completely clear by the time the bottom of the image entered the screen. Then, when the image reached the top of the screen, it would stop there and the rest of the text would slide up over the image.
It was nice because my eye will often jump down to the big pictures and captions, interrupting whatever I was reading and the blurry effect stopped this. And the text slide-up thing was nice, too. I think they may have been chapter/section breaks, because I think the sliding text would then leave the section title (that had been at the bottom of the image?) as a section header.
Two questions: 1. Do these effects have names? 2. Can you point me to examples of sites that use these effects?
Thanks!
As you scrolled down the page, whenever there was an image (which were large and may or may not have been chapter/section headings) the image would be blurry until it was completely displayed on the screen. It would kind of fade into focus, so it would start out very blurry and be completely clear by the time the bottom of the image entered the screen. Then, when the image reached the top of the screen, it would stop there and the rest of the text would slide up over the image.
It was nice because my eye will often jump down to the big pictures and captions, interrupting whatever I was reading and the blurry effect stopped this. And the text slide-up thing was nice, too. I think they may have been chapter/section breaks, because I think the sliding text would then leave the section title (that had been at the bottom of the image?) as a section header.
Two questions: 1. Do these effects have names? 2. Can you point me to examples of sites that use these effects?
Thanks!
Snow Fall did something like what you're looking for, I think
posted by Zonker at 3:29 AM on June 4, 2015
posted by Zonker at 3:29 AM on June 4, 2015
Here's a code example for the image blurring.
posted by beyond_pink at 6:10 AM on June 4, 2015 [2 favorites]
posted by beyond_pink at 6:10 AM on June 4, 2015 [2 favorites]
If the Snow Fall article linked above is what you're talking about, I think I've seen this a few other times on the NY Times site recently.
posted by three_red_balloons at 6:36 AM on June 4, 2015
posted by three_red_balloons at 6:36 AM on June 4, 2015
Best answer: So the default mechanism for doing this is Waypoints which allows you trigger events based on scroll positions. What that effect is (such as blurring the image) is up to you.
Parallax effects are something that can be implemented using waypoints but a Parallax effect means moving the background at a slower rate than the foreground.
CSS3 allows you to blur an image at varying degrees
Between those CSS3 filters and setting various waypoints (or starting videos, or looped animations) as the user scrolls you can pretty easily get something that does what Snow Fall does.
posted by bitdamaged at 9:03 AM on June 4, 2015
Parallax effects are something that can be implemented using waypoints but a Parallax effect means moving the background at a slower rate than the foreground.
CSS3 allows you to blur an image at varying degrees
Between those CSS3 filters and setting various waypoints (or starting videos, or looped animations) as the user scrolls you can pretty easily get something that does what Snow Fall does.
posted by bitdamaged at 9:03 AM on June 4, 2015
That Waypoints library is not the default mechanism for scroll events -- it's just a library for dealing with scroll events, like Bootstrap's ScrollSpy, etc. Scroll events are native to the DOM Level 3 spec.
posted by ludwig_van at 12:18 PM on June 4, 2015
posted by ludwig_van at 12:18 PM on June 4, 2015
This thread is closed to new comments.
posted by Mrs. Rattery at 2:53 AM on June 4, 2015 [1 favorite]