How does this neat web effect work?

January 16, 2013 3:48 PM

On the new White House gun violence website, there's an image of the White House that fades out as you scroll down the page. How does it work?
posted by El Sabor Asiatico to Technology (3 answers total)

Best answer: Looks like it's javascript manipulating the opacity.

A little bit of code I found in the source:

function fadeOutText(fadeArea , target){
$(document).scroll(function(e){
var scrollPercent = (fadeArea - $(window).scrollTop()) / fadeArea;
if(scrollPercent >= 0.1){
$(target).css('opacity', scrollPercent);
} else if (scrollPercent < 0.1 ){
$(target).css('opacity','0');
}
});
}

function fadeInText(fadeArea , target){
$(document).scroll(function(e){
var scrollPercent = (100 - (fadeArea - window.scrollY) / fadeArea);
if(scrollPercent >= 0.1){
$(target).css('opacity', scrollPercent);
} else if (scrollPercent < 0.1 ){
$(target).css('opacity','1');
} else if (scrollPercent > 1){
$(target).css('opacity','0.1');
}
});
}

posted by ndfine at 3:55 PM on January 16, 2013 [4 favorites]

Best answer: In Firebug (on Firefox) or by using F12 in Chrome or IE, look for the DIV in the HTML with the classs name "feature-wrap". (to describe it in CSS selector terms: div#page > div.grid-61 > section#content_top > div#node-193271 > div.content > div.feature-wrap) Watch the style attribute: The opacity will change as you scroll -- the Javascript that ndfine pasted above does the actual manipulation.

There are actually a few elements that change behaviors as you scroll (for example, the video autoplays only when it's in view). Most of it's fairly simple, it's all quite elegantly done.
posted by ardgedee at 4:01 PM on January 16, 2013 [1 favorite]

Best answer: Intrigued by your question, I pulled together my own version of the effect, and wrote it up as a tutorial on my blog: I hope it might help, El Sabor.

There's a few advantages to my variation (works in responsive designs (the WH version is fixed-width), less complex setup, significantly less code, and it truly treats the image as a background) but one drawback: because the technique integrates CSS3, it will only work in modern browsers.
posted by Bora Horza Gobuchul at 11:05 AM on January 18, 2013 [2 favorites]