Scroll animated background

wip

by sach_a

HTML

<div class="background">
<div class="bird"></div>
<div class="text"><span>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet consequentia<br>a posse ad esse non valet...

CSS

html, body{
    height:100%;
    min-height:100%;
    margin:0;
    padding:0;
}
.text { text-align:center; text-shadow: 0px 0px 1px #303030;}
.bird { width:100%;height:100%;background: url(http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/glossy-black-icons-animals/012556-glossy-black-icon-animals-animal-bird.png) no-repeat fixed 0 0;display:none; }
.background{
    width:100%;
    height:100%;
    background: #fff url(https://lh3.googleusercontent.com/XZBsV-GzAHAQzMoZyGrKNtCMmEvOFFbTb6WaWsXTM6-sjhtW0ySW_sTcc5BiaLJVSp9BTv8nlQGgHhUU5Dzbj-sL0_NaYmugfDFrEA=w2114-h1058-n) no-repeat fixed 0 0; 
    overflow:auto;
}

JavaScript

$('.background').scroll(function(){
var x = $(this).scrollTop();
$(this).css('background-position','0% '+parseInt(-x/5)+'px');
});

$('.bird').scroll(function(){
var y = $(this).scrollTop();
$(this).css('background-position','0% '+parseInt(-y/1)+'px');
});