Team:British Columbia/test

From 2014.igem.org

(Difference between revisions)
 
(2 intermediate revisions not shown)
Line 7: Line 7:
-
<!-- ====== Scroll Animation ====== -->
+
<!-- ====== Style ====== -->
 +
<style>
-
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
+
 
-
    <script type="text/javascript" src="https://2014.igem.org/Team:StanfordBrownSpelman/jquery.scroll?action=raw&ctype=text/js"></script>
+
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
-
</head>
+
.clearfix:before, .clearfix:after { content: ''; display: table; }
 +
.clearfix:after { clear: both; }
 +
 
 +
body {
 +
background: #b4bad2;
 +
color: #fffce1;
 +
font-weight: 400;
 +
font-size: 1em;
 +
font-family: 'Raleway', Arial, sans-serif;
 +
}
 +
 
 +
a {
 +
color: #4e4a46;
 +
text-decoration: none;
 +
outline: none;
 +
}
 +
 
 +
a:hover, a:focus {
 +
color: #c94e50;
 +
outline: none;
 +
}
 +
 
 +
button:focus {
 +
outline: none;
 +
}
 +
 
 +
section {
 +
padding: 1em;
 +
text-align: center;
 +
}
 +
 
 +
/* Header */
 +
.codrops-header {
 +
margin: 0 auto;
 +
padding: 3em 2em;
 +
text-align: center;
 +
}
 +
 
 +
.codrops-header h1 {
 +
margin: 0 auto;
 +
font-weight: 800;
 +
font-size: 3.75em;
 +
line-height: 1;
 +
}
 +
 
 +
.codrops-header h1 span {
 +
display: block;
 +
font-size: 50%;
 +
font-weight: 400;
 +
padding-top: 0.325em;
 +
}
 +
 
 +
 
 +
/* Demo Buttons Style */
 +
.codrops-demos {
 +
font-size: 1em;
 +
max-width: 1200px;
 +
margin: 3em auto 5em;
 +
padding: 2em 10em 0;
 +
}
 +
 
 +
.codrops-demos > a {
 +
display: inline-block;
 +
margin: 0.75em;
 +
padding: 1.35em 1.1em;
 +
width: 15em;
 +
background: #fffce1;
 +
outline: none;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
letter-spacing: 1px;
 +
font-weight: 800;
 +
border-radius: 20px/50px;
 +
}
 +
 
 +
.codrops-demos > a.current-demo {
 +
background: #c94e50;
 +
color: #fffce1;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
@media screen and (max-width: 40em) {
 +
body {
 +
font-size: 80%;
 +
}
 +
.codrops-header h1 {
 +
font-size: 2.5em;
 +
}
 +
.codrops-demos {
 +
max-width: 900px;
 +
padding: 2em 2em 0;
 +
}
 +
.related > a {
 +
margin: 20px 0;
 +
}
 +
}
 +
 
 +
@media screen and (max-width: 25em) {
 +
 
 +
.codrops-icon {
 +
font-size: 250%;
 +
}
 +
 
 +
.codrops-icon span {
 +
display: none;
 +
}
 +
 
 +
}
 +
 
 +
<!-- ====  Menu TopSide ==== -->
 +
 
 +
html,
 +
body,
 +
.container,
 +
.content-wrap {
 +
overflow: hidden;
 +
width: 100%;
 +
height: 100%;
 +
}
 +
 
 +
.container {
 +
background: #373a47;
 +
}
 +
 
 +
.menu-wrap a {
 +
color: #b8b7ad;
 +
}
 +
 
 +
.menu-wrap a:hover,
 +
.menu-wrap a:focus {
 +
color: #c94e50;
 +
}
 +
 
 +
.content-wrap {
 +
overflow-y: scroll;
 +
-webkit-overflow-scrolling: touch;
 +
-webkit-transition: -webkit-transform 0.3s;
 +
transition: transform 0.3s;
 +
}
 +
 
 +
.content {
 +
position: relative;
 +
background: #b4bad2;
 +
}
 +
 
 +
/* Overlay */
 +
.content::before {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
z-index: 10;
 +
width: 100%;
 +
height: 100%;
 +
background: rgba(0,0,0,0.3);
 +
content: '';
 +
opacity: 0;
 +
-webkit-transform: translate3d(100%,0,0);
 +
transform: translate3d(100%,0,0);
 +
-webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s;
 +
transition: opacity 0.3s, transform 0s 0.3s;
 +
}
 +
 
 +
/* Menu Button */
 +
.menu-button {
 +
position: fixed;
 +
z-index: 1000;
 +
margin: 1em;
 +
padding: 0;
 +
width: 2.5em;
 +
height: 2.25em;
 +
border: none;
 +
text-indent: 2.5em;
 +
font-size: 1.5em;
 +
color: transparent;
 +
background: transparent;
 +
-webkit-transition: -webkit-transform 0.3s;
 +
transition: transform 0.3s;
 +
}
 +
 
 +
.menu-button::before {
 +
position: absolute;
 +
top: 0.5em;
 +
right: 0.5em;
 +
bottom: 0.5em;
 +
left: 0.5em;
 +
content: '';
 +
}
 +
 
 +
.menu-button:hover {
 +
opacity: 0.6;
 +
}
 +
/* Menu */
 +
.menu-wrap {
 +
position: absolute;
 +
font-weight: 700;
 +
opacity: 0;
 +
-webkit-transition: opacity 1s;
 +
transition: opacity 1s;
 +
}
 +
 
 +
.menu-top {
 +
line-height: 58px;
 +
}
 +
 
 +
.menu-top .profile {
 +
display: inline-block;
 +
padding: 8px 10px;
 +
line-height: 42px;
 +
}
 +
 
 +
.menu-top .profile,
 +
.menu-side {
 +
width: 300px;
 +
}
 +
 
 +
.menu-top .profile img {
 +
float: left;
 +
margin-right: 1em;
 +
}
 +
 
 +
.icon-list {
 +
display: inline-block;
 +
font-size: 1.25em;
 +
}
 +
 
 +
.icon-list a {
 +
margin: 0 1em 0 0;
 +
padding: 0;
 +
}
 +
 
 +
@media screen and (max-width: 32em) {
 +
.icon-list {
 +
padding-left: 1em;
 +
}
 +
}
 +
 
 +
.menu-side a {
 +
display: block;
 +
padding: 1.2em;
 +
border-bottom: 1px solid rgba(0,0,0,0.1);
 +
}
 +
 
 +
.menu-side a:first-child {
 +
border-top: 1px solid rgba(0,0,0,0.1);
 +
}
 +
 
 +
/* Shown menu */
 +
.show-menu .menu-wrap {
 +
opacity: 1;
 +
}
 +
 
 +
.show-menu .content-wrap,
 +
.show-menu .menu-button {
 +
-webkit-transform: translate3d(300px,60px,0);
 +
transform: translate3d(300px,60px,0);
 +
}
 +
 
 +
.show-menu .content::before {
 +
opacity: 1;
 +
-webkit-transition: opacity 0.3s;
 +
transition: opacity 0.3s;
 +
-webkit-transform: translate3d(0,0,0);
 +
transform: translate3d(0,0,0);
 +
}
 +
 
 +
<!-- ==== Style ==== -->
 +
 
 +
/* --------------------------------
 +
 
 +
-------------------------------- */
 +
img {
 +
  max-width: 100%;
 +
}
 +
 
 +
 
 +
.cd-image-container {
 +
  position: relative;
 +
  width: 90%;
 +
  max-width: 768px;
 +
  margin: 0em auto;
 +
}
 +
.cd-image-container img {
 +
  display: block;
 +
}
 +
 
 +
.cd-image-label {
 +
  position: absolute;
 +
  bottom: 0;
 +
  right: 0;
 +
  color: #ffffff;
 +
  padding: 1em;
 +
  -webkit-font-smoothing: antialiased;
 +
  -moz-osx-font-smoothing: grayscale;
 +
  opacity: 0;
 +
  -webkit-transform: translateY(20px);
 +
  -moz-transform: translateY(20px);
 +
  -ms-transform: translateY(20px);
 +
  -o-transform: translateY(20px);
 +
  transform: translateY(20px);
 +
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;
 +
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
 +
  transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
 +
}
 +
.cd-image-label.is-hidden {
 +
  visibility: hidden;
 +
}
 +
.is-visible .cd-image-label {
 +
  opacity: 1;
 +
  -webkit-transform: translateY(0);
 +
  -moz-transform: translateY(0);
 +
  -ms-transform: translateY(0);
 +
  -o-transform: translateY(0);
 +
  transform: translateY(0);
 +
}
 +
 
 +
.cd-resize-img {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 0;
 +
  height: 100%;
 +
  overflow: hidden;
 +
  /* Force Hardware Acceleration in WebKit */
 +
  -webkit-transform: translateZ(0);
 +
  -moz-transform: translateZ(0);
 +
  -ms-transform: translateZ(0);
 +
  -o-transform: translateZ(0);
 +
  transform: translateZ(0);
 +
  -webkit-backface-visibility: hidden;
 +
  backface-visibility: hidden;
 +
}
 +
.cd-resize-img img {
 +
  position: absolute;
 +
  left: 0;
 +
  top: 0;
 +
  display: block;
 +
  height: 100%;
 +
  width: auto;
 +
  max-width: none;
 +
}
 +
.cd-resize-img .cd-image-label {
 +
  right: auto;
 +
  left: 0;
 +
}
 +
.is-visible .cd-resize-img {
 +
  width: 50%;
 +
  /* bounce in animation of the modified image */
 +
  -webkit-animation: cd-bounce-in 0.7s;
 +
  -moz-animation: cd-bounce-in 0.7s;
 +
  animation: cd-bounce-in 0.7s;
 +
}
 +
 
 +
@-webkit-keyframes cd-bounce-in {
 +
  0% {
 +
    width: 0;
 +
  }
 +
  60% {
 +
    width: 55%;
 +
  }
 +
  100% {
 +
    width: 50%;
 +
  }
 +
}
 +
@-moz-keyframes cd-bounce-in {
 +
  0% {
 +
    width: 0;
 +
  }
 +
  60% {
 +
    width: 55%;
 +
  }
 +
  100% {
 +
    width: 50%;
 +
  }
 +
}
 +
@keyframes cd-bounce-in {
 +
  0% {
 +
    width: 0;
 +
  }
 +
  60% {
 +
    width: 55%;
 +
  }
 +
  100% {
 +
    width: 50%;
 +
  }
 +
}
 +
.cd-handle {
 +
  position: absolute;
 +
  height: 44px;
 +
  width: 44px;
 +
  /* center the element */
 +
  left: 50%;
 +
  top: 50%;
 +
  margin-left: -22px;
 +
  margin-top: -22px;
 +
  border-radius: 50%;
 +
  background: #dc717d url("../img/cd-arrows.svg") no-repeat center center;
 +
  cursor: move;
 +
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
 +
  opacity: 0;
 +
  -webkit-transform: translate3d(0, 0, 0) scale(0);
 +
  -moz-transform: translate3d(0, 0, 0) scale(0);
 +
  -ms-transform: translate3d(0, 0, 0) scale(0);
 +
  -o-transform: translate3d(0, 0, 0) scale(0);
 +
  transform: translate3d(0, 0, 0) scale(0);
 +
}
 +
.cd-handle.draggable {
 +
  /* change background color when element is active */
 +
  background-color: #445b7c;
 +
}
 +
.is-visible .cd-handle {
 +
  opacity: 1;
 +
  -webkit-transform: translate3d(0, 0, 0) scale(1);
 +
  -moz-transform: translate3d(0, 0, 0) scale(1);
 +
  -ms-transform: translate3d(0, 0, 0) scale(1);
 +
  -o-transform: translate3d(0, 0, 0) scale(1);
 +
  transform: translate3d(0, 0, 0) scale(1);
 +
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
 +
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
 +
  transition: transform 0.3s 0.7s, opacity 0s 0.7s;
 +
}
 +
 
 +
</style>
 +
 
 +
    </head>
<body>
<body>
-
<div>
 
-
<figure class="cd-image-container">
 
-
                    <img src="https://2014.igem.org/images/wiki.png" alt="Original Image">
 
-
                    <span class="cd-image-label" data-type="original">Original</span>
 
-
                   
 
-
                    <div class="cd-resize-img">
 
-
                        <img src="http://i.creativecommons.org/l/by/3.0/88x31.png" alt="Modified Image">
 
-
                        <span class="cd-image-label" data-type="modified">Modified</span>
 
-
                        </div>
 
-
                    <span class="cd-handle"></span>
 
-
               
 
-
                </figure>
 
-
</div>
+
 
 +
 
 +
 
 +
<div class="container">
 +
 +
 +
 +
 +
 +
<!-- slide in menu -->
 +
 +
 +
<div class="menu-wrap">
 +
<nav class="menu-top">
 +
<div class="profile"><img src="img/logo_final.png" alt="UBC iGEM 2014" height="42"/><span>UBC iGEM 2014</span></div>
 +
<div class="icon-list">
 +
<a href="#"><i class="fa fa-fw fa-star-o"></i></a>
 +
<a href="#"><i class="fa fa-fw fa-bell-o"></i></a>
 +
<a href="#"><i class="fa fa-fw fa-envelope-o"></i></a>
 +
<a href="#"><i class="fa fa-fw fa-comment-o"></i></a>
 +
</div>
 +
</nav>
 +
<nav class="menu-side">
 +
    <a href="#">Home</a>
 +
<a href="#">Project</a>
 +
<a href="#">Notebook</a>
 +
<a href="#">Modelling</a>
 +
<a href="#">Results</a>
 +
<a href="#">Human Practices</a>
 +
<a href="#">Safety</a>
 +
<a href="#">Team</a>
 +
</nav>
 +
</div>
 +
 +
 +
 +
 +
 +
 +
 
 +
       
 +
          <img src="img/logo_final.png" class="menu-button" id="open-button">
 +
<div class="content-wrap">
 +
<div class="content">
 +
<header class="codrops-header">
 +
 +
 +
 +
 +
<img src="img/logo_final.png" style="width:304px">
 +
<h1>Off-Canvas Menu Effects <span>Showing (off-canvas) menus stylishly</span></h1>
 +
 +
 +
 +
 +
 +
<!-- image selector -->
 +
                       
 +
<figure class="cd-image-container">
 +
<img src="img/img-original.jpg" alt="Original Image">
 +
<span class="cd-image-label" data-type="original">Original</span>
 +
 
 +
<div class="cd-resize-img"> <!-- the resizable image on top -->
 +
<img src="img/img-modified.jpg" alt="Modified Image">
 +
<span class="cd-image-label" data-type="modified">Modified</span>
 +
</div>
 +
 
 +
<span class="cd-handle"></span>
 +
</figure> <!-- cd-image-container -->
 +
 +
 +
 +
 +
 +
 +
 +
 +
<nav class="codrops-demos">
 +
<a class="current-demo" href="index.html">Top Side</a>
 +
<a href="cornerbox_nested.html">Nested Corner Box</a>
 +
<a href="topexpand.html">Top Expand</a>
 +
<a href="cornermorph.html">Corner Morph</a>
 +
</nav>
 +
</div>
 +
</div><!-- /content-wrap -->
 +
</div><!-- /container -->
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
Line 35: Line 551:
 +
<script>
 +
 +
 +
 +
/*!
 +
* classie - class helper functions
 +
* from bonzo https://github.com/ded/bonzo
 +
*
 +
* classie.has( elem, 'my-class' ) -> true/false
 +
* classie.add( elem, 'my-new-class' )
 +
* classie.remove( elem, 'my-unwanted-class' )
 +
* classie.toggle( elem, 'my-class' )
 +
*/
 +
 +
/*jshint browser: true, strict: true, undef: true */
 +
/*global define: false */
 +
 +
( function( window ) {
 +
 +
'use strict';
 +
 +
// class helper functions from bonzo https://github.com/ded/bonzo
 +
 +
function classReg( className ) {
 +
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
 +
}
 +
 +
// classList support for class management
 +
// altho to be fair, the api sucks because it won't accept multiple classes at once
 +
var hasClass, addClass, removeClass;
 +
 +
if ( 'classList' in document.documentElement ) {
 +
  hasClass = function( elem, c ) {
 +
    return elem.classList.contains( c );
 +
  };
 +
  addClass = function( elem, c ) {
 +
    elem.classList.add( c );
 +
  };
 +
  removeClass = function( elem, c ) {
 +
    elem.classList.remove( c );
 +
  };
 +
}
 +
else {
 +
  hasClass = function( elem, c ) {
 +
    return classReg( c ).test( elem.className );
 +
  };
 +
  addClass = function( elem, c ) {
 +
    if ( !hasClass( elem, c ) ) {
 +
      elem.className = elem.className + ' ' + c;
 +
    }
 +
  };
 +
  removeClass = function( elem, c ) {
 +
    elem.className = elem.className.replace( classReg( c ), ' ' );
 +
  };
 +
}
 +
 +
function toggleClass( elem, c ) {
 +
  var fn = hasClass( elem, c ) ? removeClass : addClass;
 +
  fn( elem, c );
 +
}
 +
 +
var classie = {
 +
  // full names
 +
  hasClass: hasClass,
 +
  addClass: addClass,
 +
  removeClass: removeClass,
 +
  toggleClass: toggleClass,
 +
  // short names
 +
  has: hasClass,
 +
  add: addClass,
 +
  remove: removeClass,
 +
  toggle: toggleClass
 +
};
 +
 +
// transport
 +
if ( typeof define === 'function' && define.amd ) {
 +
  // AMD
 +
  define( classie );
 +
} else {
 +
  // browser global
 +
  window.classie = classie;
 +
}
 +
 +
})( window );
 +
 +
 +
 +
 +
 +
/*  MENU  */
 +
(function() {
 +
 +
var bodyEl = document.body,
 +
content = document.querySelector( '.content-wrap' ),
 +
openbtn = document.getElementById( 'open-button' ),
 +
closebtn = document.getElementById( 'close-button' ),
 +
isOpen = false;
 +
 +
function init() {
 +
initEvents();
 +
}
 +
 +
function initEvents() {
 +
openbtn.addEventListener( 'click', toggleMenu );
 +
if( closebtn ) {
 +
closebtn.addEventListener( 'click', toggleMenu );
 +
}
 +
 +
// close the menu element if the target it´s not the menu element or one of its descendants..
 +
content.addEventListener( 'click', function(ev) {
 +
var target = ev.target;
 +
if( isOpen && target !== openbtn ) {
 +
toggleMenu();
 +
}
 +
} );
 +
}
 +
 +
function toggleMenu() {
 +
if( isOpen ) {
 +
classie.remove( bodyEl, 'show-menu' );
 +
}
 +
else {
 +
classie.add( bodyEl, 'show-menu' );
 +
}
 +
isOpen = !isOpen;
 +
}
 +
 +
init();
 +
 +
})();
 +
 +
 +
 +
 +
/*IMAGE CONTAINER*/
 +
 +
 +
 +
 +
jQuery(document).ready(function($){
 +
    //check if the .cd-image-container is in the viewport
 +
    //if yes, animate it
 +
    checkPosition($('.cd-image-container'));
 +
    $(window).on('scroll', function(){
 +
        checkPosition($('.cd-image-container'));
 +
    });
 +
   
 +
    //make the .cd-handle element draggable and modify .cd-resize-img width according to its position
 +
    $('.cd-image-container').each(function(){
 +
        var actual = $(this);
 +
        drags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual, actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-image-label[data-type="modified"]'));
 +
    });
 +
 +
    //upadate images label visibility
 +
    $(window).on('resize', function(){
 +
        $('.cd-image-container').each(function(){
 +
            var actual = $(this);
 +
            updateLabel(actual.find('.cd-image-label[data-type="modified"]'), actual.find('.cd-resize-img'), 'left');
 +
            updateLabel(actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-resize-img'), 'right');
 +
        });
 +
    });
 +
});
 +
 +
function checkPosition(container) {
 +
    container.each(function(){
 +
        var actualContainer = $(this);
 +
        if( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) {
 +
            actualContainer.addClass('is-visible');
 +
        }
 +
    });
 +
}
 +
 +
//draggable funtionality - credits to http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
 +
function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {
 +
    dragElement.on("mousedown vmousedown", function(e) {
 +
        dragElement.addClass('draggable');
 +
        resizeElement.addClass('resizable');
 +
 +
        var dragWidth = dragElement.outerWidth(),
 +
            xPosition = dragElement.offset().left + dragWidth - e.pageX,
 +
            containerOffset = container.offset().left,
 +
            containerWidth = container.outerWidth(),
 +
            minLeft = containerOffset + 10,
 +
            maxLeft = containerOffset + containerWidth - dragWidth - 10;
 +
       
 +
        dragElement.parents().on("mousemove vmousemove", function(e) {
 +
            leftValue = e.pageX + xPosition - dragWidth;
 +
           
 +
            //constrain the draggable element to move inside his container
 +
            if(leftValue < minLeft ) {
 +
                leftValue = minLeft;
 +
            } else if ( leftValue > maxLeft) {
 +
                leftValue = maxLeft;
 +
            }
 +
 +
            widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';
 +
           
 +
            $('.draggable').css('left', widthValue).on("mouseup vmouseup", function() {
 +
                $(this).removeClass('draggable');
 +
                resizeElement.removeClass('resizable');
 +
            });
 +
 +
            $('.resizable').css('width', widthValue);
 +
 +
            updateLabel(labelResizeElement, resizeElement, 'left');
 +
            updateLabel(labelContainer, resizeElement, 'right');
 +
           
 +
        }).on("mouseup vmouseup", function(e){
 +
            dragElement.removeClass('draggable');
 +
            resizeElement.removeClass('resizable');
 +
        });
 +
        e.preventDefault();
 +
    }).on("mouseup vmouseup", function(e) {
 +
        dragElement.removeClass('draggable');
 +
        resizeElement.removeClass('resizable');
 +
    });
 +
}
 +
 +
function updateLabel(label, resizeElement, position) {
 +
    if(position == 'left') {
 +
        ( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;
 +
    } else {
 +
        ( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;
 +
    }
 +
}
 +
 +
</script>
</html>
</html>

Latest revision as of 22:07, 17 October 2014

Off-Canvas Menu Effects Showing (off-canvas) menus stylishly

Original Image Original
Modified Image Modified

Retrieved from "http://2014.igem.org/Team:British_Columbia/test"