App Showcase Like Google Calendar

Hi guys, I'm back again. After yesterdays great succes with my "div follow cursor" thread I now need something else from you peeps.

I am now having to work on an app showcase and I found a nice little effect to use. Only problem is (again). I have no clue what to do...

The website this time is google's calendar website, here: google.com/calendar/about

I'm looking to use the effect of the mobile screens changing while you scroll. Now, I've downloaded the website via HTTrack and looked at all of the files in sublime, but I can't find anything usefull that I could borrow (I mean steal ofcourse).

My question is...Would anyone be so kind to make me the same kind of effect in JS? Being able to both scroll vertically and horizontally?

I hope so! Thank you

 

I found this code somewhere and placed a fixed cell phone image over it. If you're going to use a different image, make sure it has a transparent screen (.png or .gif):

http://jsfiddle.net/WTkqn/390/

It's not scrolling the way it does on that Google page, but still.

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

<style type="text/css">
.new_container {
width: 250px;
margin: 0px auto;
}
.overlay {
position: fixed;
z-index: 9999;
}
.hidden {
position: absolute;
top: -9999999px;
}
#bottommark {
position: absolute;
bottom: 0;
}
#animation {
background-repeat: no-repeat;
position : fixed;
top: 0;
width: 220px;
height: 450px;
margin: 15px;
z-index: 100;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
var offset2 = $(document).height();
var lineHF = offset2 - $("#bottommark").position().top;
$(window).scroll(function(){
var offset1 = $(document).height();
var offset = $(window).scrollTop();
var lineH = offset1 - $("#bottommark").position().top - offset;
var lineHpart = lineHF/5;
$("span").html(lineH);
if (lineH > lineHpart*4) {
$("#animation").attr("src", "http://67.media.tumblr.com/9e99ad428cf5d97daeffa75ee2023c89/tumblr_mpdzgtw9YN1qij426o1_500.png");
}
if ((lineH < lineHpart*4) && (lineH > lineHpart*3)) {
$("#animation").attr("src", "http://s2.favim.com/610/150603/beautiful-grunge-nature-photo-Favim.com-2788083.jpg");
}
if ((lineH < lineHpart*3) && (lineH > lineHpart*2)) {
$("#animation").attr("src", "http://67.media.tumblr.com/b23de1e0525625cd7327930bcdcd911a/tumblr_mrqq99vYIH1r83s39o1_500.jpg");
}
if (lineH < lineHpart*2 && lineH > lineHpart*1) {
$("#animation").attr("src", "http://67.media.tumblr.com/5d85d43cbcdd87a71ea90ab9e0f74202/tumblr_navwxb40s11tfa1gho1_1280.png");
}
if (lineH < lineHpart) {
$("#animation").attr("src", "http://41.media.tumblr.com/d489d89032f6419db96b938c8ecc448d/tumblr_n9ap5biSYa1qmy9exo1_500.jpg");
}
});
});
});//]]>
</script>

<div class="new_container">
<img src="http://www.mobile-pond.com/MobilePond/wp-content/uploads/2011/09/iPhone_overlay.png" class="overlay">
<img class="hidden" src="http://67.media.tumblr.com/9e99ad428cf5d97daeffa75ee2023c89/tumblr_mpdzgtw9YN1qij426o1_500.png"/>
<img class="hidden" src="http://s2.favim.com/610/150603/beautiful-grunge-nature-photo-Favim.com-2788083.jpg"/>
<img class="hidden" src="http://67.media.tumblr.com/b23de1e0525625cd7327930bcdcd911a/tumblr_mrqq99vYIH1r83s39o1_500.jpg"/>
<img class="hidden" src="http://67.media.tumblr.com/5d85d43cbcdd87a71ea90ab9e0f74202/tumblr_navwxb40s11tfa1gho1_1280.png"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg"/>
<img src="http://41.media.tumblr.com/d489d89032f6419db96b938c8ecc448d/tumblr_n9ap5biSYa1qmy9exo1_500.jpg" id="animation" />
<div id="bottommark"></div>
</div>

Code (markup):