Difference between revisions of "Team:elan vital korea"
Line 3: | Line 3: | ||
<html> | <html> | ||
− | |||
− | |||
+ | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | ||
+ | <script> | ||
+ | $(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 | ||
− | + | }); | |
− | + | ||
− | + | }); | |
− | + | /* | |
− | + | * Create HTML5 elements for IE's sake | |
− | + | */ | |
− | + | ||
+ | document.createElement("article"); | ||
+ | document.createElement("section"); | ||
+ | </script> | ||
+ | <style> | ||
+ | body{ | ||
+ | margin:0; | ||
+ | padding:0; | ||
} | } | ||
+ | |||
+ | |||
+ | #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%; | ||
+ | max-width: 1920px; | ||
+ | position: relative; | ||
+ | box-shadow: 0 0 50px rgba(0,0,0,0.8); | ||
+ | } | ||
+ | #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%; | ||
+ | max-width: 1920px; | ||
+ | position: relative; | ||
+ | box-shadow: 0 0 50px rgba(0,0,0,0.8); | ||
+ | } | ||
+ | |||
+ | /* Introduction */ | ||
+ | |||
+ | #home article { background: url("#") no-repeat scroll center top transparent; height: 458px; position: absolute; text-indent: -9999px; top: 291px; width: 100%; } | ||
+ | |||
+ | #about article { background: url("#") no-repeat scroll center top transparent; height: 458px; position: absolute; text-indent: -9999px; top: 291px; width: 100%; } | ||
+ | |||
+ | |||
+ | |||
.galleryItem { | .galleryItem { | ||
Line 36: | Line 89: | ||
-moz-border-radius: 5px; | -moz-border-radius: 5px; | ||
border-radius: 5px; | border-radius: 5px; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | .center { | |
− | + | position: absolute; | |
− | + | margin: auto; | |
− | + | top: 0; | |
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | border-radius: 3px; | ||
} | } | ||
− | + | IMG.displayed { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
display: block; | display: block; | ||
margin-left: auto; | margin-left: auto; | ||
− | margin-right: auto | + | margin-right: auto } |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | </style> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | </head> | |
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<body> | <body> | ||
+ | <!-- Section #1 --> | ||
+ | <section id="home" data-speed="10" data-type="background"> | ||
+ | <div class="center;" style="width:800px; margin:0 auto;"> | ||
+ | <a href=#"> | ||
+ | <img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d5/ElanVital_Logo.png"> | ||
+ | </a> | ||
− | < | + | <h4 style="text-align:center;"> |
− | < | + | MEMBERS<br> |
− | + | </h4> | |
+ | <a href="#myAnchor" rel="" id="anchor1" class="anchorLink"><img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d2/Scroll_arrow.png" ></a> | ||
+ | </div> | ||
+ | </section> | ||
+ | <!-- Section #2 --> | ||
+ | <section id="about" data-speed="4" data-type="background"> | ||
<a name="myAnchor" id="myAnchor"></a> | <a name="myAnchor" id="myAnchor"></a> | ||
− | + | <div class="galleryItem"> | |
− | + | <a href="#"> | |
− | + | <img src="https://static.igem.org/mediawiki/2015/a/a1/Young_Chan_Kim.jpg" alt=""> | |
− | + | </a> | |
− | + | <h2>Young Chan Kim</h2> | |
− | + | <p>Lorem ipsum dolor sit amet...</p> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <div class="galleryItem"> | |
<a href="#"><img src="https://static.igem.org/mediawiki/2015/c/c8/Jihoon_Kang.jpg" alt=""></a> | <a href="#"><img src="https://static.igem.org/mediawiki/2015/c/c8/Jihoon_Kang.jpg" alt=""></a> | ||
<h2>Jihoon Kang</h2> | <h2>Jihoon Kang</h2> | ||
<p>Lorem ipsum dolor sit amet...</p> | <p>Lorem ipsum dolor sit amet...</p> | ||
− | + | </div> | |
− | + | <div class="galleryItem"> | |
<a href="#"><img src="https://static.igem.org/mediawiki/2015/8/87/Hyunmin_Park.jpg" alt=""></a> | <a href="#"><img src="https://static.igem.org/mediawiki/2015/8/87/Hyunmin_Park.jpg" alt=""></a> | ||
<h2>Hyunmin Park</h2> | <h2>Hyunmin Park</h2> | ||
<p>Lorem ipsum dolor sit amet...</p> | <p>Lorem ipsum dolor sit amet...</p> | ||
− | + | </div> | |
− | + | <div class="galleryItem"> | |
<a href="#"><img src="https://static.igem.org/mediawiki/2015/3/35/Brittany_Lee.jpg" alt=""></a> | <a href="#"><img src="https://static.igem.org/mediawiki/2015/3/35/Brittany_Lee.jpg" alt=""></a> | ||
<h2>Brittany Lee</h2> | <h2>Brittany Lee</h2> | ||
<p>Lorem ipsum dolor sit amet...</p> | <p>Lorem ipsum dolor sit amet...</p> | ||
− | + | </div> | |
− | + | <div class="galleryItem"> | |
<a href="#"><img src="https://static.igem.org/mediawiki/2015/4/4d/Soojung_Lee.jpg" alt=""></a> | <a href="#"><img src="https://static.igem.org/mediawiki/2015/4/4d/Soojung_Lee.jpg" alt=""></a> | ||
<h2>Soojung Lee</h2> | <h2>Soojung Lee</h2> | ||
<p>Lorem ipsum dolor sit amet...</p> | <p>Lorem ipsum dolor sit amet...</p> | ||
− | + | </div> | |
− | + | <div class="galleryItem"> | |
<a href="#"><img src="https://static.igem.org/mediawiki/2015/f/fd/Seungmeen_choi.jpg" alt=""></a> | <a href="#"><img src="https://static.igem.org/mediawiki/2015/f/fd/Seungmeen_choi.jpg" alt=""></a> | ||
<h2>Seungmeen Choi</h2> | <h2>Seungmeen Choi</h2> | ||
<p>Lorem ipsum dolor sit amet...</p> | <p>Lorem ipsum dolor sit amet...</p> | ||
− | + | </div> | |
− | + | <div class="galleryItem"> | |
<a href="#"><img src="https://static.igem.org/mediawiki/2015/9/9e/Nuri_Choi.jpg" alt=""></a> | <a href="#"><img src="https://static.igem.org/mediawiki/2015/9/9e/Nuri_Choi.jpg" alt=""></a> | ||
<h2>Nuri Choi</h2> | <h2>Nuri Choi</h2> | ||
<p>Lorem ipsum dolor sit amet...</p> | <p>Lorem ipsum dolor sit amet...</p> | ||
− | + | </div> | |
− | + | <div class="galleryItem"> | |
<a href="#"><img src="https://static.igem.org/mediawiki/2015/4/40/Songeun_Lee.jpg" alt=""></a> | <a href="#"><img src="https://static.igem.org/mediawiki/2015/4/40/Songeun_Lee.jpg" alt=""></a> | ||
<h2>Songeun Lee</h2> | <h2>Songeun Lee</h2> | ||
<p>Lorem ipsum dolor sit amet...</p> | <p>Lorem ipsum dolor sit amet...</p> | ||
− | + | </div> | |
− | + | <div class="galleryItem"> | |
<a href="#"><img src="https://static.igem.org/mediawiki/2015/9/97/Suzi_Lee.jpg" alt=""></a> | <a href="#"><img src="https://static.igem.org/mediawiki/2015/9/97/Suzi_Lee.jpg" alt=""></a> | ||
<h2>Suzi Lee</h2> | <h2>Suzi Lee</h2> | ||
<p>Lorem ipsum dolor sit amet...</p> | <p>Lorem ipsum dolor sit amet...</p> | ||
− | + | </div> | |
− | + | </div> | |
− | </ | + | |
− | + | ||
+ | </section> | ||
<script> | <script> | ||
Line 210: | Line 197: | ||
}); | }); | ||
</script> | </script> | ||
+ | |||
+ | </body> | ||
</html> | </html> |
Revision as of 14:28, 31 August 2015