Team:Cornell/sandbox

From 2013.igem.org

(Difference between revisions)
Line 325: Line 325:
<script type="text/javascript">
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery(document).ready(function($) {
-
//initial values for inner
+
    a=parseFloat(400);// Initial value for the first background (bk 0)
-
a = parseFloat(400);  
+
    b=parseFloat(0);// Initial value for the first background (bk 0)
-
c = parseFloat(400);  
+
    c=parseFloat(400);// Initial value for the second background (bk 1)
-
+
    d=parseFloat(0);// Initial value for the second background (bk 1)
-
//in values for section
+
    var scrollTop = $(window).scrollTop();
-
b = parseFloat(0);  
+
    var scroll_actually= new Array();// Identifies the X and Y values for the background
-
d = parseFloat(0);  
+
-
+
    $(window).scroll(function(){//This is not the cleanest way to do this, I'm just keeping it short.
-
var scrollTop = $(window).scrollTop();
+
        if(scrollTop>$(this).scrollTop()) // Scroll up
-
var scroll-actually = new Array(); //identifies x/y values for background
+
        {
-
+
            if (getScrollTop()<=1600 && getScrollTop()>=0)// Identifies the position for the first background when a scroll event occurs
-
$(window).scroll(function() {
+
            {
-
//scroll up
+
                    a=a+35;// Position for the first background, it decreases in 35 pixels
-
if(scrollTop > $(this).scrollTop()) {
+
                    b=b+10;// Position for the first background, it decreases in 10 pixels
-
//first background
+
                    $('.img_1').css('backgroundPosition', '50% '+a+'px');
-
if(getScrollTop() <= 1600 && getScrollTop() >=0) {
+
                    $('.bk_0').css('backgroundPosition', '0 '+b+'px');
-
a = a + 35;
+
            }
-
b = b + 10;
+
            if (getScrollTop()>=2050 && getScrollTop()<=3650)
-
+
            {
-
$('.1s').css('backgroundPosition', '50% '+a+'px');
+
                    c=c+35;// Position for the second background, it decreases in 35 pixels
-
$('.1i').css('backgroundPosition', '0 '+b+'px');
+
                    d=d+10;// Position for the second background, it decreases in 10 pixels
-
}
+
                    $('.img_2').css('backgroundPosition', '50% '+c+'px');
-
//second background
+
                    $('.bk_1').css('backgroundPosition', '0 '+d+'px');
-
if(getScrollTop() >= 2050 && getScrollTop() <= 3650) {
+
            }
-
c = c + 35;
+
        }
-
d = d + 10;
+
        else
-
+
        {// Scroll down
-
$('.2s').css('backgroundPosition', '50% '+c+'px');
+
            if (getScrollTop()>=0 && getScrollTop()<=1600)
-
$('.2i').css('backgroundPosition', '0 '+d+'px');
+
            {
-
}
+
                  a=a-35;// Position for the first background, it decreases in 35 pixels
-
}
+
                  b=b-10;// Position for the first background, it decreases in 10 pixels
-
//scroll down
+
                  $('.img_1').css('backgroundPosition', '50% '+a+'px');
-
else {
+
                  $('.bk_0').css('backgroundPosition', '0 '+b+'px');
-
//first background
+
            }
-
if(getScrollTop() <= 1600 && getScrollTop() >=0) {
+
                if (getScrollTop()>=2050 && getScrollTop()<=3650)
-
a = a - 35;
+
            {
-
b = b - 10;
+
                  c=c-35;// Position for the second background, it decreases in 35 pixels
-
+
                  d=d-10;// Position for the second background, it decreases in 10 pixels
-
$('.1s').css('backgroundPosition', '50% '+a+'px');
+
                  $('.img_2').css('backgroundPosition', '50% '+c+'px');
-
$('.1i').css('backgroundPosition', '0 '+b+'px');
+
                  $('.bk_1').css('backgroundPosition', '0 '+d+'px');
-
}
+
            }
-
//second background
+
        }
-
if(getScrollTop() >= 2050 && getScrollTop() <= 3650) {
+
        if (getScrollTop()==0)// Adjusts the positions values and resets them to zero during a scroll up event
-
c = c - 35;
+
        {
-
d = d - 10;
+
            a=parseFloat(400);
-
+
            b=parseFloat(0);
-
$('.2s').css('backgroundPosition', '50% '+c+'px');
+
            c=parseFloat(400);
-
$('.2i').css('backgroundPosition', '0 '+d+'px');
+
            d=parseFloat(0);
-
}
+
            $('.bk_0').css('backgroundPosition', '0 0');
-
}
+
            $('.bk_1').css('backgroundPosition', '0 0');
-
+
            $('.img_2').css('backgroundPosition', '50% '+400+'px');
-
//resets to 0
+
            $('.img_1').css('backgroundPosition', '50% '+400+'px');
-
if (getScrollTop() == 0) {
+
        }
-
a = parseFloat(400);  
+
      scrollTop = $(this).scrollTop();
-
c = parseFloat(400);  
+
    });
-
b = parseFloat(0);  
+
});
-
d = parseFloat(0);
+
function getScrollTop(){ //  Verifies the total sum in pixels of the whole page
-
 
+
-
$('.1s').css('backgroundPosition', '0 0');
+
    if(typeof pageYOffset!= 'undefined'){
-
$('.1i').css('backgroundPosition', '0 0');
+
        // Most browsers
-
$('.2s').css('backgroundPosition', '50% '+400+'px');
+
        return pageYOffset;
-
$('.2i').css('backgroundPosition', '50% '+400+'px');
+
    }
-
}
+
    else{
-
}
+
        var B= document.body; //IE 'quirks'
-
}
+
        var D= document.documentElement; //IE with doctype
 +
        D= (D.clientHeight)? D: B;
 +
        return D.scrollTop;
 +
    }
 +
}
 +
- See more at: http://www.webdesignshock.com/one-page-website/#sthash.9JiOGphG.dpuf
</script>
</script>
</head>
</head>
Line 396: Line 401:
<div class="content">
<div class="content">
<h1> Whee </h1>
<h1> Whee </h1>
-
<div class="section 1s">
+
<div class="section bk_0">
-
<div class="inner 1i">
+
<div class="inner img_1">
</div>
</div>
Line 403: Line 408:
<div class="constant">
<div class="constant">
</div>
</div>
-
<div class="section 2s">
+
<div class="section bk_1">
-
<div class="inner 2i">
+
<div class="inner img_2">
</div>
</div>

Revision as of 16:24, 26 December 2013

Parallax Test

Whee

Retrieved from "http://2013.igem.org/Team:Cornell/sandbox"