Team:TP CC-SanDiego/TheTeam.html
From 2014hs.igem.org
(Difference between revisions)
Blackbean1 (Talk | contribs) |
Blackbean1 (Talk | contribs) |
||
Line 1: | Line 1: | ||
- | + | ||
<html lang="en"> | <html lang="en"> | ||
+ | <meta charset="utf-8"> | ||
+ | <title>iGEM San Diego</title> | ||
+ | <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> | ||
+ | <script> | ||
+ | $(function() { | ||
+ | $('a[href*=#]:not([href=#])').click(function() { | ||
+ | if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { | ||
+ | var target = $(this.hash); | ||
+ | target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); | ||
+ | if (target.length) { | ||
+ | $('html,body').animate({ | ||
+ | scrollTop: target.offset().top | ||
+ | }, 1000); | ||
+ | return false; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <!--<script> | ||
+ | $(document).ready(function() { | ||
+ | var stickyNavTop = $('.nav').offset().top; | ||
+ | |||
+ | var stickyNav = function(){ | ||
+ | var scrollTop = $(window).scrollTop(); | ||
+ | |||
+ | if (scrollTop > stickyNavTop) { | ||
+ | $('.nav').addClass('sticky'); | ||
+ | } else { | ||
+ | $('.nav').removeClass('sticky'); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | stickyNav(); | ||
+ | |||
+ | $(window).scroll(function() { | ||
+ | stickyNav(); | ||
+ | }); | ||
+ | }); | ||
+ | </script>--> | ||
+ | <style> | ||
+ | #content{ | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | background-color:transparent; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | body{ | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | background-color:none; | ||
+ | border: none; | ||
+ | } | ||
+ | #globalwrapper{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background: none; | ||
+ | } | ||
+ | |||
+ | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { | ||
+ | display:none;} | ||
+ | #top-section { | ||
+ | border: none; | ||
+ | height: 0px;} | ||
+ | #content { | ||
+ | border: none;} | ||
+ | /* Removes "teams" from the menubar */ | ||
+ | #menubar > ul > li:last-child { | ||
+ | display: none;} | ||
+ | /* Resizes the menubar to fik the links (default is 400px) */ | ||
+ | #menubar { | ||
+ | width: auto;} | ||
+ | body { | ||
+ | margin: 10px 0 0 0; | ||
+ | padding: 0;} | ||
+ | #top-section { | ||
+ | width: 965px; | ||
+ | height: 0; | ||
+ | margin: 0 auto; | ||
+ | padding: 0; | ||
+ | border: none;} | ||
+ | #menubar { | ||
+ | font-size: 65%; | ||
+ | top: -14px;} | ||
+ | .left-menu:hover { | ||
+ | background-color: transparent;} | ||
+ | #menubar li a { | ||
+ | background-color: transparent;} | ||
+ | #menubar:hover { | ||
+ | color: white;} | ||
+ | #menubar li a { | ||
+ | color: transparent;} | ||
+ | #menubar:hover li a { | ||
+ | color: white;} | ||
+ | </style> | ||
+ | <!--<link href="style.css" rel="stylesheet" type="text/css">--> | ||
+ | <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'> | ||
+ | <link href="https://e65ae602ef428322892bf5f667f9d51420f9cd4d.googledrive.com/host/0B21Mp8HDTzNfV3llTVVETkdxSjA/style.css" rel="stylesheet" type="text/css"> | ||
+ | </head> | ||
<head> | <head> | ||
<meta charset="UTF-8" /> | <meta charset="UTF-8" /> |
Revision as of 06:51, 20 June 2014
Slit Slider with CSS3 and jQuery
About this slider
The Slit Slider is a slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements.