Team:Cornell/sandbox

From 2013.igem.org

(Difference between revisions)
Line 18: Line 18:
<style type="text/css">
<style type="text/css">
 +
/* -----------------------------------------
 +
Table of Contents
 +
-----------------------------------------
 +
::iGEM Reset
 +
:: Basic Styles
 +
:: Parallax
 +
*/
 +
/* -----------------------------------------
/* -----------------------------------------
iGEM Reset
iGEM Reset
Line 228: Line 236:
}
}
-
/* -----------------------------------------
+
/* Lists */
-
Lists
+
-
----------------------------------------- */
+
ul, ol { font-size: 14px; line-height: 1.6; margin-bottom: 17px; list-style-position: inside; }
ul, ol { font-size: 14px; line-height: 1.6; margin-bottom: 17px; list-style-position: inside; }
Line 266: Line 272:
-
/* -----------------------------------------
+
/* Misc */
-
Misc
+
-
----------------------------------------- */
+
.left { float: left; }
.left { float: left; }
.right { float: right; }
.right { float: right; }
Line 300: Line 304:
.off-canvas {
.off-canvas {
width: 100%;
width: 100%;
 +
}
 +
 +
/* -----------------------------------------
 +
Parallax
 +
----------------------------------------- */
 +
.section {       
 +
width:540px; height:500px;
 +
                  background:url("https://static.igem.org/mediawiki/igem.org/6/67/IGEMsmall.png") no-repeat #000;
 +
}
 +
.section .inner {
 +
width:540px; height:500px;
 +
                  background:url("http://hotdot.pro/static/img/mainPage/intro/4.png") no-repeat;
}
}
</style>
</style>
 +
<script type="text/javascript">
 +
// The plugin code
 +
(function($){
 +
    $.fn.parallax = function(options){
 +
        var $$ = $(this);
 +
        offset = $$.offset();
 +
        var defaults = {
 +
            "start": 0,
 +
            "stop": offset.top + $$.height(),
 +
            "coeff": 0.95
 +
        };
 +
        var opts = $.extend(defaults, options);
 +
        return this.each(function(){
 +
            $(window).bind('scroll', function() {
 +
                windowTop = $(window).scrollTop();
 +
                if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
 +
                    newCoord = windowTop * opts.coeff;
 +
                    $$.css({
 +
                        "background-position": "0 "+ newCoord + "px"
 +
                    });
 +
                }
 +
            });
 +
        });
 +
    };
 +
})(jQuery);
 +
 +
// call the plugin
 +
$('.section').parallax({ "coeff":-0.65 });
 +
$('.section .inner').parallax({ "coeff":1.15 });
 +
</script>
</head>
</head>
 +
<body>
<body>
<div class="content">
<div class="content">
<h1> Whee </h1>
<h1> Whee </h1>
-
<h2> Whoo </h2>
+
<div class="section">
-
<h3> Whu </h3>
+
<div class="inner">
-
<h4> Wha </h4>
+
-
<h5> Why </h5>
+
</div>
-
<h6> Whi </h6>
+
</div>
-
<div> Hi </div>
+
-
<p> Paragraph </p>
+
-
<a href="">Link</a>
+
-
<ul>
+
-
<li> list </li>
+
-
<li> still a list </li>
+
-
<ul>
+
</div>
</div>
<div id="navbar">
<div id="navbar">

Revision as of 02:15, 24 December 2013

Parallax Test

Whee

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