Difference between revisions of "Team:SKLBC-DGSYZX"
(22 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | <html> | |
− | <html> | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<head> | <head> | ||
<title>Home</title> | <title>Home</title> | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
+ | <meta charset="utf-8"> | ||
+ | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
+ | <title>Home</title> | ||
+ | <link rel="shortcut icon" href="http://snapsvg.io/assets/favicon.ico?v=1"> | ||
+ | <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> | ||
+ | <script type="text/javascript" async="" src="./Snap.svg - Home_files/ga.js"></script><script src="http://use.edgefonts.net/source-sans-pro:n2,i2,n3,i3,n4,i4,n6,i6,n7,i7,n9,i9:all.js"></script> | ||
+ | <link rel="stylesheet" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/master.css"> | ||
+ | <script src="./Snap.svg - Home_files/snap.svg-min.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | var _gaq = _gaq || []; | ||
+ | _gaq.push(['_setAccount', 'UA-44948757-1']); | ||
+ | _gaq.push(['_trackPageview']); | ||
+ | |||
+ | (function() { | ||
+ | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | ||
+ | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | ||
+ | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | ||
+ | })(); | ||
+ | |||
+ | function trackOutboundLink(link, category, action) { | ||
+ | try { | ||
+ | _gaq.push(['_trackEvent', category , action]); | ||
+ | } catch(err){} | ||
+ | |||
+ | setTimeout(function() { | ||
+ | document.location.href = link.href; | ||
+ | }, 100); | ||
+ | } | ||
+ | </script> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
− | |||
− | |||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
− | <a href=" | + | <a href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/index.html"></a></p> |
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> | <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> | ||
− | <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> | + | <link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/bootstrap.css" rel='stylesheet' type='text/css' /> |
− | <link rel="stylesheet" type="text/css" href="css/wiki.css"> | + | <link rel="stylesheet" type="text/css" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/wiki.css"> |
− | <link href="css/teamwiki.css" rel='stylesheet' type='text/css' /> | + | <link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/teamwiki.css" rel='stylesheet' type='text/css' /> |
− | <link href="css/ionicons.css" rel='stylesheet' type='text/css' /> | + | <link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/ionicons.css" rel='stylesheet' type='text/css' /> |
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | ||
<!-- Custom Theme files --> | <!-- Custom Theme files --> | ||
− | <link href="css/style.css" rel='stylesheet' type='text/css' /> | + | <link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/style.css" rel='stylesheet' type='text/css' /> |
<!-- Custom Theme files --> | <!-- Custom Theme files --> | ||
<!--webfont--> | <!--webfont--> | ||
<link href='http://fonts.useso.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'> | <link href='http://fonts.useso.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'> | ||
<link href='http://fonts.useso.com/css?family=Exo+2:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'> | <link href='http://fonts.useso.com/css?family=Exo+2:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'> | ||
− | <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> | + | <script type="text/javascript" src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/js/jquery-1.11.1.min.js"></script> |
− | <script type="text/javascript" src="js/jquery.min.js"></script> | + | <script type="text/javascript" src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/js/jquery.min.js"></script> |
<script type="text/javascript"> | <script type="text/javascript"> | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
Line 62: | Line 72: | ||
</script> | </script> | ||
<!------ Light Box ------> | <!------ Light Box ------> | ||
− | <link rel="stylesheet" href="css/swipebox.css"> | + | <link rel="stylesheet" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/swipebox.css"> |
− | <script src="js/jquery.swipebox.min.js"></script> | + | <script src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/js/jquery.swipebox.min.js"></script> |
<script type="text/javascript"> | <script type="text/javascript"> | ||
jQuery(function($) { | jQuery(function($) { | ||
Line 71: | Line 81: | ||
<!------ Eng Light Box ------> | <!------ Eng Light Box ------> | ||
<!-- Prettify --> | <!-- Prettify --> | ||
− | <link href="css/owl.carousel.css" rel="stylesheet"> | + | <link href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/css/owl.carousel.css" rel="stylesheet"> |
− | <script src="js/owl.carousel.js"></script> | + | <script src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/js/owl.carousel.js"></script> |
<script> | <script> | ||
$(document).ready(function() { | $(document).ready(function() { | ||
Line 86: | Line 96: | ||
<!----- //End-Share-instantly-slider----> | <!----- //End-Share-instantly-slider----> | ||
<!----font-Awesome-----> | <!----font-Awesome-----> | ||
− | <link rel="stylesheet" href="fonts/css/font-awesome.min.css"> | + | <link rel="stylesheet" href="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/fonts/css/font-awesome.min.css"> |
<!----font-Awesome-----> | <!----font-Awesome-----> | ||
− | </head>- | + | </head> |
− | < | + | |
− | <div class=" | + | <body style="background-color:white"> |
− | + | <header id="header" style="height: inherit;"> | |
− | + | <div class="wrap"> | |
− | + | <a href="./Snap.svg - Home_files/Snap.svg - Home.html" class="logo"> | |
− | + | <img src="http://120.25.1.181:8080/www/gdsyzx/sklbc-gdsyzx/images/synn.jpg" alt=""> | |
− | + | <span class="header">Synsketch</span> | |
− | + | </a> | |
− | < | + | <nav> |
− | + | ||
− | < | + | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX" class=" selected">Home</a> |
− | < | + | |
− | < | + | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Project" class="">Project</a> |
− | < | + | |
− | < | + | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Notebook" class="">Notebook</a> |
− | < | + | |
− | < | + | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Attributions" class="">Attributions</a> |
− | < | + | |
− | < | + | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Collaborations" class="">Collaborations</a> |
− | <div class=" | + | |
− | + | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Pratices" class="">Human Pratices</a> | |
− | + | ||
− | + | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Parts" class="">Parts</a> | |
− | + | ||
− | + | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Safety" class="">Safety</a> | |
− | + | ||
− | + | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Software" class="">Software</a> | |
− | + | ||
− | + | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Entrepreneurship" class="">Entrepreneurship</a> | |
− | </div> | + | |
− | < | + | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Team" class="">Team</a> |
+ | |||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Medals" class="">Medals and Prizes</a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Design" class="">Design</a> | ||
+ | |||
+ | </nav> | ||
+ | </div> | ||
+ | </header> | ||
+ | <br><br> | ||
+ | <article> | ||
+ | <section class="" style="background: #87cefa"> | ||
+ | <div class="wrap saw reverse a"> | ||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Project" style="font-size: 100px;color: white;">Project</a> | ||
+ | |||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <section class="secondary" style="background: #ffb6c1"> | ||
+ | <div class="wrap saw reverse b"> | ||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Notebook" style="font-size: 100px;color: white;">Notebook</a> | ||
+ | </section> | ||
+ | |||
+ | <section class="" style="background: #696969"> | ||
+ | <div class="wrap saw reverse c"> | ||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Attributions" style="font-size: 100px;color: white;">Attributions</a> | ||
+ | |||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <section class="secondary" style="background: #00fa9a"> | ||
+ | <div class="wrap saw reverse d"> | ||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Collaborations" style="font-size: 100px;color: white;">Collaborations</a> | ||
+ | </section><section class="" style="background: #bc8f8f"> | ||
+ | <div class="wrap saw reverse e"> | ||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Pratices" style="font-size: 100px;color: white;">Human Pratices</a> | ||
+ | |||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <section class="secondary" style="background: #9370db"> | ||
+ | <div class="wrap saw reverse f"> | ||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Parts" style="font-size: 100px;color: white;">Parts</a> | ||
+ | </section> | ||
+ | |||
+ | <section class="" style="background: #ffa071"> | ||
+ | <div class="wrap saw reverse i"> | ||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Software" style="font-size: 100px;color: white;">Software</a> | ||
+ | |||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <section class="secondary" style="background: #ffb6c1"> | ||
+ | <div class="wrap saw reverse j"> | ||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Entrepreneurship" style="font-size: 100px;color: white;">Entrepreneurship</a> | ||
+ | </section> | ||
+ | |||
+ | <section class="" style="background: #dda0dd"> | ||
+ | <div class="wrap saw reverse k"> | ||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Medals" style="font-size: 100px;color: white;">Medals and Prizes</h> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | |||
+ | |||
+ | <script> | ||
+ | var logo = Snap.select("#snap-logo").attr({opacity:0}); | ||
+ | window.onload = function () { | ||
+ | |||
+ | var parts = [ | ||
+ | ['top', 0, 20], | ||
+ | ['left', 20, 0], | ||
+ | ['bottom', 0, -20], | ||
+ | ['right', -20, 0] | ||
+ | ], | ||
+ | components = [], | ||
+ | i = 0, | ||
+ | k = 0, | ||
+ | isLogoAnimated = false, | ||
+ | isCrocAnimated = false, | ||
+ | isCroc2Animated = false; | ||
+ | |||
+ | for (i = 0; i < parts.length; i++) { | ||
+ | var el = parts[i] | ||
+ | elid = el[0]; | ||
+ | element = logo.select("#" + elid); | ||
+ | element.attr({opacity:0, transform: "t" + (el[1]) + "," + (el[2])}); | ||
+ | components.push(element); | ||
+ | } | ||
+ | |||
+ | function animateEach() { | ||
+ | if (!components[k]) return; | ||
+ | components[k].animate({ | ||
+ | transform: "t" + (0) + "," + (0), | ||
+ | opacity: 1 | ||
+ | }, 250, mina.easeout); | ||
+ | setTimeout(animateEach, 150); | ||
+ | k++; | ||
+ | }; | ||
+ | |||
+ | |||
+ | // crocodile | ||
+ | |||
+ | var croc = Snap.select("#crocodile"), | ||
+ | head = croc.select("#upper-head"), | ||
+ | jaw = croc.select("#upper-jaw"), | ||
+ | symbol = croc.select("#symbol"), | ||
+ | clearId = [], | ||
+ | scrollTop = 0; | ||
+ | |||
+ | var pivots = [ | ||
+ | [44, 147], | ||
+ | [92, 126] | ||
+ | ]; | ||
+ | |||
+ | function clearTimer() { | ||
+ | for (var i = 0; i < clearId.length; i++) { | ||
+ | clearTimeout(clearId[i]); | ||
+ | } | ||
+ | clearId = []; | ||
+ | } | ||
+ | |||
+ | function close() { | ||
+ | clearTimer(); | ||
+ | |||
+ | head.animate({ | ||
+ | transform: "r" + [8, pivots[0][0], pivots[0][1]] | ||
+ | }, 500, mina.backin); | ||
+ | |||
+ | jaw.animate({ | ||
+ | transform: "r" + [37, pivots[1][0], pivots[1][1]] | ||
+ | }, 500, mina.backin); | ||
+ | |||
+ | clearId.push( setTimeout(function() { | ||
+ | symbol.animate({ | ||
+ | transform: "t" + (-70) + "," + (40) + "r" + (40) | ||
+ | }, 100); | ||
+ | }, 400)); | ||
+ | } | ||
+ | |||
+ | function open() { | ||
+ | clearTimer(); | ||
+ | |||
+ | head.animate({ | ||
+ | transform: "r" + [0, pivots[0][0], pivots[0][1]] | ||
+ | }, 700, mina.elastic); | ||
+ | |||
+ | jaw.animate({ | ||
+ | transform: "r" + [0, pivots[1][0], pivots[1][1]] | ||
+ | }, 700, mina.elastic); | ||
+ | |||
+ | symbol.animate({ | ||
+ | transform: "t" + (0) + "," + (0) + "r" + (0) | ||
+ | }, 500, mina.elastic); | ||
+ | } | ||
+ | |||
+ | |||
+ | croc.hover(open, | ||
+ | function() { | ||
+ | clearId.push(setTimeout(close, 200)); | ||
+ | }); | ||
+ | |||
+ | |||
+ | // crocodile-2 | ||
+ | |||
+ | var diagramgroup = Snap.select("#crocodile-2"), | ||
+ | elements = {}, | ||
+ | elementkeys = ['map', 'pie', 'eye'], | ||
+ | diagramtimer = [], | ||
+ | animating = {}, | ||
+ | cleartimers = {}, | ||
+ | i = 0, j = 0; | ||
+ | |||
+ | function show(key) { | ||
+ | if (animating[key]) return; | ||
+ | clearTimeout(cleartimers[key]); | ||
+ | animating[key] = true; | ||
+ | var element = elements[key], | ||
+ | x = element[0].getBBox().x, | ||
+ | offset = x/2 + 25; | ||
+ | element[0].attr({ | ||
+ | transform: "t"+offset+",80s0.5,0.5,0,0" | ||
+ | }); | ||
+ | setTimeout(function() { | ||
+ | element[0].animate({opacity:1,transform:"t0,0s1,1,0,0"}, 500, mina.elastic); | ||
+ | }, 50); | ||
+ | element[1].animate({opacity:0.25}, 400); | ||
+ | setTimeout(function(){animating[key] = false}, 550); | ||
+ | } | ||
+ | |||
+ | function showAll() { | ||
+ | j = 0; | ||
+ | function cycle() { | ||
+ | show(elementkeys[j]); | ||
+ | j++; | ||
+ | if (j < elementkeys.length) setTimeout(cycle, 200); | ||
+ | } | ||
+ | cycle(); | ||
+ | } | ||
+ | |||
+ | function hoverIn() { | ||
+ | show( this.node.id.replace('hit-', '') ); | ||
+ | } | ||
+ | |||
+ | |||
+ | for (i = 0; i < elementkeys.length; i++) { | ||
+ | var key = elementkeys[i], | ||
+ | diagram = diagramgroup.select("#diagram-" + key).attr({opacity:0}), | ||
+ | path = diagramgroup.select("#path-" + key).attr({opacity:0}), | ||
+ | hitarea = diagramgroup.select("#hit-" + key); | ||
+ | hitarea.hover(hoverIn); | ||
+ | elements[key] = [diagram, path]; | ||
+ | } | ||
+ | |||
+ | |||
+ | // scroll events | ||
+ | |||
+ | function checkScroll(e) { | ||
+ | // alert(window.scrollY); | ||
+ | if (isLogoAnimated && isCrocAnimated && isCroc2Animated) return; | ||
+ | var scrollY = window.scrollY || window.pageYOffset; | ||
+ | if (scrollY > 250 && scrollY < 600 && !isCrocAnimated) { | ||
+ | clearId.push( setTimeout(close, 200) ); | ||
+ | isCrocAnimated = true; | ||
+ | } | ||
+ | |||
+ | if (scrollY < 200 && !isLogoAnimated) { | ||
+ | logo.attr({opacity:1}); | ||
+ | setTimeout(animateEach, 100); | ||
+ | isLogoAnimated = true; | ||
+ | } | ||
+ | |||
+ | if (scrollY > 800 && scrollY < 1100 && !isCroc2Animated) { | ||
+ | setTimeout(showAll, 100); | ||
+ | isCroc2Animated = true; | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | window.onscroll = checkScroll; | ||
+ | setTimeout(checkScroll, 50); | ||
+ | |||
+ | }; | ||
+ | </script> | ||
+ | |||
+ | </article> | ||
+ | |||
+ | |||
− | + | </body></html> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </body> | + | |
− | </html> | + |
Latest revision as of 08:28, 18 September 2015