Team:Calgary

From 2014.igem.org

(Difference between revisions)
(Prototype team page)
(Testing Parallax Effect)
Line 1: Line 1:
{{CSS/Main}}
{{CSS/Main}}
 +
<html>
<html>
 +
<head>
 +
<meta charset="utf-8">
 +
<meta name="viewport" content="width=device-width">
 +
<title>A grouped pure CSS parallax demo by Keith Clark</title>
 +
<link rel="stylesheet" href="../demo.css">
 +
<style>
-
<!--main content -->
+
  /* Parallax base styles
-
<table width="70%" align="center">
+
  --------------------------------------------- */
-
 
+
-
 
+
-
<!--welcome box -->
+
-
<tr>
+
-
<td style="border:1px solid black;" colspan="3" align="center" height="150px" bgColor=#FF404B>
+
-
<h1 >WELCOME TO iGEM 2014! </h1>
+
-
<p>Your team has been approved and you are ready to start the iGEM season!
+
-
<br>On this page you can document your project, introduce your team members, document your progress <br> and share your iGEM experience with the rest of the world! </p>
+
-
<br>
+
-
<p style="color:#E7E7E7"> <a href="https://2014.igem.org/wiki/index.php?title=Team:Calgary&action=edit"style="color:#FFFFFF"> Click here  to edit this page!</a> </p>
+
-
</td>
+
-
</tr>
+
-
 
+
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
-
<!-- end welcome box -->
+
-
<tr>
+
-
 
+
-
<!--navigation menu -->
+
-
<td align="center" colspan="3">
+
-
 
+
-
<table  width="100%">
+
-
<tr heigth="15px"></tr>
+
-
<tr heigth="75px">
+
-
 
+
-
 
+
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
-
<a href="https://2014.igem.org/Team:Calgary"style="color:#000000">Home </a> </td>
+
-
 
+
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
-
<a href="https://2014.igem.org/Team:Calgary/Team"style="color:#000000"> Team </a> </td>
+
-
 
+
-
<td style="border:1px solid black;" align="center"  height ="45px"  onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
-
<a href="https://igem.org/Team.cgi?year=2014&team_name=Calgary"style="color:#000000"> Official Team Profile </a></td>
+
-
 
+
-
<td style="border:1px solid black" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
-
<a href="https://2014.igem.org/Team:Calgary/Project"style="color:#000000"> Project</a></td>
+
-
 
+
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
-
<a href="https://2014.igem.org/Team:Calgary/Parts"style="color:#000000"> Parts</a></td>
+
-
 
+
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
-
<a href="https://2014.igem.org/Team:Calgary/Modeling"style="color:#000000"> Modeling</a></td>
+
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
  .parallax {
-
<a href="https://2014.igem.org/Team:Calgary/Notebook"style="color:#000000"> Notebook</a></td>
+
    height: 500px; /* fallback for older browsers */
 +
    height: 100vh;
 +
    overflow-x: hidden;
 +
    overflow-y: auto;
 +
    -webkit-perspective: 300px;
 +
    perspective: 300px;
 +
  }
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
  .parallax__group {
-
<a href="https://2014.igem.org/Team:Calgary/Safety"style=" color:#000000"> Safety </a></td>
+
    position: relative;
 +
    height: 500px; /* fallback for older browsers */
 +
    height: 100vh;
 +
    -webkit-transform-style: preserve-3d;
 +
    transform-style: preserve-3d;
 +
  }
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
  .parallax__layer {
-
<a href="https://2014.igem.org/Team:Calgary/Attributions"style="color:#000000"> Attributions </a></td>
+
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    right: 0;
 +
    bottom: 0;
 +
  }
 +
  .parallax__layer--fore {
 +
    -webkit-transform: translateZ(90px) scale(.7);
 +
    transform: translateZ(90px) scale(.7);
 +
    z-index: 1;
 +
  }
-
<td align ="center"> <a href="https://2014.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"></a> </td>
+
  .parallax__layer--base {
-
</tr>
+
    -webkit-transform: translateZ(0);
-
</table>
+
    transform: translateZ(0);
 +
    z-index: 4;
 +
  }
-
<!--end navigation menu -->
+
  .parallax__layer--back {
-
</tr>
+
    -webkit-transform: translateZ(-300px) scale(2);
 +
    transform: translateZ(-300px) scale(2);
 +
    z-index: 3;
 +
  }
 +
  .parallax__layer--deep {
 +
    -webkit-transform: translateZ(-600px) scale(3);
 +
    transform: translateZ(-600px) scale(3);
 +
    z-index: 2;
 +
  }
-
</tr>
 
-
 
 +
  /* Debugger styles - used to show the effect
 +
  --------------------------------------------- */
 +
  .debug {
 +
    position: fixed;
 +
    top: 0;
 +
    left: .5em;
 +
    z-index: 999;
 +
    background: rgba(0,0,0,.85);
 +
    color: #fff;
 +
    padding: .5em;
 +
    border-radius: 0 0 5px 5px;
 +
  }
 +
  .debug-on .parallax__group {
 +
    -webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg);
 +
    transform: translate3d(700px, 0, -800px) rotateY(30deg);
 +
}
 +
  .debug-on .parallax__layer {
 +
    box-shadow: 0 0 0 2px #000;
 +
    opacity: 0.9;
 +
  }
 +
  .parallax__group {
 +
    -webkit-transition: -webkit-transform 0.5s;
 +
    transition: transform 0.5s;
 +
  }
-
</td>
+
  /* demo styles
 +
  --------------------------------------------- */
-
<tr> <td colspan="3"  height="15px"> </td></tr>
+
  body, html {
-
<tr><td bgColor="#e7e7e7" colspan="3" height="1px"> </tr>
+
    overflow: hidden;
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
  }
 +
  body {
 +
    font: 100% / 1.5 Arial;
 +
  }
-
<!--requirements section -->
+
  * {
-
<tr><td colspan="3"> <h3> Requirements </h3></td></tr>
+
    margin:0;
-
<tr>
+
    padding:0;
-
<td width="45%"  valign="top">
+
  }
-
<p> Please be sure to keep these links, your audience will want to find your: </p>
+
  .parallax {
 +
    font-size: 200%;
 +
  }
-
<!-- Links to other team pages -->
+
  /* centre the content in the parallax layers */
-
<ul>
+
  .title {
-
<li><a href="https://2014.igem.org/Team:Calgary">Home</a> </li>
+
    text-align: center;
-
<li><a href="https://2014.igem.org/Team:Calgary/Team">Team</a> </li>
+
    position: absolute;
-
<li><a href="https://igem.org/Team.cgi?year=2013&team_name=Calgary">Official Team Profile</a> </li>
+
    left: 50%;
-
<li><a href="https://2014.igem.org/Team:Calgary/Project">Project</a> </li>
+
    top: 50%;
-
<li><a href="https://2014.igem.org/Team:Calgary/Parts">Parts</a> </li>
+
    -webkit-transform: translate(-50%, -50%);
-
<li><a href="https://2014.igem.org/Team:Calgary/Modeling">Modeling</a> </li>
+
    transform: translate(-50%, -50%);
-
<li><a href="https://2014.igem.org/Team:Calgary/Notebook">Notebook</a> </li>
+
  }
-
<li><a href="https://2014.igem.org/Team:Calgary/Safety">Safety</a> </li>
+
-
<li><a href="https://2014.igem.org/Team:Calgary/Attributions">Attributions</a> </li>
+
-
</ul>
 
-
</td>
 
-
<td > </td>
+
  /* style the groups
-
<td width="45%">
+
  --------------------------------------------- */
-
<p>There are a few wiki requirements teams must follow:</p>
+
  #group1 {
-
<ul>
+
    z-index: 5; /* slide over group 2 */
-
<li>All pages, images and files must be hosted on the <a href ="https://2014.igem.org/Special:Upload">  2014.igem.org server</a>. </li>
+
  }
-
<li>All pages must be created under the team’s name space.</li>
+
  #group1 .parallax__layer--base {
-
<li>As part of your documentation, keep the links from the menu to the left. </li>
+
    background: rgb(102,204,102);
-
<li>Do not use flash in wiki code. </li>
+
  }
-
<li>The <a href="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png"> iGEM logo </a> should be placed on the upper part of every page and should link to <a href="https://2014.igem.org/Main_Page">2014.igem.org</a>.</li>
+
-
</ul>
+
-
<p>Visit the <a href="https://2014.igem.org/Wiki_How-To"> Wiki How To page </a> for a complete list of requirements, tips and other useful information. </p>
+
-
</td>
+
  #group2 {
-
</tr>
+
    z-index: 3; /* slide under groups 1 and 3 */
 +
  }
 +
  #group2 .parallax__layer--back {
 +
    background: rgb(123,210,102);
 +
  }
 +
  #group3 {
 +
    z-index: 4; /* slide over group 2 and 4 */
 +
  }
 +
  #group3 .parallax__layer--base {
 +
    background: rgb(153,216,101);
 +
  }
-
<tr> <td colspan="3"  height="15px"> </td></tr>
+
  #group4 {
-
<tr><td bgColor="#e7e7e7" colspan="3" height="1"> </tr>
+
    z-index: 2; /* slide under group 3 and 5 */
 +
  }
 +
  #group4 .parallax__layer--deep {
 +
    background: rgb(184,223,101);
 +
  }
 +
  #group5 {
 +
    z-index: 3; /* slide over group 4 and 6 */
 +
  }
 +
  #group5 .parallax__layer--base {
 +
    background: rgb(214,229,100);
 +
  }
-
<!--tips  -->
+
  #group6 {
-
<tr><td colspan="3" > <h3> Tips  </h3></td></tr>
+
    z-index: 2; /* slide under group 5 and 7 */
 +
  }
 +
  #group6 .parallax__layer--back {
 +
    background: rgb(245,235,100);
 +
  }
-
<tr>
+
  #group7 {
-
<td width="45%" valign="top">
+
    z-index: 3; /* slide over group 7 */
-
<p>We are currently working on providing teams with some easy to use design templates.
+
  }
-
<br> In the meantime you can also view other team wikis for inspiration! Here are some very good examples</p>
+
  #group7 .parallax__layer--base {
 +
    background: rgb(255,241,100);
 +
  }
 +
</style>
 +
</head>
-
<ul>
+
<body>
-
<li> <a href="https://2013.igem.org/Team:SDU-Denmark/"> 2013 SDU Denmark </a> </li>
+
-
<li> <a href="https://2013.igem.org/Team:SYSU-China">2013 SYSU China</a> </li>
+
-
<li> <a href="https://2013.igem.org/Team:Shenzhen_BGIC_ATCG"> 2013 Shenxhen BGIG ATCG </a></li>
+
-
<li> <a href="https://2013.igem.org/Team:Colombia_Uniandes">2013 Colombia Unianades </a></li>
+
-
<li> <a href="https://2013.igem.org/Team:Lethbridge">2013 Lethbridge</a></li>
+
-
</ul>
+
-
<p>For a full wiki list, you can visit <a href="https://igem.org/Team_Wikis?year=2013">iGEM 2013 web sites </a> and <a href="https://igem.org/Team_Wikis?year=2012">iGEM 2012 web sites</a> lists. </p>
+
  <div class="debug">
-
</td>
+
    <label><input type="checkbox"> Debug</label>
 +
  </div>
 +
  <div class="demo__info">
 +
    Pure CSS parallax scroll demo #3 by Keith Clark. Please read the <a href="http://blog.keithclark.co.uk/pure-css-parallax-websites/">blog post</a> for more information.
 +
  </div>
-
<td> </td>
+
  <div class="parallax">
-
<td width="45%">  
+
    <div id="group1" class="parallax__group">
 +
      <div class="parallax__layer parallax__layer--base">
 +
        <div class="title">Base Layer</div>
 +
      </div>
 +
    </div>
 +
    <div id="group2" class="parallax__group">
 +
      <div class="parallax__layer parallax__layer--base">
 +
        <div class="title">Base Layer</div>
 +
      </div>
 +
      <div class="parallax__layer parallax__layer--back">
 +
        <div class="title">Background Layer</div>
 +
      </div>
 +
    </div>
 +
    <div id="group3" class="parallax__group">
 +
      <div class="parallax__layer parallax__layer--fore">
 +
        <div class="title">Foreground Layer</div>
 +
      </div>
 +
      <div class="parallax__layer parallax__layer--base">
 +
        <div class="title">Base Layer</div>
 +
      </div>
 +
    </div>
 +
    <div id="group4" class="parallax__group">
 +
      <div class="parallax__layer parallax__layer--base">
 +
        <div class="title">Base Layer</div>
 +
      </div>
 +
      <div class="parallax__layer parallax__layer--back">
 +
        <div class="title">Background Layer</div>
 +
      </div>
 +
      <div class="parallax__layer parallax__layer--deep">
 +
        <div class="title">Deep Background Layer</div>
 +
      </div>
 +
    </div>
 +
    <div id="group5" class="parallax__group">
 +
      <div class="parallax__layer parallax__layer--fore">
 +
        <div class="title">Foreground Layer</div>
 +
      </div>
 +
      <div class="parallax__layer parallax__layer--base">
 +
        <div class="title">Base Layer</div>
 +
      </div>
 +
    </div>
 +
    <div id="group6" class="parallax__group">
 +
      <div class="parallax__layer parallax__layer--back">
 +
        <div class="title">Background Layer</div>
 +
      </div>
 +
      <div class="parallax__layer parallax__layer--base">
 +
        <div class="title">Base Layer</div>
 +
      </div>
 +
    </div>
 +
    <div id="group7" class="parallax__group">
 +
      <div class="parallax__layer parallax__layer--base">
 +
        <div class="title">Base Layer</div>
 +
      </div>
 +
    </div>
 +
  </div>
-
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
  <script>
 +
    var debugInput = document.querySelector("input");
 +
    function updateDebugState() {
 +
        document.body.classList.toggle('debug-on', debugInput.checked);
 +
    }
 +
    debugInput.addEventListener("click", updateDebugState);
 +
    updateDebugState();
 +
  </script>
-
<ul>
+
  <script type="text/javascript">
-
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
  var _gaq = _gaq || [];
-
<li>Be clear about what you are doing and what you plan to do.</li>
+
  _gaq.push(['_setAccount', 'UA-10812217-3']);
-
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
  _gaq.push(['_trackPageview']);
-
<li>Make sure information is easy to find; nothing should be more than 3 clicks away. </li>
+
  (function() {
-
<li>Avoid using very small fonts and low contrast colors; information should be easy to read. </li>
+
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="">iGEM 2013 calendar</a> </li>
+
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-
<li>Have lots of fun! </li>
+
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-
</ul>
+
  })();
-
</br>
+
  </script>  
-
</td>
+
</body>
-
</tr>
+
</html>
-
</table>
+

Revision as of 17:40, 12 August 2014


A grouped pure CSS parallax demo by Keith Clark

Pure CSS parallax scroll demo #3 by Keith Clark. Please read the blog post for more information.
Base Layer
Base Layer
Background Layer
Foreground Layer
Base Layer
Base Layer
Background Layer
Deep Background Layer
Foreground Layer
Base Layer
Background Layer
Base Layer
Base Layer

Retrieved from "http://2014.igem.org/Team:Calgary"