Team:British Columbia/test
From 2014.igem.org
(Difference between revisions)
Line 7: | Line 7: | ||
- | <!-- ====== | + | <!-- ====== Style ====== --> |
- | + | @import url(http://fonts.googleapis.com/css?family=Raleway:200,400,700,800); | |
- | + | @font-face { | |
- | </head> | + | font-weight: normal; |
+ | font-style: normal; | ||
+ | font-family: 'codropsicons'; | ||
+ | src:url('../fonts/codropsicons/codropsicons.eot'); | ||
+ | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), | ||
+ | url('../fonts/codropsicons/codropsicons.woff') format('woff'), | ||
+ | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), | ||
+ | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); | ||
+ | } | ||
+ | |||
+ | *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } | ||
+ | .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; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | </head> | ||
<body> | <body> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | </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 561: | ||
+ | <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> |
Revision as of 21:42, 17 October 2014
@import url(http://fonts.googleapis.com/css?family=Raleway:200,400,700,800); @font-face { font-weight: normal; font-style: normal; font-family: 'codropsicons'; src:url('../fonts/codropsicons/codropsicons.eot'); src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); } *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } .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; } } 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); } /* -------------------------------- -------------------------------- */ 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; }