Difference between revisions of "Team:Harvard BioDesign"

Line 56: Line 56:
 
}
 
}
  
 +
/* Scroll BUTTON */
 +
/* the important styles */
 +
 +
.arrow-wrap {
 +
  position:absolute;
 +
  z-index:1;
 +
  left:50%;
 +
  top:-5em;
 +
  margin-left:-5em;
 +
  background:#111;
 +
  width:10em;
 +
  height:10em;
 +
  padding:4em 2em;
 +
  border-radius:50%;
 +
  font-size:0.5em;
 +
  display:block;
 +
  box-shadow:0px 0px 5px 0px #333;
 +
}
 +
 +
.arrow {
 +
  float:left;
 +
  position:relative;
 +
  width: 0px;
 +
height: 0px;
 +
border-style: solid;
 +
border-width: 3em 3em 0 3em;
 +
border-color: #ffffff transparent transparent transparent;
 +
  -webkit-transform:rotate(360deg)
 +
}
 +
 +
.arrow:after {
 +
  content:'';
 +
  position:absolute;
 +
  top:-3.2em;
 +
  left:-3em;
 +
  width: 0px;
 +
height: 0px;
 +
border-style: solid;
 +
border-width: 3em 3em 0 3em;
 +
border-color: #111 transparent transparent transparent;
 +
  -webkit-transform:rotate(360deg)
 +
}
 +
 +
.hint {
 +
  position:absolute;
 +
  top:0.6em;
 +
  width:100%;
 +
  left:0;
 +
  font-size:2em;
 +
  font-style:italic;
 +
  text-align:center;
 +
  color:#fff;
 +
  opacity:0;
 +
}
 +
 +
 +
.arrow-wrap:hover .hint {
 +
  opacity:1;
 +
}
 +
 +
 +
  @-webkit-keyframes arrows {
 +
    0% { top:0; }
 +
    10% { top:12%; }
 +
    20% { top:0; }
 +
    30% { top:12%; }
 +
    40% { top:-12%; }
 +
    50% { top:12%; }
 +
    60% { top:0; }
 +
    70% { top:12%; }
 +
    80% { top:-12%; }
 +
    90% { top:12%; }
 +
    100% { top:0; }
 +
  }
 +
 
 +
  .arrow-wrap .arrow {
 +
    -webkit-animation: arrows 2.8s 0.4s;
 +
    -webkit-animation-delay: 3s;
 +
  }
 
</style>
 
</style>
 +
 +
<script>
 +
//this is where we apply opacity to the arrow
 +
$(window).scroll( function(){
 +
 +
  //get scroll position
 +
  var topWindow = $(window).scrollTop();
 +
  //multipl by 1.5 so the arrow will become transparent half-way up the page
 +
  var topWindow = topWindow * 1.5;
 +
 
 +
  //get height of window
 +
  var windowHeight = $(window).height();
 +
     
 +
  //set position as percentage of how far the user has scrolled
 +
  var position = topWindow / windowHeight;
 +
  //invert the percentage
 +
  position = 1 - position;
 +
 +
  //define arrow opacity as based on how far up the page the user has scrolled
 +
  //no scrolling = 1, half-way up the page = 0
 +
  $('.arrow-wrap').css('opacity', position);
 +
 +
});
 +
 +
//Code stolen from css-tricks for smooth scrolling:
 +
$(function() {
 +
  $('a[href*=#]:not([href=#])').click(function() {
 +
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
 +
      var target = $(this.hash);
 +
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
 +
      if (target.length) {
 +
        $('html,body').animate({
 +
          scrollTop: target.offset().top
 +
        }, 1000);
 +
        return false;
 +
      }
 +
    }
 +
  });
 +
});
 +
</script>
  
 
   </head>
 
   </head>
Line 93: Line 212:
 
             </ul>
 
             </ul>
 
</nav>
 
</nav>
 +
 +
 +
<!-- ASDSADASDASDA -->
 +
<a class="arrow-wrap" href="#content">
 +
<span class="arrow"></span>
 +
<!--<span class="hint">scroll</span>-->
 +
</a>
 +
<!-- ASDSADASDASDA -->
 +
 +
 
</div>
 
</div>
 
<!--#top-->
 
<!--#top-->

Revision as of 00:16, 19 September 2015


Prologue by HTML5 UP

Welcome to the Harvard BioDesign 2015 wiki!


The "official" place where flocculation happens and llamas are appreciated.

Email Logo
Curious?
Project Logo

Learn what we are all about. Here you can learn how we set up and conducted our research.

Accomplish Logo

Find our major accomplishments here and where we plan to go with them.

Notebook Logo

The story of our hard work.

Parts Logo

View the parts we created.

Practices Logo

A guide to how to take research to the next level.

Safety Logo

Safety is what really matters.

Collabs Logo

Outreach to our fellow iGEMers.

Team Logo

See who participated on this year’s iGEM team.

Attributions Logo

A shoutout to those who made us possible.