knockoff

19 hours ago, Ingolme said:

I'm not subscribed to the New York Times, so I can't see the articles.

You can start by testing different libraries to see which ones are best suited for your project. Most likely none of them will be perfect but they should be a good starting point. After you have a library you will most likely need to write some additional code yourself or hire someone to do it.

There's a tradeoff between ease-of-use and specialization. If you're satisfied with how a library works out of the box you can just use it as it is. If you want code specialized for your exact use case then you'll need somebody with a minimum level of programming skills. New York Times is a very large company, I would imagine that they've paid developers to code things exactly to their specifications.

Thanks @Ingolme. Sorry I didn't realise the articles were behind a paywall.

I did some stalking and have managed to find the NYT team who produce the reports. They haven't responded (yet - hopefully) but based on their Linkedin profile they are all super specialised in fancy things. One of them posts about WebGL and Github a lot so I guess I have a lot to learn if I want to attempt what they do.

Thanks again for your help. 

I actually started a thread on this in the 'General' channel, but based on the answers I've received I think it might be better in this JS area.

I want to learn how to build parallaxes that involve complicated data visualisations, such as these by the New York Times:

1. https://www.nytimes.com/interactive/2022/05/13/us/covid-deaths-us-one-million.html

2. https://www.nytimes.com/interactive/2020/09/27/us/donald-trump-taxes-timeline.html

I assume they are parallaxes as they are based on the end-user scrolling down the page, but I have had no success in finding how to do/build the data visualisations. I suspect there is a special package or tool or something, but I don't know what to Google. I inspected the code on the sites but I'm not wise enough to pick out any phrases that tell me the answer. 

If anyone can tell me what to search for, I'd really appreciate it.

My thanks in advance.

3 hours ago, Ingolme said:

That's right, it's called parallax. For advanced parallax you need Javascript. The code for parallax can be pretty difficult to build, but this is so commonly used that many people have already written the code and made it open for public use. You can download and use parallax libraries on your website: https://www.google.com/search?client=firefox-b-d&q=js+parallax+library

 @Ingolme - Thanks. Given my rudimentary skills, I was thinking about making this my goal for 2022. Do you know how I can tell which of the parallaxes that NYT article used? I want to learn how to make things like that or this.

42 minutes ago, dsonesuk said:

Depending on the parallax complexity you need, you can also do a simple parallax effect in CSS alone.

@dsonesuk - thanks. I found the W3 How To below (which is only CSS) however I want to do the more complicated fancy things like in the NYT article!

https://www.w3schools.com/howto/howto_css_parallax.asp

After inspecting the page, I have zero idea how NYT create these scrolling images/visuals. Although I'll be honest that I'm very new to this, and I don't know what to inspect beyond the HTML. Can you even inspect Java, assuming this is Java? Does anyone know what the function is called, and whether it can be found on the W3 pages, please? Or at least a basic version I can use to start learning?

Scrolling images: https://www.nytimes.com/interactive/2022/05/13/us/covid-deaths-us-one-million.html

Edit:

I think it has something to do Parallax but I don't know what to search for.