Line 3: | Line 3: | ||
<html> | <html> | ||
+ | |||
+ | <script> | ||
+ | |||
+ | window.onscroll = function() {FunctionOne(),FunctionTwo(),FunctionThree(),FunctionFour()}; | ||
+ | |||
+ | function FunctionOne() { | ||
+ | if (document.body.scrollTop > 50 ) { | ||
+ | document.getElementById("blah").className = "testLeft"; | ||
+ | } else { | ||
+ | document.getElementById("blah").className = ""; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | function FunctionTwo() { | ||
+ | if (document.body.scrollTop > 550 ) { | ||
+ | document.getElementById("blahTwo").className = "testLeft"; | ||
+ | } else { | ||
+ | document.getElementById("blahTwo").className = ""; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function FunctionThree() { | ||
+ | if (document.body.scrollTop > 1000 ) { | ||
+ | document.getElementById("blahThree").className = "testLeft"; | ||
+ | } else { | ||
+ | document.getElementById("blahThree").className = ""; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function FunctionFour() { | ||
+ | if (document.body.scrollTop > 1400 ) { | ||
+ | document.getElementById("blahFour").className = "testLeft"; | ||
+ | } else { | ||
+ | document.getElementById("blahFour").className = ""; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </script> | ||
<style> | <style> | ||
Line 81: | Line 121: | ||
+ | @keyframes scrollUp{ | ||
+ | from{opacity: 0; } | ||
+ | to{opacity: 1; } | ||
+ | } | ||
+ | |||
+ | .testLeft{ | ||
+ | visibility: visible; | ||
+ | animation-name: scrollUp; | ||
+ | animation-duration: 1s; | ||
+ | } | ||
+ | |||
+ | .testFinal{ | ||
+ | animation-name: scrollUp; | ||
+ | animation-duration: 1s; | ||
+ | |||
+ | } | ||
+ | |||
+ | .bodyHead{ | ||
+ | margin: auto; | ||
+ | text-align: justify; | ||
+ | font-family: inconsolata, sans-serif; | ||
+ | line-height: 60px; | ||
+ | font-size: 30px; | ||
+ | max-width: 725px; | ||
+ | margin-top: 25%; | ||
+ | clear: right; | ||
+ | visibility: hidden; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .floatLeft{ | ||
+ | float: left; | ||
+ | font-family: inconsolata, sans-serif; | ||
+ | font-size: 25px; | ||
+ | max-width: 350px; | ||
+ | margin-left: 10%; | ||
+ | margin-top: 25%; | ||
+ | clear: right; | ||
+ | visibility: hidden; | ||
+ | color: white; | ||
+ | text-align: justify; | ||
+ | |||
+ | } | ||
+ | |||
+ | .floatRight{ | ||
+ | float: right; | ||
+ | font-family: inconsolata, sans-serif; | ||
+ | font-size: 25px; | ||
+ | max-width: 400px; | ||
+ | margin-right: 10%; | ||
+ | margin-top: 25%; | ||
+ | clear: left; | ||
+ | visibility: hidden; | ||
+ | color: white; | ||
+ | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .floatLast{ | ||
+ | float: left; | ||
+ | font-family: inconsolata, sans-serif; | ||
+ | font-size: 25px; | ||
+ | max-width: 400px; | ||
+ | margin-left: 10%; | ||
+ | margin-top: 60%; | ||
+ | margin-bottom: 30%; | ||
+ | text-align: justify; | ||
+ | clear: left; | ||
+ | visibility: hidden; | ||
+ | color: white; | ||
+ | } | ||
</style> | </style> | ||
Line 107: | Line 217: | ||
</section> | </section> | ||
+ | <section> | ||
Revision as of 16:57, 18 August 2017
![](https://static.igem.org/mediawiki/2017/5/5a/T-CU-Boulder--CellThree.gif)
![](https://static.igem.org/mediawiki/2017/b/b8/T-CU-Boulder--CellTwo.gif)
![](https://static.igem.org/mediawiki/2017/2/2f/T-CU-Boulder--CellOne.gif)
![](https://static.igem.org/mediawiki/2017/5/5a/T-CU-Boulder--CellThree.gif)
![](https://static.igem.org/mediawiki/2017/b/b8/T-CU-Boulder--CellTwo.gif)