Difference between revisions of "Team:Tec-Monterrey/sandboxDavid"
Davidacevedo (Talk | contribs) |
EstebanDLPT (Talk | contribs) m |
||
| (150 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | + | {{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}} | |
| + | <html> | ||
| − | |||
<head> | <head> | ||
| − | <meta name="viewport" content="width=device-width,initial-scale=1 | + | <!-- Bootstrap required meta tags --> |
| − | <!-- | + | <meta charset="utf-8"> |
| − | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&ctype=text/css" rel="stylesheet"> | + | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
| − | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&ctype=text/css" rel="stylesheet | + | |
| + | <!-- Bootstrap css--> | ||
| + | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&ctype=text/css" rel="stylesheet"> | ||
| + | |||
| + | <!-- Fonts --> | ||
| + | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&ctype=text/css" rel="stylesheet"> | ||
| + | |||
<style> | <style> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | . | + | /**********************************************************************************************************************/ |
| − | + | /******************************************************* SLIDESHOW ***************************************************/ | |
| − | + | /**********************************************************************************************************************/ | |
| − | + | .slideshow { | |
| − | + | position: relative; | |
| − | + | width: 80%; | |
| + | height: 80%; | ||
| + | margin: 0 10%; | ||
| + | overflow-y: hidden; | ||
} | } | ||
| − | + | .slideshow .right-arrow-pane, .slideshow .left-arrow-pane{ | |
| − | + | position:absolute; | |
| − | + | right:0; | |
| − | + | top:0; | |
| − | + | height:100%; | |
| − | + | width:100px; | |
| + | background: rgba(0,0,0,0.3); | ||
| + | -webkit-transition: all 0.3s; | ||
| + | -moz-transition: all 0.3s; | ||
| + | -ms-transition: all 0.3s; | ||
| + | -o-transition: all 0.3s; | ||
transition: all 0.3s; | transition: all 0.3s; | ||
| − | - | + | z-index:75; |
| + | cursor:pointer; | ||
} | } | ||
| − | + | .slideshow .left-arrow-pane { | |
| − | + | left:0; | |
| − | + | width:82px; | |
| − | + | right:auto; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .slideshow .right-arrow-pane .arrow, .slideshow .left-arrow-pane .arrow { | |
| − | + | position:absolute; | |
| − | + | top:50%; | |
| − | + | left:30%; | |
| − | + | transform:translate(-50%, -50%); | |
| − | + | -webkit-transition: all 0.3s; | |
| − | + | -moz-transition: all 0.3s; | |
| + | -ms-transition: all 0.3s; | ||
| + | -o-transition: all 0.3s; | ||
| + | transition: all 0.3s; | ||
| + | /*z-index:50;*/ | ||
} | } | ||
| − | + | .slideshow .left-arrow-pane .arrow { | |
| − | + | right:30%; | |
| − | + | left:auto; | |
| − | + | transform: translate(50%, -50%); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .slideshow .right-arrow-pane .arrow div, .slideshow .left-arrow-pane .arrow div{ | |
| − | + | height:50px; | |
| − | + | width:50px; | |
| − | + | transform:rotate(45deg); | |
| − | + | border-style: solid; | |
| − | + | border-color: rgba(255, 255, 255, .5); | |
| − | + | border-width:5px 5px 0 0; | |
| + | -webkit-transition: all 0.3s; | ||
| + | -moz-transition: all 0.3s; | ||
| + | -ms-transition: all 0.3s; | ||
| + | -o-transition: all 0.3s; | ||
| + | transition: all 0.3s; | ||
} | } | ||
| − | + | .slideshow .left-arrow-pane .arrow div{ | |
| − | + | transform:rotate(-135deg); | |
| − | + | ||
} | } | ||
| − | + | .slideshow .right-arrow-pane:hover, .slideshow .left-arrow-pane:hover { | |
| − | + | background:rgba(0,0,0,.25); | |
} | } | ||
| − | + | .slideshow .right-arrow-pane:hover .arrow { | |
| − | + | left:35%; | |
| − | + | ||
} | } | ||
| − | + | .slideshow .left-arrow-pane:hover .arrow { | |
| − | + | right:35%; | |
} | } | ||
| − | + | .slideshow .right-arrow-pane:hover .arrow div, .slideshow .left-arrow-pane:hover .arrow div{ | |
| − | + | border-color:rgb(255,255,255); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | .slideshow .bubbles { |
| − | + | position:absolute; | |
| − | + | width:100%; | |
| − | + | height:10%; | |
| − | + | bottom:0; | |
| − | + | background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); | |
| − | + | display:flex; | |
| − | + | justify-content: center; | |
| − | + | z-index:50; | |
| − | + | ||
} | } | ||
| − | . | + | |
| − | + | .slideshow .bubbles div { | |
| − | + | height:30px; | |
| − | + | width:30px; | |
| − | + | border-radius:5px; | |
| − | + | border:solid white 3px; | |
| − | + | margin:0 20px 0 0; | |
| − | + | cursor:pointer; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | .slideshow .bubbles div:last-child { |
| − | + | margin-right: 0; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | .slideshow .bubbles div:hover { |
| − | + | background-color: white; | |
} | } | ||
| − | . | + | .slideshow .bubbles div.active { |
| − | + | background-color:white; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | .slideshow .pauseBtn { |
| − | + | position:absolute; | |
| − | + | height:60px; | |
| − | + | width:60px; | |
| + | bottom:20px; | ||
| + | right:150px; | ||
| + | background:rgba(34,34,34,.75); | ||
| + | border-radius:10px; | ||
| + | z-index:60; | ||
} | } | ||
| − | . | + | .slideshow .pauseBtn .bars { |
| − | + | visibility: hidden; | |
| − | + | position:absolute; | |
| + | top:50%; | ||
| + | left:50%; | ||
| + | transform:translate(-50%, -50%); | ||
| + | width:30px; | ||
| + | height:35px; | ||
} | } | ||
| − | . | + | .slideshow .pauseBtn .bars > div{ |
| − | + | float:right; | |
| − | + | width:10px; | |
| − | + | height:100%; | |
| − | + | background:rgba(255,255,255,.75); | |
} | } | ||
| − | . | + | .slideshow .pauseBtn .bars > div:first-child { |
| − | + | float:left; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | .slideshow .pauseBtn:hover { |
| − | + | background: rgba(34,34,34,1); | |
| + | cursor: pointer; | ||
} | } | ||
| − | . | + | .slideshow .pauseBtn:hover .bars > div { |
| − | + | background: rgba(255,255,255,1); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | .slideshow .pauseBtn .tri { |
| − | + | visibility: hidden; | |
| − | + | position: absolute; | |
| − | + | top:50%; | |
| − | + | left:50%; | |
| − | + | transform: translate(-50%, -50%); | |
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .slideshow .pauseBtn .tri > div { | |
| − | + | width: 0; | |
| − | + | height: 0; | |
| − | + | border-top: 18px solid transparent; | |
| − | + | border-left-style: solid; | |
| − | + | border-left-width: 30px; | |
| − | + | border-left-color:rgba(255,255,255,.75); | |
| − | + | border-bottom: 18px solid transparent; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .slideshow .pauseBtn:hover .tri > div{ | |
| − | + | border-left-color:rgba(255,255,255,1); | |
| − | + | ||
} | } | ||
| − | + | ||
| − | + | .slideshow .pauseBtn .tri.active, .slideshow .pauseBtn .bars.active { | |
| − | + | visibility: visible; | |
} | } | ||
| − | + | ||
| − | + | .slideshow .content { | |
| − | + | position:absolute; | |
| − | + | top:0; | |
| − | + | left:0; | |
| − | + | width:100%; | |
| − | + | height:100%; | |
| + | overflow: hidden; | ||
} | } | ||
| − | + | .slideshow .content .slide { | |
| + | visibility:hidden; | ||
| + | position:absolute; | ||
| + | top:0; | ||
| + | left:0; | ||
| + | height:100%; | ||
| + | width:100%; | ||
| + | overflow-y: hidden; | ||
| + | -webkit-transition: left 1s; | ||
| + | -moz-transition: left 1s; | ||
| + | -ms-transition: left 1s; | ||
| + | -o-transition: left 1s; | ||
| + | transition: left 1s; | ||
| + | } | ||
| + | .slideshow .content .slide video, .slideshow .content .slide img { | ||
width: 100%; | width: 100%; | ||
| − | + | height: 100%; | |
| − | + | ||
} | } | ||
| − | . | + | .slideshow .content .slide:first-child { |
| − | + | visibility:visible; | |
| + | left:0; | ||
| + | z-index: 1; | ||
| + | width: 100%; | ||
} | } | ||
| − | + | ||
| − | + | .slideshow .content .slide > img:first-child { | |
| + | height:auto; | ||
| + | width: 100%; | ||
| + | overflow: hidden; | ||
} | } | ||
| − | + | ||
| − | + | .slideshow .content .slide.active { | |
| − | + | left:0 !important; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | ||
| − | + | .slideshow .content .slide.left { | |
| − | + | left:-100vw !important; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | + | .slideshow .content .slide.right { | |
| + | left:100vw !important; | ||
| + | } | ||
| − | + | .splash .slideshow .title { | |
| − | + | top:65%; | |
| − | + | left:200px; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | #HQ_page .slideshow .title p { | |
| − | + | font-size:7em; | |
| + | } | ||
| − | + | .notransition { | |
| + | -webkit-transition: none !important; | ||
| + | -moz-transition: none !important; | ||
| + | -ms-transition: none !important; | ||
| + | -o-transition: none !important; | ||
| + | transition: none !important; | ||
| + | } | ||
| + | /**********************************************************************************************************************/ | ||
| + | /**********************************************************************************************************************/ | ||
| + | /******************************************************* SLIDESHOW *****************************************************/ | ||
| − | + | #scroll-section { | |
| − | + | display: contents; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .header-main-page { | |
| − | + | width: 100%; | |
| − | + | height: 100%; | |
| − | + | background: rgb(157,217,223); | |
| − | + | ||
} | } | ||
| − | + | ||
| − | + | #video-main-page { | |
| − | + | ||
width: 100%; | width: 100%; | ||
| − | + | background: #9dd8dd; | |
| − | + | transition: all 0.6s; | |
| − | + | position: fixed; | |
| + | z-index: 200; | ||
} | } | ||
| − | + | #skip-btn { | |
| − | + | z-index: 201; | |
| − | + | background: rgba(0,0,0,0.3); | |
| − | + | color: whitesmoke; | |
| − | + | font-size: 8vh; | |
| − | + | width: 15vw; | |
| − | + | height: 9vh; | |
| − | + | line-height: 1em; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | - | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
text-align: center; | text-align: center; | ||
| + | position: fixed; | ||
| + | border-radius: 10px; | ||
| + | bottom: 1%; | ||
| + | right: 1%; | ||
| + | transition: all 0.2s; | ||
| + | -webkit-transition: all 0.2s; | ||
} | } | ||
| − | # | + | |
| − | + | #skip-btn:hover { | |
| − | + | cursor: pointer; | |
| − | + | background: rgba(0,0,0,0.5); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | # | + | #bacteria-nadando { |
| − | width: | + | width: 30vw; |
| − | + | height: 30vw; | |
| − | + | left: 35vw; | |
| − | + | position: fixed; | |
| − | + | z-index: 1; | |
| + | background: url(https://static.igem.org/mediawiki/2018/7/74/T--Tec-Monterrey--Frame_1_interactive_gif.png); | ||
| + | background-size: cover; | ||
} | } | ||
| − | # | + | #hiding-block { |
| − | + | background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 60%); | |
| − | + | z-index: 3; | |
| + | width: 100%; | ||
| + | height: 100vh; | ||
| + | float: left; | ||
| + | position: sticky; | ||
} | } | ||
| − | # | + | #fixed-title { |
| − | + | width: 50%; | |
| + | height: 35vh; | ||
| + | font-size: 13vw; | ||
| + | font-weight: 700; | ||
| + | font-family: "DosisRegular", sans-serif; | ||
| + | line-height: 1.2em; | ||
| + | text-align: center; | ||
| + | position: absolute; | ||
| + | left: 25%; | ||
| + | top: 25%; | ||
| + | z-index: 2; | ||
| + | color: rgba(246,246,246,0.9); | ||
} | } | ||
| − | + | #fixed-subtitle { | |
| − | + | width: 100%; | |
| − | + | font-size: 6vw; | |
| − | + | font-weight: 500; | |
| − | + | font-family: "Norwester", monospace; | |
| − | + | line-height: 1.2em; | |
| − | + | text-align: center; | |
| − | + | z-index: 2; | |
| − | + | color: rgba(47,99,97,0.6); | |
} | } | ||
| − | . | + | .topBarWrapper { |
| − | + | display: contents !important; | |
| − | + | } | |
| − | + | ||
| − | background- | + | #background-river { |
| + | height: auto; | ||
| + | background-image: url(https://static.igem.org/mediawiki/2018/d/d0/T--Tec-Monterrey--Background_Rio.png); | ||
| + | width: 100%; | ||
| + | background-position-x: center; | ||
background-size: cover; | background-size: cover; | ||
| + | background-repeat-y: no-repeat; | ||
} | } | ||
| − | . | + | .main-info-container-left { |
| − | + | width: 30%; | |
| − | + | height: auto; | |
| − | + | margin-top: 30%; | |
| − | + | margin-left: 2.5vw; | |
| + | float: left; | ||
} | } | ||
| − | . | + | .main-info-container-right { |
| − | + | width: 30%; | |
| − | + | height: auto; | |
| − | + | margin-top: 50%; | |
| − | + | margin-right: 2.5vw; | |
| − | + | float: right; | |
} | } | ||
| − | . | + | .main-info { |
| − | + | ||
| − | + | ||
width: 100%; | width: 100%; | ||
| − | + | height: 30vw; | |
| − | + | background: white; | |
| − | top: | + | margin-top: 40vh; |
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | @media screen and (max-width: 900px) { |
| − | + | .main-info-container-left { | |
| − | + | width: 40%; | |
| + | } | ||
| + | .main-info-container-right { | ||
| + | width: 40%; | ||
| + | } | ||
| + | #bacteria-nadando { | ||
| + | display: none; | ||
| + | } | ||
| + | #hiding-block { | ||
| + | display: none; | ||
| + | } | ||
| + | #background-river { | ||
| + | height: 400vh; | ||
| + | } | ||
| + | #video-main-page { | ||
| + | display: none; | ||
| + | } | ||
| + | #skip-btn { | ||
| + | display: none; | ||
| + | } | ||
} | } | ||
| − | + | </style> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | </style> | + | |
</head> | </head> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <body> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | < | + | <div id="scroll-section"> |
| − | + | <header id="page-top" class="header-main-page"> | |
| − | + | </header> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | <div id="background-river"> | |
| − | + | <div class="main-info-container-left"> | |
| − | + | <div class="main-info"> | |
| − | + | </div> | |
| − | + | <div class="main-info"> | |
| − | + | </div> | |
| − | + | <div class="main-info"> | |
| − | + | </div> | |
| − | + | <div class="main-info"> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | <div class="main-info-container-right"> | |
| − | + | <div class="main-info"> | |
| − | + | </div> | |
| − | + | <div class="main-info"> | |
| − | + | </div> | |
| − | + | <div class="main-info"> | |
| − | < | + | </div> |
| − | </ | + | <div class="main-info"> |
| + | </div> | ||
| + | </div> | ||
| + | <div id="hiding-block"> | ||
| + | </div> | ||
| − | <!--- | + | <br class="clearBoth" /> |
| + | </div> <!-- background-river ends --> | ||
| + | <div id="fixed-title"> | ||
| + | E. coding | ||
| + | <div id="fixed-subtitle">Tec-Monterrey</div> | ||
| + | </div> | ||
| − | + | <div id="bacteria-nadando"> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <div | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | </div> <!-- scroll section ends --> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | < | + | <section style="height: 90vw"> |
| − | < | + | <style> |
| − | + | #dropzoneWrapper { | |
| − | + | width: 100%; | |
| − | + | height: auto; | |
| − | + | } | |
| − | + | #outer-dropzone { | |
| + | height: 60vw; | ||
| + | width: 60vw; | ||
| + | left: 30vw; | ||
| + | touch-action: none; | ||
| + | } | ||
| + | |||
| + | .dropzone { | ||
| + | background-color: black; | ||
| + | border: dashed 4px transparent; | ||
| + | border-radius: 4px; | ||
| + | padding: 10px; | ||
| + | width: 80%; | ||
| + | transition: background-color 0.3s; | ||
| + | } | ||
| − | /*------------ | + | .drop-active { |
| − | + | border-color: #aaa; | |
| − | // | + | } |
| + | |||
| + | .drop-target { | ||
| + | background-color: #29e; | ||
| + | border-style: solid; | ||
| + | } | ||
| + | |||
| + | .drag-drop { | ||
| + | display: inline-block; | ||
| + | height: 10vh; | ||
| + | width: 10vh; | ||
| + | z-index: 50; | ||
| + | |||
| + | -webkit-transform: translate(0px, 0px); | ||
| + | transform: translate(0px, 0px); | ||
| + | |||
| + | transition: background-color 0.3s; | ||
| + | } | ||
| + | |||
| + | .drag-drop img { | ||
| + | position: absolute; | ||
| + | height: 100%; | ||
| + | width: 100%; | ||
| + | border-radius: 50%; | ||
| + | z-index: 50; | ||
| + | } | ||
| + | |||
| + | .drag-drop.can-drop { | ||
| + | color: #000; | ||
| + | /*background-color: #4e4;*/ | ||
| + | z-index: 50; | ||
| + | } | ||
| + | |||
| + | |||
| + | #backgroundHolder { | ||
| + | width: 60vw; | ||
| + | height: 60vw; | ||
| + | position: relative; | ||
| + | z-index: 1; | ||
| + | background-image: url("https://static.igem.org/mediawiki/2018/5/5d/T--Tec-Monterrey--cut_interactive.png"); | ||
| + | background-repeat:no-repeat; | ||
| + | background-size: 100%; | ||
| + | } | ||
| + | |||
| + | #interactive_Background { | ||
| + | height: 100%; | ||
| + | } | ||
| + | |||
| + | #plasmidHolder { | ||
| + | width: 60vw; | ||
| + | height: 60vw; | ||
| + | position: absolute; | ||
| + | z-index: 3; | ||
| + | background-image:url("https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png"); | ||
| + | background-repeat:no-repeat; | ||
| + | background-size: 100%; | ||
| + | } | ||
| + | |||
| + | #interactive_CutPlasmidFull { | ||
| + | height: 100%; | ||
| + | } | ||
| + | |||
| + | #colorsWrapper { | ||
| + | width: 60vw; | ||
| + | height: 60vw; | ||
| + | position: absolute; | ||
| + | z-index: 2; | ||
| + | background-repeat:no-repeat; | ||
| + | background-size: 100%; | ||
| + | } | ||
| + | #color1 { | ||
| + | opacity: 0; | ||
| + | left: 48%; | ||
| + | top: 54.5%; | ||
| + | height: 8%; | ||
| + | width: 8%; | ||
| + | background-color: yellow; | ||
| + | position: absolute; | ||
| + | z-index:3; | ||
| + | } | ||
| + | #color2 { | ||
| + | opacity: 0; | ||
| + | left: 56%; | ||
| + | top: 54.5%; | ||
| + | height: 8%; | ||
| + | width: 8%; | ||
| + | background-color: red; | ||
| + | position: absolute; | ||
| + | z-index:3; | ||
| + | } | ||
| + | #color3 { | ||
| + | opacity: 0; | ||
| + | left: 48%; | ||
| + | top: 63%; | ||
| + | height: 7%; | ||
| + | width: 7.5%; | ||
| + | background-color: aqua; | ||
| + | position: absolute; | ||
| + | z-index:3; | ||
| + | } | ||
| + | #color4 { | ||
| + | opacity: 0; | ||
| + | left: 56%; | ||
| + | top: 63%; | ||
| + | height: 7%; | ||
| + | width: 7.5%; | ||
| + | background-color: pink; | ||
| + | position: absolute; | ||
| + | z-index:3; | ||
| + | } | ||
| + | |||
| + | |||
| + | </style> | ||
| + | |||
| + | |||
| + | |||
| + | <div style="height: 10vh; width: 100%; background-color: black;"><p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">DRAG AND DROP!</p></div> | ||
| + | <div id="dropzoneWrapper" style="background-color: black"> | ||
| + | <div id="gifDiv" style="height: 60vw; width: 60vw; background-color: black; position: absolute; z-index: 6; left: 20vw;"> | ||
| + | <img src="https://static.igem.org/mediawiki/2018/d/d3/T--Tec-Monterrey--giv_v3.gif" height="100%" width="100%"> | ||
| + | </div> | ||
| + | <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; left: 0; "> | ||
| + | <div style="background-color: black; height: 50%; text-align: center;"> | ||
| + | <br> | ||
| + | <br> | ||
| + | <div id="alan" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/8/8b/T--Tec-Monterrey--Foto_Alan.jpg"> </div> | ||
| + | <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;"> Pb</p> | ||
| + | </div> | ||
| + | <div style="background-color: black; height: 50%; text-align: center;"> | ||
| + | <div id="esteban" class="drag-drop" style="margin: auto;"> <img src="https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Foto_Esteban.jpg"> </div> | ||
| + | <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;"> NO3</p> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; right: 0;"> | ||
| + | <div style="background-color: black; height: 50%; text-align: center;"> | ||
| + | <br> | ||
| + | <br> | ||
| + | <div id="acebae" class="drag-drop" style="margin: auto"> <img src="https://static.igem.org/mediawiki/2018/2/2f/T--Tec-Monterrey--Foto_David.jpg"> </div> | ||
| + | <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;"> PO4</p> | ||
| + | </div> | ||
| + | <div style="background-color: black; height: 50%; text-align: center;"> | ||
| + | <div id="sofi" class="drag-drop" style="margin:auto"> <img src="https://static.igem.org/mediawiki/2018/9/9f/T--Tec-Monterrey--Foto_Sofia.jpg"> </div> | ||
| + | <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;"> As</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div style="height: 60vw; width: 60vw; background-color: black; position: absolute; left: 20vw;"> | ||
| + | <div id="outer-dropzone" class="dropzone"> | ||
| + | <div id="backgroundHolder"> | ||
| + | <div id="colorsWrapper"> | ||
| + | <div id="color1"></div> | ||
| + | <div id="color2"></div> | ||
| + | <div id="color3"></div> | ||
| + | <div id="color4"></div> | ||
| + | </div> | ||
| + | <div id="plasmidHolder" style="background-image:url('https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png')"> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <script> | ||
| − | $( | + | $(document).on('scroll', function() { |
| − | + | if($(this).scrollTop()>=$('#gifDiv').position().top){ | |
| − | + | $("#gifDiv").css("background-color: green;"); | |
| − | + | setTimeout(function(){ $("#gifDiv").fadeOut(); }, 200); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | ); | + | }); |
| − | + | ||
| − | + | ||
| − | + | document.addEventListener("DOMContentLoaded", function(event) { | |
| − | + | // target elements with the "draggable" class | |
| − | + | interact('.draggable') | |
| − | + | .draggable({ | |
| − | + | // enable inertial throwing | |
| − | }, function | + | inertia: true, |
| − | + | // keep the element within the area of it's parent | |
| − | + | restrict: { | |
| − | + | restriction: "#dropzoneWrapper", | |
| − | + | endOnly: true, | |
| − | + | elementRect: { | |
| − | + | top: 0, | |
| − | + | left: 0, | |
| − | + | bottom: 1, | |
| − | + | right: 1 | |
| − | + | } | |
| − | + | }, | |
| − | + | // enable autoScroll | |
| − | + | autoScroll: true, | |
| − | + | ||
| − | + | // call this function on every dragmove event | |
| − | + | onmove: dragMoveListener, | |
| − | + | // call this function on every dragend event | |
| + | onend: function(event) { | ||
| + | var textEl = event.target.querySelector('p'); | ||
| + | |||
| + | (textEl.textContent = | ||
| + | 'moved a distance of ' + | ||
| + | (Math.sqrt(Math.pow(event.pageX - event.x0, 2) + | ||
| + | Math.pow(event.pageY - event.y0, 2) | 0)) | ||
| + | .toFixed(2) + 'px'); | ||
} | } | ||
| − | ); | + | }); |
| − | + | ||
| − | + | function dragMoveListener(event) { | |
| − | + | var target = event.target, | |
| − | + | // keep the dragged position in the data-x/data-y attributes | |
| − | + | x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, | |
| − | + | y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; | |
| − | + | ||
| − | }, function () { | + | // translate the element |
| − | + | target.style.webkitTransform = | |
| − | + | target.style.transform = | |
| − | + | 'translate(' + x + 'px, ' + y + 'px)'; | |
| − | + | ||
| − | + | // update the posiion attributes | |
| − | + | target.setAttribute('data-x', x); | |
| − | + | target.setAttribute('data-y', y); | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | /* The dragging code for '.draggable' from the demo above | |
| − | + | * applies to this demo as well so it doesn't have to be repeated. */ | |
| − | + | ||
| − | + | // enable draggables to be dropped into this | |
| − | + | interact('.dropzone').dropzone({ | |
| − | + | // only accept elements matching this CSS selector | |
| − | + | // accept: '#yes-drop', | |
| + | // Require a 75% element overlap for a drop to be possible | ||
| + | overlap: 0.75, | ||
| + | |||
| + | // listen for drop related events: | ||
| + | |||
| + | ondropactivate: function(event) { | ||
| + | // activates when you grab an object | ||
| + | // add active dropzone feedback | ||
| + | event.target.classList.add('drop-active'); | ||
| + | //console.log("a"); | ||
| + | }, | ||
| + | ondragenter: function(event) { | ||
| + | // activates when object enters dropzone | ||
| + | var draggableElement = event.relatedTarget, | ||
| + | dropzoneElement = event.target; | ||
| + | |||
| + | // feedback the possibility of a drop | ||
| + | dropzoneElement.classList.add('drop-target'); | ||
| + | draggableElement.classList.add('can-drop'); | ||
| + | // draggableElement.textContent = 'Dragged in'; | ||
| + | //console.log("b"); | ||
| + | }, | ||
| + | ondragleave: function(event) { | ||
| + | // activates when object leaves dropzone | ||
| + | // remove the drop feedback style | ||
| + | event.target.classList.remove('drop-target'); | ||
| + | event.relatedTarget.classList.remove('can-drop'); | ||
| + | //event.relatedTarget.textContent = 'Dragged out'; | ||
| + | //console.log("c"); | ||
| + | }, | ||
| + | ondrop: function(event) { | ||
| + | // activates when object is dropped in dropzone | ||
| + | // event.relatedTarget.textContent = 'Dropped'; | ||
| + | var draggableElementID = event.relatedTarget.id; | ||
| + | if (event.relatedTarget.id == "alan") { | ||
| + | document.getElementById(draggableElementID).style.display = "none"; | ||
| + | document.getElementById("color1").style.opacity = "1"; | ||
| + | } else if (event.relatedTarget.id == "esteban") { | ||
| + | document.getElementById(draggableElementID).style.display = "none"; | ||
| + | document.getElementById("color2").style.opacity = "1"; | ||
| + | } else if (event.relatedTarget.id == "acebae") { | ||
| + | document.getElementById(draggableElementID).style.display = "none"; | ||
| + | document.getElementById("color3").style.opacity = "1"; | ||
| + | } else if (event.relatedTarget.id == "sofi") { | ||
| + | document.getElementById(draggableElementID).style.display = "none"; | ||
| + | document.getElementById("color4").style.opacity = "1"; | ||
} | } | ||
| − | + | //console.log("d"); | |
| − | + | }, | |
| − | + | ondropdeactivate: function(event) { | |
| − | + | // activates when you drop an object anywhere | |
| − | + | // remove active dropzone feedback | |
| − | + | event.target.classList.remove('drop-active'); | |
| − | + | event.target.classList.remove('drop-target'); | |
| − | + | //console.log("e"); | |
| − | + | } | |
| − | + | }); | |
| − | + | ||
| − | + | interact('.drag-drop') | |
| − | + | .draggable({ | |
| − | + | inertia: true, | |
| − | + | restrict: { | |
| − | + | restriction: "#dropzoneWrapper", | |
| − | + | endOnly: true, | |
| − | + | elementRect: { | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | top: 0, | |
| − | + | left: 0, | |
| + | bottom: 1, | ||
| + | right: 1 | ||
| + | } | ||
| + | }, | ||
| + | autoScroll: true, | ||
| + | // dragMoveListener from the dragging demo above | ||
| + | onmove: dragMoveListener, | ||
}); | }); | ||
| − | + | }); | |
| − | + | </script> | |
| − | + | </section> | |
| − | + | <section> | |
| − | + | <div class="slideshow"> | |
| − | + | <div class='right-arrow-pane'> | |
| − | $( | + | <div class='arrow'> |
| − | + | <div></div> | |
| − | $( | + | </div> |
| − | + | </div> | |
| + | <div class='left-arrow-pane'> | ||
| + | <div class='arrow'> | ||
| + | <div></div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class='bubbles'> | ||
| + | </div> | ||
| + | <div class='pauseBtn'> | ||
| + | <div class='bars'> | ||
| + | <div></div> | ||
| + | <div></div> | ||
| + | </div> | ||
| + | <div class='tri'> | ||
| + | <div></div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class='content'> | ||
| + | <div class='slide'> | ||
| + | <video autoplay loop muted> | ||
| + | <source src="https://static.igem.org/mediawiki/2018/4/45/T--Tec-Monterrey--HP_3_pH.mp4" type="video/mp4"> | ||
| + | </video> | ||
| + | </div> | ||
| + | <div class='slide'> | ||
| + | <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--HP_3_ni%C3%B1ossolos.jpg" /> | ||
| + | </div> | ||
| + | <div class='slide'> | ||
| + | <img src="https://static.igem.org/mediawiki/2018/f/f5/T--Tec-Monterrey--HP_3_trabajando.jpg" /> | ||
| + | </div> | ||
| + | <div class='slide'> | ||
| + | <img src="https://static.igem.org/mediawiki/2018/b/be/T--Tec-Monterrey--HP_3_todos.jpg" /> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="slideshow"> | ||
| + | <div class='right-arrow-pane'> | ||
| + | <div class='arrow'> | ||
| + | <div></div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class='left-arrow-pane'> | ||
| + | <div class='arrow'> | ||
| + | <div></div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class='bubbles'> | ||
| + | </div> | ||
| + | <div class='pauseBtn'> | ||
| + | <div class='bars'> | ||
| + | <div></div> | ||
| + | <div></div> | ||
| + | </div> | ||
| + | <div class='tri'> | ||
| + | <div></div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class='content'> | ||
| + | <div class='slide'> | ||
| + | <video autoplay loop muted> | ||
| + | <source src="https://static.igem.org/mediawiki/2018/4/45/T--Tec-Monterrey--HP_3_pH.mp4" type="video/mp4"> | ||
| + | </video> | ||
| + | </div> | ||
| + | <div class='slide'> | ||
| + | <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--HP_3_ni%C3%B1ossolos.jpg" /> | ||
| + | </div> | ||
| + | <div class='slide'> | ||
| + | <img src="https://static.igem.org/mediawiki/2018/f/f5/T--Tec-Monterrey--HP_3_trabajando.jpg" /> | ||
| + | </div> | ||
| + | <div class='slide'> | ||
| + | <img src="https://static.igem.org/mediawiki/2018/b/be/T--Tec-Monterrey--HP_3_todos.jpg" /> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <script> | ||
| + | var screen_900 = window.matchMedia("(max-width: 900px)"); | ||
| + | var screen_1024 = window.matchMedia("(min-width: 1024px)"); | ||
| + | var screen_1280 = window.matchMedia("(min-width: 1280px)"); | ||
| + | var screen_1440 = window.matchMedia("(min-width: 1440px)"); | ||
| + | var screen_1680 = window.matchMedia("(min-width: 1680px)"); | ||
| + | var screen_1920 = window.matchMedia("(min-width: 1920px)"); | ||
| + | var position = 3000; | ||
| + | |||
| + | $(window).on('beforeunload', function() { | ||
| + | $(window).scrollTop(0); | ||
| + | }); | ||
| + | |||
| + | if (screen_900.matches) { | ||
| + | var timeoutVar = 0; | ||
| + | } else if (screen_1024.matches) { | ||
| + | position = 3450; | ||
| + | var timeoutVar = setTimeout(function() { | ||
| + | $(window).scrollTop(0); | ||
| + | }, 8000); | ||
| + | } else if (screen_1280.matches) { | ||
| + | position = 4500; | ||
| + | var timeoutVar = setTimeout(function() { | ||
| + | $(window).scrollTop(0); | ||
| + | }, 8000); | ||
| + | } else if (screen_1440.matches) { | ||
| + | position = 6000; | ||
| + | var timeoutVar = setTimeout(function() { | ||
| + | $(window).scrollTop(0); | ||
| + | }, 8000); | ||
| + | } else if (screen_1680.matches) { | ||
| + | position = 6500; | ||
| + | var timeoutVar = setTimeout(function() { | ||
| + | $(window).scrollTop(0); | ||
| + | }, 8000); | ||
| + | } else if (screen_1920.matches) { | ||
| + | position = 7500; | ||
| + | var timeoutVar = setTimeout(function() { | ||
| + | $(window).scrollTop(0); | ||
| + | }, 8000); | ||
| + | } else { | ||
| + | var timeoutVar = setTimeout(function() { | ||
| + | $(window).scrollTop(0); | ||
| + | }, 8000); | ||
} | } | ||
| − | + | ||
| − | function | + | function slideVideo() { |
| − | + | $("#video-main-page").css('transform', 'translateY(-100%)'); | |
| − | + | $("#skip-btn").css('transform', 'translateY(-100%)'); | |
| − | + | $("#skip-btn").css({ | |
| − | + | 'top': '-10%' | |
| − | + | }); | |
} | } | ||
| − | function | + | function map(value, in_min, in_max, out_min, out_max) { |
| − | + | return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | ||
| − | + | //******************************************************* SCROLL OPACITY *********************************************** | |
| − | + | ||
| − | + | var hiding = document.getElementById("hiding-block"); | |
| − | $( | + | var bacteria = document.getElementById("bacteria-nadando"); |
| − | + | ||
| − | + | $(window).scroll(function(event) { | |
| − | + | ||
| − | + | var hidingPos = hiding.offsetTop; | |
| − | + | var bacteriaPos = bacteria.offsetTop; | |
| − | + | ||
| − | + | var scroll = $(window).scrollTop(); | |
| − | + | var scrollOpacity = map(scroll, 0, 350, 1, 0); | |
| − | + | //var scrollFade = map(scroll, 350, 0, 0, 1); | |
| − | + | var bacteriaOpacity = map(scroll, 0, 500, 0, 1); | |
| − | + | var bacteriaTop = map(scroll, 900, 2000, -100, 100); | |
| − | + | var bacteriaRotate = map(scroll, 0, 700, 50, 0); | |
| − | + | if (scroll > hidingPos) { | |
| − | + | $('#bacteria-nadando ').css('opacity', '0'); | |
| − | + | } else { | |
| − | + | $('#bacteria-nadando ').css('opacity', bacteriaOpacity); | |
| − | + | $('#bacteria-nadando ').css('top', bacteriaTop + 'px'); | |
| − | $('# | + | |
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | ); | + | }); |
| − | /*--- | + | //******************************************************* Video Controls ******************************************* |
| + | |||
| + | $("#video-main-page").bind("ended", function() { | ||
| + | slideVideo() | ||
| + | }); | ||
| + | |||
| + | $("#skip-btn").click(function() { | ||
| + | clearTimeout(timeoutVar); | ||
| + | $(window).scrollTop(0); | ||
| + | slideVideo(); | ||
| + | }); | ||
| + | |||
| + | |||
</script> | </script> | ||
| + | <script type="text/javascript" src="https://2018.igem.org/Team:Purdue/JQuery/SlideShow? | ||
| + | action=raw&ctype=text/javascript"></script> | ||
| + | </section> | ||
| + | </body> | ||
| − | |||
| − | |||
| − | |||
| − | |||
</html> | </html> | ||
| − | + | {{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}} | |
| − | + | ||
Latest revision as of 01:29, 18 October 2018
Home
E. coding
Tec-Monterrey
DRAG AND DROP!
Pb
NO3
PO4
As
