Difference between revisions of "Team:SKLBC-DGSYZX"
Line 1: | Line 1: | ||
− | <html> | + | <!DOCTYPE html> |
− | < | + | <!-- saved from url=(0018)http://snapsvg.io/ --> |
− | < | + | <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
− | + | <meta charset="utf-8"> | |
− | <meta http-equiv="Content-Type" content="text/html; charset= | + | <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']); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | <script | + | |
− | <script type="text/javascript"> | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | (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> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <header id="header"> | ||
+ | <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> | ||
+ | |||
+ | <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/Software" class="">Software</a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Entrepreneurship" class="">Entrepreneurship</a> | ||
+ | |||
+ | <a href="https://2015.igem.org/Team:SKLBC-DGSYZX/Medals" class="">Medals and Prizes</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> | </script> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | </article> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | </body></html> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + |
Revision as of 06:38, 13 September 2015
<!DOCTYPE html>