"
Team:Northwestern
From 2014.igem.org
(Difference between revisions)
| Line 196: | Line 196: | ||
</div><!-- /.container --> | </div><!-- /.container --> | ||
| + | <div id="bg1" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div> | ||
| + | <div id="bg2" data-0="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div> | ||
| + | <div id="bg3" data-0="background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div> | ||
| + | |||
| + | <div id="progress" data-0="width:0%;background:hsl(200, 100%, 50%);" data-end="width:100%;background:hsl(920, 100%, 50%);"></div> | ||
| + | |||
| + | <div id="intro" data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-500="opacity:0;top:-10%;transform:rotate(-90deg);"> | ||
| + | <h1><a href="https://github.com/Prinzhorn/skrollr">skrollr</a></h1> | ||
| + | <h2>parallax scrolling for the masses</h2> | ||
| + | <p>let's get scrollin' ;-)</p> | ||
| + | <p class="arrows">▼ ▼ ▼</p> | ||
| + | </div> | ||
| + | |||
| + | <div id="transform" data-500="transform:scale(0) rotate(0deg);" data-1000="transform:scale(1) rotate(1440deg);opacity:1;" data-1600="" data-1700="transform:scale(5) rotate(3240deg);opacity:0;"> | ||
| + | <h2>transform</h2> | ||
| + | <p>scale, skew and rotate the sh** out of any element</p> | ||
| + | </div> | ||
| + | |||
| + | <div id="properties" data-1700="top:100%;" data-2200="top:0%;" data-3000="display:block;" data-3700="top:-100%;display:none;"> | ||
| + | <h2>all numeric properties</h2> | ||
| + | <p>width, height, padding, font-size, z-index, blah blah blah</p> | ||
| + | </div> | ||
| + | |||
| + | <div id="easing_wrapper" data-0="display:none;" data-3900="display:block;" data-4900="background:rgba(0, 0, 0, 0);color[swing]:rgb(0,0,0);" data-5900="background:rgba(0,0,0,1);color:rgb(255,255,255);" data-10000="top:0%;" data-12000="top:-100%;"> | ||
| + | <div id="easing" data-3900="left:100%" data-4600="left:25%;"> | ||
| + | <h2>easing?</h2> | ||
| + | <p>sure.</p> | ||
| + | <p>let me dim the <span data-3900="" data-4900="color[swing]:rgb(0,0,0);" data-5900="color:rgb(255,255,0);">lights</span> for this one...</p> | ||
| + | <p data-5900="opacity:0;font-size:100%;" data-6500="opacity:1;font-size:150%;">you can set easings for each property and define own easing functions</p> | ||
| + | </div> | ||
| + | |||
| + | <div class="drop" data-6500="left:15%;bottom:100%;" data-9500="bottom:0%;">linear</div> | ||
| + | <div class="drop" data-6500="left:25%;bottom[quadratic]:100%;" data-9500="bottom:0%;">quadratic</div> | ||
| + | <div class="drop" data-6500="left:35%;bottom[cubic]:100%;" data-9500="bottom:0%;">cubic</div> | ||
| + | <div class="drop" data-6500="left:45%;bottom[swing]:100%;" data-9500="bottom:0%;">swing</div> | ||
| + | <div class="drop" data-6500="left:55%;bottom[WTF]:100%;" data-9500="bottom:0%;">WTF</div> | ||
| + | <div class="drop" data-6500="left:65%;bottom[inverted]:100%;" data-9500="bottom:0%;">inverted</div> | ||
| + | <div class="drop" data-6500="left:75%;bottom[bounce]:100%;" data-9500="bottom:0%;">bounce</div> | ||
| + | </div> | ||
| + | |||
| + | <div id="download" data-10000="top[cubic]:100%;border-radius[cubic]:0em;background:rgb(0,50,100);border-width:0px;" data-12000="top:10%;border-radius:2em;background:rgb(190,230,255);border-width:10px;"> | ||
| + | <h2>the end</h2> | ||
| + | <p>by the way, you can also animate colors (you did notice this, didn't you?)</p> | ||
| + | <p><strong>Now get this thing on <a href="https://github.com/Prinzhorn/skrollr">GitHub</a> and spread the word, it's open source!</strong> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://prinzhorn.github.com/skrollr/" data-via="Prinzhorn">Tweet</a> | ||
| + | <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p> | ||
| + | <p>Check out more <a href="https://github.com/Prinzhorn/skrollr/tree/master/examples#examples">examples</a>.</p> | ||
| + | <p>Handcrafted by <a href="https://twitter.com/Prinzhorn" class="twitter-follow-button" data-show-count="false">Follow @Prinzhorn</a> | ||
| + | <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p> | ||
| + | </div> | ||
| + | |||
| + | <div id="scrollbar" data-0="top:0%;margin-top:2px;" data-end="top:100%;margin-top:-52px;"></div> | ||
| + | |||
| + | |||
| + | <script type="text/javascript"> | ||
| + | var s = skrollr.init({ | ||
| + | edgeStrategy: 'set', | ||
| + | easing: { | ||
| + | WTF: Math.random, | ||
| + | inverted: function(p) { | ||
| + | return 1-p; | ||
| + | } | ||
| + | } | ||
| + | }); | ||
| + | </script> | ||
| Line 201: | Line 265: | ||
================================================== --> | ================================================== --> | ||
<!-- Placed at the end of the document so the pages load faster --> | <!-- Placed at the end of the document so the pages load faster --> | ||
| - | + | ||
| + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | ||
<script type="text/javascript> | <script type="text/javascript> | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
| Line 214: | Line 279: | ||
<script src="http://www.bootstrap/javascript/assets/js/docs.min.js"></script> | <script src="http://www.bootstrap/javascript/assets/js/docs.min.js"></script> | ||
| - | + | ||
| + | <script src="http://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.26/skrollr.min.js"></script> | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 20:04, 17 September 2014
NU Models: Breaking Down Walls!
NU Models seeks to expand ribosome binding site characterization of E. Coli to other non-model organisms chosen for their promise in other fields of research. All processes take place in a cell-free system to provide a consistent characterization platform. This information is useful in synthetic biology applications for healthcare, the environment, and industry as it provides a basis for DNA design in organisms other than E. coli that are more optimized for the needs of a given application.
Heading
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Heading
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.
