NY Times Multimeda Article

Michael Wisniewski · October 25th, 2013, 11:14 PM

How did they do this multimedia article on the NY Times?

A Game of Shark and Minnow - Who Will Win Control of the South China Sea? - NYTimes.com

I love they way you can scroll down through article and you get a mix of video, sound, photos and text. (don't use the page links, scrolling is much more interesting). What a great way to tell a story!

David Barnett · October 26th, 2013, 06:47 AM

Very cool. Seems it was done entirely just using HTML5. When you 'scroll' down, the background image or auto-play video changes. The text just floats on top of the images & scrolls along.

Jerry Porter · October 26th, 2013, 07:11 AM

Never mind I thought you were talking about the opening boat ride not the whole piece.

David Barnett · October 27th, 2013, 07:45 PM

To clarify for the OP (I've been meaning to get back to this if no one else had), it looks very similar to a photography portfolio slider, only top to bottom, not left to right. In fact if you look on the right hand side you'll sometimes see the "1 of 3" and "1 of 5" slider buttons on the right side, about halfway down.

Now, realistically it's a very well coded with delicately placed and positioned anchor tags, similar to when you click on the "Contents" section of Wikipedia or something, and it jumps halfway down ( The Rolling Stones - Wikipedia, the free encyclopedia ), however now instead of just having pure text on the page, imagine if Wikipedia had photos, and as you scrolled down each photo floating text scrolled by you, until you reached the next anchor tag, causing the photo to flip to the next one. Now, it isn't all photos, some are autoplay videos which probably last 5-10 seconds as a background image.

That's purely laymans terms, lol, and the website is quite an undertaking & must have taken teams of developers to create. I'm not sure if they do these style articles often, or if this one was the prototype, but I'm sure whenever it was initially done it was done as a future of the paper & magazines website in mind. Reinventing media if you will.

Ervin Farkas · November 25th, 2013, 10:40 PM

Here is another example: Smart lens | QX10 | QX100 | Sony

Mathieu Ghekiere · December 5th, 2013, 06:16 AM

This one I think it also very clean, and has a great design, with all the white:

NSA files decoded: Edward Snowden's surveillance revelations explained | World news | theguardian.com

October 25th, 2013, 11:14 PM	#1
Michael Wisniewski Wrangler Join Date: Jul 2002 Location: Makati, Metro Manila Posts: 2,706 Images: 32	NY Times Multimeda Article - How did they do this? How did they do this multimedia article on the NY Times? A Game of Shark and Minnow - Who Will Win Control of the South China Sea? - NYTimes.com I love they way you can scroll down through article and you get a mix of video, sound, photos and text. (don't use the page links, scrolling is much more interesting). What a great way to tell a story! __________________ "Ultimately, the most extraordinary thing, in a frame, is a human being." - Martin Scorsese

October 26th, 2013, 06:47 AM	#2
David Barnett Major Player Join Date: Apr 2009 Location: Philly, PA Posts: 951	Re: NY Times Multimeda Article - How did they do this? Very cool. Seems it was done entirely just using HTML5. When you 'scroll' down, the background image or auto-play video changes. The text just floats on top of the images & scrolls along.

October 26th, 2013, 07:11 AM	#3
Jerry Porter Major Player Join Date: Aug 2005 Location: Satellite Beach, Fl Posts: 784	Re: NY Times Multimeda Article - How did they do this? Never mind I thought you were talking about the opening boat ride not the whole piece.

October 27th, 2013, 07:45 PM	#4
David Barnett Major Player Join Date: Apr 2009 Location: Philly, PA Posts: 951	Re: NY Times Multimeda Article - How did they do this? To clarify for the OP (I've been meaning to get back to this if no one else had), it looks very similar to a photography portfolio slider, only top to bottom, not left to right. In fact if you look on the right hand side you'll sometimes see the "1 of 3" and "1 of 5" slider buttons on the right side, about halfway down. Now, realistically it's a very well coded with delicately placed and positioned anchor tags, similar to when you click on the "Contents" section of Wikipedia or something, and it jumps halfway down ( The Rolling Stones - Wikipedia, the free encyclopedia ), however now instead of just having pure text on the page, imagine if Wikipedia had photos, and as you scrolled down each photo floating text scrolled by you, until you reached the next anchor tag, causing the photo to flip to the next one. Now, it isn't all photos, some are autoplay videos which probably last 5-10 seconds as a background image. That's purely laymans terms, lol, and the website is quite an undertaking & must have taken teams of developers to create. I'm not sure if they do these style articles often, or if this one was the prototype, but I'm sure whenever it was initially done it was done as a future of the paper & magazines website in mind. Reinventing media if you will.

November 25th, 2013, 10:40 PM	#5
Ervin Farkas Inner Circle Join Date: Aug 2005 Location: Atlanta/USA Posts: 2,515	Re: NY Times Multimeda Article - How did they do this? Here is another example: Smart lens \| QX10 \| QX100 \| Sony __________________ Ervin Farkas www.AtlantaLegalVideo.com

December 5th, 2013, 06:16 AM	#6
Mathieu Ghekiere Inner Circle Join Date: Jun 2004 Location: Belgium Posts: 2,195	Re: NY Times Multimeda Article - How did they do this? This one I think it also very clean, and has a great design, with all the white: NSA files decoded: Edward Snowden's surveillance revelations explained \| World news \| theguardian.com __________________ http://productionsofthe3rdkind.com http://pr3k.com