Any Idea How This Is Done?

[Esquire]

I was reading a Daily Beast article on Rick Rubin yesterday and discovered that the webpage reveals pics throughout the article as you scroll down.

Here's the article: Rick Rubin on Crashing Kanye

Start going down through the article and you'll see what I mean about 1/8th of the way through (first pic is w/Rubin & Henry Rollins). There are probably 6-8 pics all throughout the article that reveal themselves that way.

It's a good read in and of itself, but my point of posting here is to ask about how Daily Beast put that site together to reveal pics at certain points in the article as readers scroll. I'm a total noob when it comes to coding, so I always run to wordpress as a first choice, but I doubt such a theme/plugin exists for a page like this.

Does it take a certain web language to put this together? I looked at the source code and can't tell what it is (again - noob here...). Any help/thoughts on how to replicate this for a site of mine or what language would be ideal to create this in would be appreciated.

 

[efeezy]

It appears that the images are set as background, but I have no clue how its done. Cool effect. Great article too.

 

[wouldjaball]

Great article and really cool effect. There's even an Amex ad at the end that has the same effect and can be clicked on.

 

[bosshog]

pretty cool, just inspect the element in chrome and view the css to figure it out.

 

[ayzo]

 

[Brandon]

Great article!

 

[Weeds]

Hey that's parallax, check it out.
A good script I could recommend would be scrollorama.js

 

[Fatbat]

Yes, what he said ^^^. It's parallax scrolling which is all the rage right now. There are quite a few jQuery plugins that you can achieve the effect with...

Stellar.js - Documentation
Cool Kitten: A parallax scrolling responsive framework
http://johnpolacek.github.io/scrolldeck.js/
jQuery.parallax
http://johnpolacek.github.io/scrollorama/
jQuery Parallax
Scrolling Parallax: A jQuery Plugin | Jon Raasch's Blog

and more. Googe "parallax scrolling" "plugin", "tutorial", etc.

 

[Esquire]

Weeds and Fatbat resolved my original question, but I just came across a Rolling Stone article on Aaron Hernandez that has the same format as that Rick Rubin article for anyone who cares.

Link here:

Aaron Hernandez: Patriots Tight End Violent Evolution | Rolling Stone

 

[Mogaz]

The article is a good read. The rolling is indeed parallax scrolling

 

[microphone head]

Weeds and Fatbat resolved my original question, but I just came across a Rolling Stone article on Aaron Hernandez that has the same format as that Rick Rubin article for anyone who cares.

Link here:

Aaron Hernandez: Patriots Tight End Violent Evolution | Rolling Stone

I rather like the flip-gallery class on the right. Works very well indeed!

Time I started playing around with parallax.

 

[jimscott89]

the article is quite good, but
rolling is indeed parallax scrolling

 

[BlvdJeremy]

Wow. The article is really good, that scrolling though is amazing. Really makes the article that much better IMO.

I don't see this too often though, and I am not sure why.

 

[essexboyracer]

MyWay - Parallax Retina Bootstrap Multipurpose Template

 

[shawnhag]

i personalyl dont like it and have heard bad things about it

 

[CCarter]

i personalyl dont like it and have heard bad things about it

From an SEO standpoint it sucks. I personally don't like the one page websites, but I do use parallax designs on individual pages to give it a more modern feel and look. It's one of those things you can over do if not done correctly. You can tell the things that are going to be simply a fade and things that are going to last for awhile. 1 page parallax websites are too gimmicky in my opinion. I think 1 page websites are retarded, and know they will soon fade out like flash only websites did.​