What is this image scrolling software?
January 2, 2020 6:03 PM   Subscribe

I have an collage project I'd like to pursue that would require software similar to what I'm assuming was used by Neal Agarwal for his amazing The Deep Sea. The end result would be presented as a web page. What am I looking for?

Like Mr. Agarwal's piece, I'm imagining something that would be viewed via one long (seemingly) endless downward scroll. I've got experience with cut and paste animation so have an idea of how I might do it that way, but I would prefer something that was "driven" by a user's scrolling (ie: they would set the pace etc).
posted by philip-random to Media & Arts (8 answers total) 7 users marked this as a favorite
 
That style of site is "snowfall" named after the NYT article that brought it to the mainstream.
posted by msbutah at 7:12 PM on January 2, 2020 [1 favorite]


Parallax scrolling can be difficult to get to run smoothly. You can do some work with requestAnimationFrame but it's a lot of trial and error.

A gallery of similar sites: 18 stunning parallax scrolling websites
posted by fifteen schnitzengruben is my limit at 7:58 PM on January 2, 2020 [1 favorite]


"Parallax scrolling" and "scrollytelling" are terms for that particular design effect. "Multimedia storytelling," "vertical storytelling," "visual storytelling" and "digital storytelling" are also used to describe this kind of Snowfall-esque projects and could get you closer to some resources.

Most of the major news orgs that do these kinds of things are building them in-house; if you're handy with front-end code, there are frameworks out there that handle scrolling / animation work like this. Note that scrolljacking has a bad reputation for being inaccessible to screen readers.

If you want a webpage building tool instead, I've used Shorthand and really enjoyed it. Pageflow and Exposure are similar and might be able to do what you need.
posted by fifthpocket at 7:29 AM on January 3, 2020


That site, in particular, could be made easily with some HTML and probably pure CSS with some tricks or a few lines of Javascript. I am not sure if you are comfortable with any of these, but if so, essentially that is an HTML site with a bunch of images placed absolutely and a div being updated via the `scroll` event.

It's actually simple enough you could learn to code with it as a project, especially using something like Glitch.

It gets more complex if you are looking for lots of animations, but browsers have come a long way and even that is a lot easier than it used to be.
posted by dame at 9:25 AM on January 3, 2020


Best answer: I'm 99% sure that Neal coded it himself. Inspecting the code (which is all source-mapped and quite easy to read if you have source-maps enabled), it looks like he used React and styled-components under the covers, but it's mostly hand-rolled code. If that last sentence doesn't mean anything to you then I think if you want this, you'd need to either hire someone that knows web programming or spend a lot of time learning HTML, CSS and Javascript. I'm not aware of any off-the-shelf software that makes sites like this with little-to-no coding experience.
posted by Aleyn at 12:32 PM on January 3, 2020 [2 favorites]


there are similar pages on display at One Page Love. I was a graphic design student with minimal instruction in html and CSS, and made my own parallax website. It is not as hard as you would think. OPL has a "templates" section, that offers actual templates and the bootstrap that you can use yourself. You can also google "parallax bootstrap" and find an infinite number of options to work off of.
posted by FirstMateKate at 2:01 PM on January 3, 2020


Adobe Spark can do this
posted by lazaruslong at 2:41 PM on January 5, 2020


Response by poster: thanks all. I marked Aleyn's answer BEST simply because it answered the question I now realize I was asking. Which is, did Neal Agarwal use a readily available (and easy to use) software for his work, or was it something he coded himself, effectively using skills I don't currently have? The answer seems to be the latter.

Which leaves me wondering whether I want to A. "go to school" on all of this and learn some new software tricks, or B. go with my original Plan A which was to achieve what I'm aiming for via a video-editing approach.

Whatever I end up doing, it will probably show up in Projects eventually.
posted by philip-random at 11:48 AM on February 12, 2020


« Older Menopause Eve celebration ideas?   |   How do I figure out Hawaii? Newer »
This thread is closed to new comments.