Difference between revisions of "Team:Elan Vital Korea"
| (4 intermediate revisions by one other user not shown) | |||
| Line 7: | Line 7: | ||
<script> | <script> | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
| − | + | // Cache the Window object | |
| − | + | $window = $(window); | |
| − | + | ||
| − | + | $('section[data-type="background"]').each(function(){ | |
| − | + | var $bgobj = $(this); // assigning the object | |
| − | + | ||
| − | + | $(window).scroll(function() { | |
| − | + | ||
| − | + | // Scroll the background at var speed | |
| − | + | // the yPos is a negative value because we're scrolling it UP! | |
| − | + | var yPos = -($window.scrollTop() / $bgobj.data('speed')); | |
| − | + | ||
| − | + | // Put together our final background position | |
| − | + | var coords = '50% '+ yPos + 'px'; | |
| − | + | // Move the background | |
| − | + | $bgobj.css({ backgroundPosition: coords }); | |
| − | + | ||
}); // window scroll Ends | }); // window scroll Ends | ||
| − | + | }); | |
}); | }); | ||
/* | /* | ||
| − | + | * Create HTML5 elements for IE's sake | |
| − | + | */ | |
document.createElement("article"); | document.createElement("article"); | ||
| Line 39: | Line 39: | ||
<style> | <style> | ||
body{ | body{ | ||
| − | + | margin:0; | |
| − | + | padding:0; | |
} | } | ||
#home { | #home { | ||
| − | + | background: url(https://static.igem.org/mediawiki/2015/archive/2/24/20150829203509!ElanVital_Bg.png) 50% 0 no-repeat fixed; | |
| − | + | height: 1000px; | |
| − | + | margin: 0 auto; | |
width: 100%; | width: 100%; | ||
max-width: 1920px; | max-width: 1920px; | ||
| Line 54: | Line 54: | ||
} | } | ||
#about { | #about { | ||
| − | + | background: url(https://static.igem.org/mediawiki/2015/2/28/Elan_Vital_solidbg.JPG) 50% 0 no-repeat fixed; | |
| − | + | height: 1000px; | |
| − | + | margin: 0 auto; | |
width: 100%; | width: 100%; | ||
max-width: 1920px; | max-width: 1920px; | ||
| Line 75: | Line 75: | ||
color: #797478; | color: #797478; | ||
font: 10px/1.5 Verdana, Helvetica, sans-serif; | font: 10px/1.5 Verdana, Helvetica, sans-serif; | ||
| − | float: left; | + | float: left; |
width: 16%; | width: 16%; | ||
margin: 2% 2% 50px 2%; | margin: 2% 2% 50px 2%; | ||
} | } | ||
| − | |||
.galleryItem h2 { | .galleryItem h2 { | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
| − | |||
.galleryItem img { | .galleryItem img { | ||
max-width: 100%; | max-width: 100%; | ||
| Line 94: | Line 92: | ||
.center { | .center { | ||
| − | + | position: absolute; | |
| − | + | margin: auto; | |
| − | + | top: 0; | |
| − | + | right: 0; | |
| − | + | bottom: 0; | |
| − | + | left: 0; | |
| − | + | width: 100px; | |
| − | + | height: 100px; | |
| − | + | border-radius: 3px; | |
} | } | ||
| Line 137: | Line 135: | ||
<body> | <body> | ||
<!-- Section #1 --> | <!-- Section #1 --> | ||
| − | + | <section id="home" data-speed="10" data-type="background"> | |
| − | + | <a href="#"> <img class="igem" src="https://static.igem.org/mediawiki/2015/7/70/IGEM_Logo.gif"></a> | |
| − | + | ||
| − | + | <br> | |
| − | + | <br> | |
| − | + | <br> | |
| − | + | <br> | |
| − | + | <br> | |
| − | + | <br> | |
| − | + | <br> | |
<div class="center;"> | <div class="center;"> | ||
| − | + | <a href="https://2015.igem.org/Team:elan_vital_korea"> | |
| − | + | <img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d5/ElanVital_Logo.png"> | |
| − | + | </a> | |
| − | + | <h4 style="text-align:center;"> | |
| − | + | HOME <br> | |
| − | + | </h4> | |
| − | + | </div> | |
| − | + | </div> | |
</section> | </section> | ||
| Line 162: | Line 160: | ||
$('a').click(function(){ | $('a').click(function(){ | ||
$('html, body').animate({ | $('html, body').animate({ | ||
| − | + | scrollTop: $( $(this).attr('href') ).offset().top | |
}, 500); | }, 500); | ||
return false; | return false; | ||
Latest revision as of 23:10, 18 September 2015
