├── img └── related │ ├── SelectInspiration.png │ ├── ShapeHoverEffect.png │ ├── AnimatedCheckboxes.png │ ├── DragDropInteractions.png │ └── WobblySlideshowEffect.png ├── fonts ├── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.ttf │ ├── codropsicons.woff │ ├── license.txt │ └── codropsicons.svg └── font-awesome-4.2.0 │ ├── fonts │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.ttf │ └── fontawesome-webfont.woff │ └── css │ └── font-awesome.min.css ├── README.md ├── css ├── hamburger.css ├── normalize.css ├── drag.css ├── button.css ├── collapseexpand.css ├── inputs.css ├── dropdown.css ├── pullupmenu.css ├── circlemenu.css ├── sidebar.css └── demo.css ├── js ├── classie.js ├── modernizr.custom.js └── draggabilly.pkgd.min.js ├── pullupmenu.html ├── hamburger.html ├── index.html ├── dropdown.html ├── circlemenu.html ├── drag.html ├── inputs.html ├── collapseexpand.html └── button.html /img/related/SelectInspiration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ElasticSVGElements/HEAD/img/related/SelectInspiration.png -------------------------------------------------------------------------------- /img/related/ShapeHoverEffect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ElasticSVGElements/HEAD/img/related/ShapeHoverEffect.png -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ElasticSVGElements/HEAD/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ElasticSVGElements/HEAD/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /img/related/AnimatedCheckboxes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ElasticSVGElements/HEAD/img/related/AnimatedCheckboxes.png -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ElasticSVGElements/HEAD/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /img/related/DragDropInteractions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ElasticSVGElements/HEAD/img/related/DragDropInteractions.png -------------------------------------------------------------------------------- /img/related/WobblySlideshowEffect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ElasticSVGElements/HEAD/img/related/WobblySlideshowEffect.png -------------------------------------------------------------------------------- /fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ElasticSVGElements/HEAD/fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ElasticSVGElements/HEAD/fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ElasticSVGElements/HEAD/fonts/font-awesome-4.2.0/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Elastic SVG Elements 2 | ========= 3 | 4 | Adding elasticity with SVG shape animations for enhanced UI interactions. 5 | 6 | [Article on Codrops](http://tympanus.net/codrops/?p=21555) 7 | 8 | [Demo](http://tympanus.net/Development/ElasticSVGElements/) 9 | 10 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 11 | 12 | Read more here: [License](http://tympanus.net/codrops/licensing/) 13 | 14 | Follow us: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/) 15 | 16 | [© Codrops 2014](http://www.codrops.com) 17 | -------------------------------------------------------------------------------- /css/hamburger.css: -------------------------------------------------------------------------------- 1 | .menu-button { 2 | width: 60px; 3 | height: 80px; 4 | position: relative; 5 | margin: 5em auto; 6 | display: block; 7 | background: none; 8 | outline: none; 9 | border: none; 10 | -webkit-tap-highlight-color: rgba(0,0,0,0); 11 | -webkit-tap-highlight-color: transparent; /* For some Androids */ 12 | } 13 | 14 | .morph-shape { 15 | position: absolute; 16 | width: 100%; 17 | height: 100%; 18 | top: 0; 19 | left: 0; 20 | } 21 | 22 | .morph-shape svg path, 23 | .morph-shape svg line { 24 | stroke: #DDDCD7; 25 | stroke-width: 4px; 26 | -webkit-transition: -webkit-transform 0.3s; 27 | transition: transform 0.3s; 28 | } 29 | 30 | .menu-button--open .morph-shape svg path:first-of-type { 31 | -webkit-transform: translate3d(0, -8px, 0); 32 | transform: translate3d(0, -8px, 0); 33 | } 34 | 35 | .menu-button--open .morph-shape svg path:nth-of-type(2) { 36 | -webkit-transform: translate3d(0, 8px, 0); 37 | transform: translate3d(0, 8px, 0); 38 | } 39 | 40 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /css/drag.css: -------------------------------------------------------------------------------- 1 | .drag-container { 2 | max-width: 840px; 3 | margin: 0 auto; 4 | } 5 | 6 | .drag-element { 7 | width: 260px; 8 | height: 260px; 9 | margin: 10px; 10 | position: relative; 11 | float: left; 12 | } 13 | 14 | .drag-element:hover { 15 | cursor: move; 16 | cursor: -webkit-grab; 17 | cursor: grab; 18 | } 19 | 20 | .drag-element:active, 21 | .drag-element.is-dragging { 22 | cursor: -webkit-grabbing; 23 | cursor: grabbing; 24 | } 25 | 26 | .drag-element .fa { 27 | display: block; 28 | line-height: 260px; 29 | text-align: center; 30 | color: #aaa; 31 | position: relative; 32 | width: 100%; 33 | -webkit-transition: -webkit-transform 0.1s ease-in-out; 34 | transition: transform 0.1s ease-in-out; 35 | } 36 | 37 | .drag-element--alt .fa { 38 | -webkit-transition: -webkit-transform 0.05s ease-in; 39 | transition: transform 0.05s ease-in; 40 | } 41 | 42 | .drag-element:active .fa, 43 | .drag-element.is-dragging .fa { 44 | -webkit-transform: scale3d(1.2, 1.2, 1); 45 | transform: scale3d(1.2, 1.2, 1); 46 | } 47 | 48 | .morph-shape { 49 | position: absolute; 50 | width: 100%; 51 | height: 100%; 52 | top: 0; 53 | left: 0; 54 | -webkit-transition: -webkit-transform 0.1s ease-in-out; 55 | transition: transform 0.1s ease-in-out; 56 | } 57 | 58 | .drag-element--alt .morph-shape { 59 | -webkit-transition: -webkit-transform 0.05s ease-in; 60 | transition: transform 0.05s ease-in; 61 | } 62 | 63 | .drag-element:active .morph-shape, 64 | .drag-element.is-dragging .morph-shape { 65 | -webkit-transform: scale3d(0.88, 0.9, 1); 66 | transform: scale3d(0.88, 0.9, 1); 67 | } 68 | 69 | .morph-shape svg path { 70 | fill: #44474D; 71 | -webkit-transition: fill 0.2s; 72 | transition: fill 0.2s; 73 | } 74 | 75 | .drag-element:active .morph-shape svg path, 76 | .drag-element.is-dragging .morph-shape svg path { 77 | fill: #484b51; 78 | } 79 | 80 | -------------------------------------------------------------------------------- /css/button.css: -------------------------------------------------------------------------------- 1 | .button-wrap { 2 | margin-bottom: 3em; 3 | } 4 | 5 | .button { 6 | background: none; 7 | border: none; 8 | width: 250px; 9 | height: 105px; 10 | outline: none; 11 | position: relative; 12 | margin: 1em; 13 | padding: 0; 14 | -webkit-tap-highlight-color: rgba(0,0,0,0); 15 | -webkit-tap-highlight-color: transparent; /* For some Androids */ 16 | -webkit-touch-callout: none; 17 | -webkit-user-select: none; 18 | -khtml-user-select: none; 19 | -moz-user-select: none; 20 | -ms-user-select: none; 21 | user-select: none; 22 | } 23 | 24 | .button--round { 25 | width: 150px; 26 | height: 150px; 27 | } 28 | 29 | .button__text { 30 | display: block; 31 | padding: 10px; 32 | text-align: center; 33 | position: relative; 34 | z-index: 100; 35 | font-size: 1.5em; 36 | color: #fff; 37 | font-weight: bold; 38 | -webkit-touch-callout: none; 39 | -webkit-user-select: none; 40 | -khtml-user-select: none; 41 | -moz-user-select: none; 42 | -ms-user-select: none; 43 | user-select: none; 44 | } 45 | 46 | .morph-shape { 47 | position: absolute; 48 | width: 100%; 49 | height: 100%; 50 | top: 0; 51 | left: 0; 52 | } 53 | 54 | .button--line .morph-shape svg { 55 | fill: none; 56 | stroke: #fff; 57 | stroke-width: 4px; 58 | stroke-linecap: round; 59 | } 60 | 61 | .button--line:nth-child(2) .morph-shape svg { 62 | fill: #938edc; 63 | } 64 | 65 | .button--fill .morph-shape svg { 66 | fill: #44474D; 67 | } 68 | 69 | .button--fill:nth-child(4) .morph-shape svg { 70 | fill: #202020; 71 | } 72 | 73 | .button--round .morph-shape svg { 74 | stroke-width: 7px; 75 | } 76 | 77 | /* Example for effect */ 78 | 79 | .button--anim-1 .button__text { 80 | -webkit-transition: -webkit-transform 0.15s; 81 | transition: transform 0.15s; 82 | } 83 | 84 | .button--anim-1:active .button__text { 85 | -webkit-transform: translate3d(0, -5px, 0); 86 | transform: translate3d(0, -5px, 0); 87 | } -------------------------------------------------------------------------------- /js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie - class helper functions 3 | * from bonzo https://github.com/ded/bonzo 4 | * 5 | * classie.has( elem, 'my-class' ) -> true/false 6 | * classie.add( elem, 'my-new-class' ) 7 | * classie.remove( elem, 'my-unwanted-class' ) 8 | * classie.toggle( elem, 'my-class' ) 9 | */ 10 | 11 | /*jshint browser: true, strict: true, undef: true */ 12 | /*global define: false */ 13 | 14 | ( function( window ) { 15 | 16 | 'use strict'; 17 | 18 | // class helper functions from bonzo https://github.com/ded/bonzo 19 | 20 | function classReg( className ) { 21 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 22 | } 23 | 24 | // classList support for class management 25 | // altho to be fair, the api sucks because it won't accept multiple classes at once 26 | var hasClass, addClass, removeClass; 27 | 28 | if ( 'classList' in document.documentElement ) { 29 | hasClass = function( elem, c ) { 30 | return elem.classList.contains( c ); 31 | }; 32 | addClass = function( elem, c ) { 33 | elem.classList.add( c ); 34 | }; 35 | removeClass = function( elem, c ) { 36 | elem.classList.remove( c ); 37 | }; 38 | } 39 | else { 40 | hasClass = function( elem, c ) { 41 | return classReg( c ).test( elem.className ); 42 | }; 43 | addClass = function( elem, c ) { 44 | if ( !hasClass( elem, c ) ) { 45 | elem.className = elem.className + ' ' + c; 46 | } 47 | }; 48 | removeClass = function( elem, c ) { 49 | elem.className = elem.className.replace( classReg( c ), ' ' ); 50 | }; 51 | } 52 | 53 | function toggleClass( elem, c ) { 54 | var fn = hasClass( elem, c ) ? removeClass : addClass; 55 | fn( elem, c ); 56 | } 57 | 58 | var classie = { 59 | // full names 60 | hasClass: hasClass, 61 | addClass: addClass, 62 | removeClass: removeClass, 63 | toggleClass: toggleClass, 64 | // short names 65 | has: hasClass, 66 | add: addClass, 67 | remove: removeClass, 68 | toggle: toggleClass 69 | }; 70 | 71 | // transport 72 | if ( typeof define === 'function' && define.amd ) { 73 | // AMD 74 | define( classie ); 75 | } else { 76 | // browser global 77 | window.classie = classie; 78 | } 79 | 80 | })( window ); 81 | -------------------------------------------------------------------------------- /css/collapseexpand.css: -------------------------------------------------------------------------------- 1 | .box-container { 2 | max-width: 840px; 3 | min-height: 335px; 4 | margin: 0 auto; 5 | clear: both; 6 | } 7 | 8 | .box-container h2 { 9 | text-align: left; 10 | padding: 0 1.5em; 11 | margin: 0; 12 | color: #afb3b8; 13 | } 14 | 15 | .box-container--large { 16 | min-height: 400px; 17 | } 18 | 19 | .box { 20 | width: 260px; 21 | height: 260px; 22 | margin: 10px; 23 | float: left; 24 | position: relative; 25 | } 26 | 27 | .box--collapser { 28 | -webkit-transition: -webkit-transform 0.15s, opacity 0.15s; 29 | transition: transform 0.15s, opacity 0.15s; 30 | } 31 | 32 | .box--expander { 33 | width: 25%; 34 | min-width: 260px; 35 | height: 260px; 36 | float: none; 37 | margin: 0 auto; 38 | -webkit-transition: width 0.2s, height 0.2s; 39 | transition: width 0.2s, height 0.2s; 40 | } 41 | 42 | .box--collapser.box--close { 43 | opacity: 0; 44 | -webkit-transform: scale3d(0,0,1); 45 | transform: scale3d(0,0,1); 46 | } 47 | 48 | .box--expander.box--sizeup { 49 | width: 100%; 50 | height: 500px; 51 | } 52 | 53 | .trigger { 54 | background: none; 55 | color: #F5F5F5; 56 | border: none; 57 | width: 30px; 58 | height: 30px; 59 | line-height: 25px; 60 | position: absolute; 61 | right: 10%; 62 | top: 10.5%; 63 | outline: none; 64 | padding: 0; 65 | margin: 0; 66 | } 67 | 68 | .trigger .fa-compress, 69 | .box--sizeup .trigger .fa-expand { 70 | display: none; 71 | } 72 | 73 | .box--sizeup .trigger .fa-compress { 74 | display: inline-block; 75 | } 76 | 77 | .morph-shape { 78 | position: absolute; 79 | width: 100%; 80 | height: 100%; 81 | top: 0; 82 | left: 0; 83 | -webkit-transition: -webkit-transform 0.1s ease-in-out; 84 | transition: transform 0.1s ease-in-out; 85 | } 86 | 87 | .drag-element--alt .morph-shape { 88 | -webkit-transition: -webkit-transform 0.05s ease-in; 89 | transition: transform 0.05s ease-in; 90 | } 91 | 92 | .morph-shape--color-1 svg path { 93 | fill: #4E574B; 94 | } 95 | 96 | .morph-shape--color-2 svg path { 97 | fill: #EA5656; 98 | } 99 | 100 | .morph-shape--color-3 svg path { 101 | fill: #4E82E0; 102 | } 103 | 104 | .morph-shape--color-4 svg path { 105 | fill: #71CF84; 106 | } 107 | 108 | -------------------------------------------------------------------------------- /css/inputs.css: -------------------------------------------------------------------------------- 1 | .input-container { 2 | text-align: left; 3 | max-width: 600px; 4 | margin: 0 auto; 5 | } 6 | 7 | .input-container--indent { 8 | padding-left: 160px; 9 | } 10 | 11 | .input-container--space { 12 | margin-top: 1em; 13 | } 14 | 15 | .input-label { 16 | font-weight: bold; 17 | display: inline-block; 18 | line-height: 80px; 19 | height: 60px; 20 | width: 150px; 21 | padding: 0 1em 0 0; 22 | text-align: right; 23 | color: #FF75AF; 24 | -webkit-touch-callout: none; 25 | -webkit-user-select: none; 26 | -khtml-user-select: none; 27 | -moz-user-select: none; 28 | -ms-user-select: none; 29 | user-select: none; 30 | } 31 | 32 | .input-label--long { 33 | float: left; 34 | width: calc(100% - 50px); 35 | text-align: left; 36 | padding: 0 0 1em 1em; 37 | } 38 | 39 | .input-wrap { 40 | position: relative; 41 | margin: 0 auto 1em; 42 | display: inline-block; 43 | vertical-align: top; 44 | width: 370px; 45 | height: 80px; 46 | } 47 | 48 | .input-wrap--small { 49 | width: 30px; 50 | height: 30px; 51 | float: left; 52 | margin: 23px 10px 0; 53 | } 54 | 55 | .input-wrap input[type="text"] { 56 | display: block; 57 | width: 94.6%; 58 | height: 75%; 59 | border: none; 60 | position: relative; 61 | background: none; 62 | z-index: 100; 63 | outline: none; 64 | font-size: 1.5em; 65 | font-weight: bold; 66 | color: #aaa; 67 | left: 2.7%; 68 | top: 12.5%; 69 | padding: 0 0.75em; 70 | -webkit-tap-highlight-color: rgba(0,0,0,0); 71 | -webkit-tap-highlight-color: transparent; /* For some Androids */ 72 | } 73 | 74 | .input-wrap input[type="checkbox"], 75 | .input-wrap input[type="radio"], 76 | .input-wrap .fa { 77 | position: absolute; 78 | width: 100%; 79 | height: 100%; 80 | z-index: 100; 81 | opacity: 0; 82 | cursor: pointer; 83 | -webkit-tap-highlight-color: rgba(0,0,0,0); 84 | -webkit-tap-highlight-color: transparent; /* For some Androids */ 85 | -webkit-touch-callout: none; 86 | -webkit-user-select: none; 87 | -khtml-user-select: none; 88 | -moz-user-select: none; 89 | -ms-user-select: none; 90 | user-select: none; 91 | } 92 | 93 | .input-wrap .fa { 94 | z-index: 99; 95 | line-height: 2; 96 | color: #415c71; 97 | } 98 | 99 | .input-wrap input[type="checkbox"]:checked + .fa, 100 | .input-wrap input[type="radio"]:checked + .fa { 101 | opacity: 1; 102 | } 103 | 104 | .morph-shape { 105 | position: absolute; 106 | width: 100%; 107 | height: 100%; 108 | top: 0; 109 | left: 0; 110 | pointer-events: none; 111 | } 112 | 113 | .morph-shape svg path { 114 | fill: #fff; 115 | } 116 | 117 | .note { 118 | text-align: left; 119 | max-width: 600px; 120 | padding: 1em 0 0.5em; 121 | font-size: 1em; 122 | color: #CBCBCB; 123 | border-bottom: 1px solid #ddd; 124 | margin: 0 auto 1em; 125 | } 126 | 127 | @media screen and (max-width: 60em) { 128 | .input-label, .input-label--long { 129 | text-align: left; 130 | padding: 0; 131 | } 132 | .input-container--indent { 133 | padding: 0; 134 | } 135 | .input-wrap:not(.input-wrap--small) { 136 | width: 100%; 137 | } 138 | } -------------------------------------------------------------------------------- /css/dropdown.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | width: 300px; 3 | height: 70px; 4 | margin: 2em auto; 5 | position: relative; 6 | text-align: left; 7 | cursor: pointer; 8 | z-index: 100; 9 | } 10 | 11 | .menu__label { 12 | display: block; 13 | background: none; 14 | border: none; 15 | width: 100%; 16 | height: 70px; 17 | padding: 0 1.25em; 18 | font-size: 1.3em; 19 | color: #fff; 20 | position: relative; 21 | outline: none; 22 | text-align: left; 23 | -webkit-tap-highlight-color: rgba(0,0,0,0); 24 | -webkit-tap-highlight-color: transparent; /* For some Androids */ 25 | } 26 | 27 | .menu__inner li a span, 28 | .menu__label span { 29 | font-size: 0.68em; 30 | text-transform: uppercase; 31 | letter-spacing: 1px; 32 | line-height: 1.2; 33 | font-weight: 600; 34 | } 35 | 36 | .menu .fa { 37 | vertical-align: top; 38 | line-height: 1.25; 39 | margin-right: 0.65em; 40 | font-size: 1.15em; 41 | } 42 | 43 | .menu__inner { 44 | list-style: none; 45 | padding: 0 1.25em; 46 | font-size: 1.3em; 47 | margin: 0; 48 | position: absolute; 49 | overflow: hidden; 50 | height: 0; 51 | -webkit-transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1); 52 | transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1); 53 | } 54 | 55 | .menu.menu--open .menu__inner { 56 | height: 310px; 57 | } 58 | 59 | .menu__inner li a { 60 | display: block; 61 | padding: 0.53em 0; 62 | line-height: 1.2; 63 | opacity: 0; 64 | color: #727476; 65 | pointer-events: none; 66 | outline: none; 67 | -webkit-transform: translate3d(0, -20px, 0); 68 | transform: translate3d(0, -20px, 0); 69 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 70 | transition: opacity 0.3s, transform 0.3s; 71 | } 72 | 73 | .menu__inner li a:hover { 74 | color: #45484A; 75 | } 76 | 77 | .menu--open .menu__inner li a { 78 | opacity: 1; 79 | pointer-events: auto; 80 | -webkit-transform: translate3d(0, 0, 0); 81 | transform: translate3d(0, 0, 0); 82 | } 83 | 84 | .menu--open .menu__inner li:nth-child(2) a { 85 | -webkit-transition-delay: 0.04s; 86 | transition-delay: 0.04s; 87 | } 88 | 89 | .menu--open .menu__inner li:nth-child(3) a { 90 | -webkit-transition-delay: 0.08s; 91 | transition-delay: 0.08s; 92 | } 93 | 94 | .menu--open .menu__inner li:nth-child(4) a { 95 | -webkit-transition-delay: 0.12s; 96 | transition-delay: 0.12s; 97 | } 98 | 99 | .menu--open .menu__inner li:nth-child(5) a { 100 | -webkit-transition-delay: 0.16s; 101 | transition-delay: 0.16s; 102 | } 103 | 104 | .menu--open .menu__inner li:nth-child(6) a { 105 | -webkit-transition-delay: 0.2s; 106 | transition-delay: 0.2s; 107 | } 108 | 109 | .morph-shape, 110 | .morph-shape svg { 111 | position: absolute; 112 | width: 100%; 113 | top: 0; 114 | left: 0; 115 | } 116 | 117 | .morph-shape { 118 | height: 70px; 119 | -webkit-transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1); 120 | transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1); 121 | } 122 | 123 | .morph-shape svg { 124 | height: 100%; 125 | } 126 | 127 | .menu.menu--open .morph-shape { 128 | height: 400px; 129 | } 130 | 131 | .morph-shape svg path { 132 | fill: #C6CFCF; 133 | } -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /css/pullupmenu.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | position: fixed; 3 | max-width: 560px; 4 | width: 90%; 5 | height: 360px; 6 | bottom: 0; 7 | left: 50%; 8 | z-index: 100; 9 | pointer-events: none; 10 | -webkit-transform: translate3d(-50%, 240px, 0); 11 | transform: translate3d(-50%, 240px, 0); 12 | -webkit-transition: -webkit-transform 0.6s; 13 | transition: transform 0.6s; 14 | } 15 | 16 | .menu.menu--open { 17 | pointer-events: auto; 18 | -webkit-transform: translate3d(-50%, 0, 0); 19 | transform: translate3d(-50%, 0, 0); 20 | } 21 | 22 | .main { 23 | -webkit-transition: opacity 0.6s; 24 | transition: opacity 0.6s; 25 | } 26 | 27 | .menu.menu--open + .main { 28 | opacity: 0.1; 29 | pointer-events: none; 30 | } 31 | 32 | .menu__inner { 33 | padding: 120px 2em 0; 34 | height: 100%; 35 | position: relative; 36 | z-index: 100; 37 | } 38 | 39 | .menu ul { 40 | list-style: none; 41 | padding: 0; 42 | margin: 0; 43 | } 44 | 45 | .menu ul li { 46 | margin: 0; 47 | -webkit-transform: translate3d(0, 150px, 0); 48 | transform: translate3d(0, 150px, 0); 49 | -webkit-transition: -webkit-transform 0.7s; 50 | transition: transform 0.7s; 51 | } 52 | 53 | .menu.menu--anim ul li { 54 | -webkit-transform: translate3d(0, 0, 0); 55 | transform: translate3d(0, 0, 0); 56 | } 57 | 58 | .menu.menu--anim ul li:last-child { 59 | -webkit-transition-delay: 0.3s; 60 | transition-delay: 0.3s; 61 | } 62 | 63 | .menu.menu--anim ul li:nth-child(3) { 64 | -webkit-transition-delay: 0.2s; 65 | transition-delay: 0.2s; 66 | } 67 | 68 | .menu.menu--anim ul li:nth-child(2) { 69 | -webkit-transition-delay: 0.1s; 70 | transition-delay: 0.1s; 71 | } 72 | 73 | .menu ul li a { 74 | display: block; 75 | outline: none; 76 | font-size: 1.15em; 77 | font-weight: bold; 78 | padding: 0.85em; 79 | } 80 | 81 | .menu__handle { 82 | background: transparent; 83 | border: none; 84 | width: 30px; 85 | height: 18px; 86 | padding: 0; 87 | outline: none; 88 | position: absolute; 89 | top: 66px; 90 | left: 50%; 91 | margin-left: -15px; 92 | z-index: 2000; 93 | pointer-events: auto; 94 | } 95 | 96 | .menu__handle::before, 97 | .menu__handle::after { 98 | content: ''; 99 | position: absolute; 100 | width: 2px; 101 | height: 100%; 102 | background: #5f656f; 103 | left: 50%; 104 | top: 0; 105 | margin-left: -1px; 106 | -webkit-transform-origin: 50% 0; 107 | transform-origin: 50% 0; 108 | -webkit-transition: -webkit-transform 0.25s; 109 | transition: transform 0.25s; 110 | } 111 | 112 | .menu__handle span { 113 | display: none; 114 | } 115 | 116 | .menu__handle::before { 117 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 118 | transform: rotate3d(0, 0, 1, 45deg); 119 | } 120 | 121 | .menu__handle::after { 122 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 123 | transform: rotate3d(0, 0, 1, -45deg); 124 | } 125 | 126 | .menu--open .menu__handle::before { 127 | -webkit-transform: translate3d(0, 75%, 0) rotate3d(0, 0, 1, 135deg); 128 | transform: translate3d(0, 75%, 0) rotate3d(0, 0, 1, 135deg); 129 | } 130 | 131 | .menu--open .menu__handle::after { 132 | -webkit-transform: translate3d(0, 75%, 0) rotate3d(0, 0, 1, -135deg); 133 | transform: translate3d(0, 75%, 0) rotate3d(0, 0, 1, -135deg); 134 | } 135 | 136 | .morph-shape { 137 | position: absolute; 138 | height: 200px; 139 | width: 100%; 140 | top: 0; 141 | right: 0; 142 | } 143 | 144 | .morph-shape svg path { 145 | stroke: #5f656f; 146 | stroke-width: 2px; 147 | } 148 | 149 | @media screen and (max-width: 63em) { 150 | .menu { 151 | background: #434d55; 152 | background: -webkit-linear-gradient(top, rgba(67,77,85,0) 0%,rgba(67,77,85,1) 20%); 153 | background: linear-gradient(to bottom, rgba(67,77,85,0) 0%, rgba(67,77,85,1) 20%); 154 | } 155 | .menu.menu--open + .main { 156 | opacity: 0.05; 157 | } 158 | } -------------------------------------------------------------------------------- /css/circlemenu.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | position: relative; 3 | display: inline-block; 4 | -webkit-touch-callout: none; 5 | -webkit-user-select: none; 6 | -khtml-user-select: none; 7 | -moz-user-select: none; 8 | -ms-user-select: none; 9 | user-select: none; 10 | cursor: pointer; 11 | margin: 7em 0; 12 | } 13 | 14 | .trigger { 15 | background: none; 16 | width: 100px; 17 | height: 100px; 18 | padding: 0; 19 | margin: 0; 20 | border: none; 21 | outline: none; 22 | text-align: center; 23 | font-size: 1.5em; 24 | color: #fff; 25 | position: relative; 26 | z-index: 1000; 27 | -webkit-tap-highlight-color: rgba(0,0,0,0); 28 | -webkit-tap-highlight-color: transparent; /* For some Androids */ 29 | } 30 | 31 | .trigger span { 32 | opacity: 0; 33 | position: absolute; 34 | } 35 | 36 | .menu__items { 37 | position: absolute; 38 | width: 100%; 39 | height: 100%; 40 | top: 0; 41 | padding: 0; 42 | margin: 0; 43 | list-style-type: none; 44 | z-index: 5; 45 | } 46 | 47 | .menu__items li { 48 | width: 80%; 49 | height: 80%; 50 | top: 10%; 51 | left: 10%; 52 | line-height: 80px; 53 | font-size: 1.5em; 54 | position: absolute; 55 | z-index: -1; 56 | -webkit-transform-origin: 50% 50%; 57 | transform-origin: 50% 50%; 58 | -webkit-transform: scale3d(0.5, 0.5, 1); 59 | transform: scale3d(0.5, 0.5, 1); 60 | -webkit-transition: -webkit-transform 0.25s ease-out; 61 | transition: transform 0.25s ease-out; 62 | } 63 | 64 | .menu.menu--open .menu__items li:first-child { 65 | -webkit-transform: scale3d(1, 1, 1) translate3d(0, -160px, 0); 66 | transform: scale3d(1, 1, 1) translate3d(0, -160px, 0); 67 | } 68 | 69 | .menu.menu--open .menu__items li:nth-child(2) { 70 | -webkit-transform: scale3d(1, 1, 1) translate3d(113.14px, -113.14px, 0); 71 | transform: scale3d(1, 1, 1) translate3d(113.14px, -113.14px, 0); 72 | } 73 | 74 | .menu.menu--open .menu__items li:nth-child(3) { 75 | -webkit-transform: scale3d(1, 1, 1) translate3d(160px, 0, 0); 76 | transform: scale3d(1, 1, 1) translate3d(160px, 0, 0); 77 | } 78 | 79 | .menu.menu--open .menu__items li:nth-child(4) { 80 | -webkit-transform: scale3d(1, 1, 1) translate3d(113.14px, 113.14px, 0); 81 | transform: scale3d(1, 1, 1) translate3d(113.14px, 113.14px, 0); 82 | } 83 | 84 | .menu.menu--open .menu__items li:nth-child(5) { 85 | -webkit-transform: scale3d(1, 1, 1) translate3d(0, 160px, 0); 86 | transform: scale3d(1, 1, 1) translate3d(0, 160px, 0); 87 | } 88 | 89 | .menu.menu--open .menu__items li:nth-child(6) { 90 | -webkit-transform: scale3d(1, 1, 1) translate3d(-113.14px, 113.14px, 0); 91 | transform: scale3d(1, 1, 1) translate3d(-113.14px, 113.14px, 0); 92 | } 93 | 94 | .menu.menu--open .menu__items li:nth-child(7) { 95 | -webkit-transform: scale3d(1, 1, 1) translate3d(-160px, 0, 0); 96 | transform: scale3d(1, 1, 1) translate3d(-160px, 0, 0); 97 | } 98 | 99 | .menu.menu--open .menu__items li:nth-child(8) { 100 | -webkit-transform: scale3d(1, 1, 1) translate3d(-113.14px, -113.14px, 0); 101 | transform: scale3d(1, 1, 1) translate3d(-113.14px, -113.14px, 0); 102 | } 103 | 104 | .menu__items li a { 105 | display: block; 106 | background: #2E3535; 107 | color: #DA7071; 108 | border-radius: 50%; 109 | outline: none; 110 | overflow: hidden; 111 | -webkit-tap-highlight-color: rgba(0,0,0,0); 112 | -webkit-tap-highlight-color: transparent; /* For some Androids */ 113 | } 114 | 115 | .menu__items li a:hover, 116 | .menu__items li a:focus { 117 | background: #272c2c; 118 | color: #777; 119 | } 120 | 121 | .menu__items li a span { 122 | position: absolute; 123 | color: transparent; 124 | top: 100%; 125 | pointer-events: none; 126 | } 127 | 128 | .morph-shape { 129 | position: absolute; 130 | width: 100%; 131 | height: 100%; 132 | top: 0; 133 | left: 0; 134 | z-index: 100; 135 | } 136 | 137 | .morph-shape svg path { 138 | fill: #DA7071; 139 | -webkit-transition: fill 0.3s; 140 | transition: fill 0.3s; 141 | } 142 | 143 | .menu--open .morph-shape svg path { 144 | fill: #777; 145 | } 146 | 147 | @media screen and (max-width: 40em) { 148 | .menu__items { 149 | -webkit-transform: scale3d(0.8,0.8,1); 150 | transform: scale3d(0.8,0.8,1); 151 | } 152 | } -------------------------------------------------------------------------------- /css/sidebar.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | position: fixed; 3 | width: 300px; 4 | top: 3em; 5 | bottom: 3em; 6 | left: 0; 7 | z-index: 100; 8 | overflow: hidden; 9 | -webkit-transform: translate3d(-150px, 0, 0); 10 | transform: translate3d(-150px, 0, 0); 11 | -webkit-transition: -webkit-transform 0.6s; 12 | transition: transform 0.6s; 13 | } 14 | 15 | .menu.menu--open { 16 | -webkit-transform: translate3d(0, 0, 0); 17 | transform: translate3d(0, 0, 0); 18 | } 19 | 20 | .main { 21 | -webkit-transition: opacity 0.6s; 22 | transition: opacity 0.6s; 23 | } 24 | 25 | .menu.menu--open + .main { 26 | opacity: 0.3; 27 | pointer-events: none; 28 | } 29 | 30 | .menu__inner { 31 | width: calc(100% + 25px); 32 | padding: 0 140px 2em 0; 33 | overflow-y: auto; 34 | height: 100%; 35 | position: relative; 36 | z-index: 100; 37 | } 38 | 39 | .menu ul { 40 | list-style: none; 41 | padding: 0; 42 | margin: 0; 43 | } 44 | 45 | .menu ul li { 46 | margin: 0 0 2em 0; 47 | -webkit-transform: translate3d(-150px, 0, 0); 48 | transform: translate3d(-150px, 0, 0); 49 | -webkit-transition: -webkit-transform 0.6s; 50 | transition: transform 0.6s; 51 | } 52 | 53 | .menu.menu--anim ul li { 54 | -webkit-transform: translate3d(0, 0, 0); 55 | transform: translate3d(0, 0, 0); 56 | } 57 | 58 | .menu ul li:first-child { 59 | -webkit-transition-delay: 0.3s; 60 | transition-delay: 0.3s; 61 | } 62 | 63 | .menu ul li:nth-child(2) { 64 | -webkit-transition-delay: 0.2s; 65 | transition-delay: 0.2s; 66 | } 67 | 68 | .menu ul li:nth-child(3) { 69 | -webkit-transition-delay: 0.1s; 70 | transition-delay: 0.1s; 71 | } 72 | 73 | .menu ul li a { 74 | display: block; 75 | outline: none; 76 | } 77 | 78 | .menu ul li .fa { 79 | font-size: 2.5em; 80 | display: block; 81 | margin: 0 auto; 82 | color: #5f656f; 83 | } 84 | 85 | .menu ul li span { 86 | font-weight: bold; 87 | font-size: 0.75em; 88 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 89 | } 90 | 91 | .menu__handle { 92 | background: #2f3238; 93 | border: none; 94 | width: 30px; 95 | height: 24px; 96 | padding: 0; 97 | outline: none; 98 | position: absolute; 99 | top: 3px; 100 | right: 70px; 101 | z-index: 2000; 102 | } 103 | 104 | .menu__handle::before, 105 | .menu__handle::after, 106 | .menu__handle span { 107 | background: #5f656f; 108 | } 109 | 110 | .menu__handle::before, 111 | .menu__handle::after { 112 | content: ''; 113 | position: absolute; 114 | height: 2px; 115 | width: 100%; 116 | left: 0; 117 | top: 50%; 118 | -webkit-transform-origin: 50% 50%; 119 | transform-origin: 50% 50%; 120 | -webkit-transition: -webkit-transform 0.25s; 121 | transition: transform 0.25s; 122 | } 123 | 124 | .menu__handle span { 125 | position: absolute; 126 | width: 100%; 127 | height: 2px; 128 | left: 0; 129 | overflow: hidden; 130 | text-indent: 200%; 131 | -webkit-transition: opacity 0.25s; 132 | transition: opacity 0.25s; 133 | } 134 | 135 | .menu__handle::before { 136 | -webkit-transform: translate3d(0, -10px, 0); 137 | transform: translate3d(0, -10px, 0); 138 | } 139 | 140 | .menu__handle::after { 141 | -webkit-transform: translate3d(0, 10px, 0); 142 | transform: translate3d(0, 10px, 0); 143 | } 144 | 145 | .menu--open .menu__handle span { 146 | opacity: 0; 147 | } 148 | 149 | .menu--open .menu__handle::before { 150 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 151 | transform: rotate3d(0, 0, 1, 45deg); 152 | } 153 | 154 | .menu--open .menu__handle::after { 155 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 156 | transform: rotate3d(0, 0, 1, -45deg); 157 | } 158 | 159 | .morph-shape { 160 | position: absolute; 161 | width: 240px; 162 | height: 100%; 163 | top: 0; 164 | right: 0; 165 | } 166 | 167 | .morph-shape svg path { 168 | stroke: #5f656f; 169 | stroke-width: 5px; 170 | } 171 | 172 | @media screen and (max-width: 63em) { 173 | .main { 174 | padding: 0 2em; 175 | -webkit-transition: opacity 0.6s; 176 | transition: opacity 0.6s; 177 | } 178 | 179 | .menu { 180 | -webkit-transform: translate3d(-170px, 0, 0); 181 | transform: translate3d(-170px, 0, 0); 182 | } 183 | 184 | .menu.menu--open + .main { 185 | opacity: 0.05; 186 | } 187 | } -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Raleway:400,600,700); 2 | 3 | @font-face { 4 | font-weight: normal; 5 | font-style: normal; 6 | font-family: 'codropsicons'; 7 | src:url('../fonts/codropsicons/codropsicons.eot'); 8 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 9 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 10 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 11 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 12 | } 13 | 14 | *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } 15 | .clearfix:before, .clearfix:after { content: ''; display: table; } 16 | .clearfix:after { clear: both; } 17 | 18 | body { 19 | color: #fff; 20 | background: #2f3238; 21 | font-weight: 400; 22 | font-size: 1em; 23 | font-family: 'Raleway', Arial, sans-serif; 24 | } 25 | 26 | a { 27 | color: #B24E51; 28 | text-decoration: none; 29 | } 30 | 31 | a:hover, 32 | a:focus { 33 | color: #afb3b8; 34 | outline: none; 35 | } 36 | 37 | .theme-2 { background: #434d55; } 38 | .theme-2 a { color: #4991C2; } 39 | .theme-2 a:hover, .theme-2 a:focus { color: #74777b; } 40 | 41 | .theme-3 { background: #e4eaea; color: #74777b;} 42 | .theme-3 a { color: #e35583; } 43 | .theme-3 a:hover, .theme-3 a:focus { color: #74777b; } 44 | 45 | .theme-4 a { color: #6EAE8C; } 46 | .theme-4 a:hover, .theme-4 a:focus { color: #74777b; } 47 | 48 | .theme-5 { background: #e4eaea; color: #74777b;} 49 | .theme-5 a { color: #EA8686; } 50 | .theme-5 a:hover, .theme-5 a:focus { color: #74777b; } 51 | 52 | .theme-6 a { color: #CFB75C; } 53 | .theme-6 a:hover, .theme-6 a:focus { color: #74777b; } 54 | 55 | .theme-7 { background: #E8E8E8; color: #FF72AD;} 56 | .theme-7 a { color: #415c71; } 57 | .theme-7 a:hover, .theme-7 a:focus { color: #509EDB; } 58 | 59 | .theme-8 a { color: #938edc; } 60 | 61 | .theme-9 { background: #3D4444; color: #DADADA;} 62 | .theme-9 a { color: #DA7071; } 63 | .theme-9 a:hover, .theme-9 a:focus { color: #74777b; } 64 | 65 | .content { 66 | min-height: 250px; 67 | margin: 0 auto; 68 | padding-bottom: 2em; 69 | } 70 | 71 | .content--tiny { 72 | max-width: 800px; 73 | } 74 | 75 | .container { 76 | text-align: center; 77 | padding: 5.25em 0.5em 0; 78 | } 79 | 80 | /* Header */ 81 | .codrops-header { 82 | padding: 0; 83 | letter-spacing: -1px; 84 | } 85 | 86 | .codrops-header h1 { 87 | font-weight: 800; 88 | font-size: 3.5em; 89 | line-height: 1; 90 | margin: 0; 91 | } 92 | 93 | .codrops-header h1 span { 94 | display: block; 95 | font-size: 35%; 96 | letter-spacing: 1px; 97 | padding-top: 0.75em; 98 | color: #afb3b8; 99 | } 100 | 101 | /* To Navigation Style */ 102 | .codrops-links { 103 | text-transform: uppercase; 104 | font-weight: 300; 105 | font-size: 1.25em; 106 | } 107 | 108 | .codrops-links a { 109 | display: inline-block; 110 | padding: 0.5em 0; 111 | margin: 0.5em; 112 | text-decoration: none; 113 | letter-spacing: 1px; 114 | } 115 | 116 | .codrops-icon span { 117 | display: none; 118 | } 119 | 120 | .codrops-icon:before { 121 | margin: 0 4px; 122 | text-transform: none; 123 | font-weight: normal; 124 | font-style: normal; 125 | font-variant: normal; 126 | font-family: 'codropsicons'; 127 | line-height: 1; 128 | speak: none; 129 | -webkit-font-smoothing: antialiased; 130 | } 131 | 132 | .codrops-icon-drop:before { 133 | content: "\e001"; 134 | } 135 | 136 | .codrops-icon-prev:before { 137 | content: "\e004"; 138 | } 139 | 140 | /* Codrops demo links */ 141 | .codrops-demos { 142 | margin: 3em auto; 143 | max-width: 700px; 144 | } 145 | 146 | .codrops-demos a { 147 | font-weight: 700; 148 | text-transform: uppercase; 149 | letter-spacing: 1px; 150 | padding: 0.25em 0; 151 | margin: 5px 10px; 152 | display: inline-block; 153 | font-size: 0.85em; 154 | } 155 | 156 | .codrops-demos a.current-demo { 157 | opacity: 0.5; 158 | } 159 | 160 | /* Related demos */ 161 | .related { 162 | text-align: center; 163 | padding: 10em 0; 164 | clear: both; 165 | font-weight: bold; 166 | } 167 | 168 | .related > a { 169 | width: 200px; 170 | display: inline-block; 171 | text-align: center; 172 | margin: 1em; 173 | font-size: 0.8em; 174 | vertical-align: top; 175 | } 176 | 177 | .related a img { 178 | max-width: 100%; 179 | opacity: 0.8; 180 | } 181 | 182 | .related a:hover img, 183 | .related a:active img { 184 | opacity: 1; 185 | } 186 | 187 | .related a h3 { 188 | margin: 0; 189 | font-size: ; 190 | padding: 0.5em 0 0.3em; 191 | max-width: 200px; 192 | text-align: left; 193 | } 194 | 195 | @media screen and (max-width: 30em) { 196 | .codrops-header h1 { 197 | font-size: 3em; 198 | } 199 | } 200 | -------------------------------------------------------------------------------- /pullupmenu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Elastic SVG Elements | Pull-up Menu 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 |
23 | 39 |
40 |
41 |

Elastic SVG Elements Adding elasticity with SVG shape animations

42 |
43 | Previous Demo / 44 | Back to the Codrops Article 45 |
46 | 57 |
58 |
59 |
60 | 61 | 116 | 117 | -------------------------------------------------------------------------------- /hamburger.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Elastic SVG Elements | Menu Icon 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 |
23 |
24 |
25 |

Elastic SVG Elements Adding elasticity with SVG shape animations

26 |
27 | Previous Demo / 28 | Back to the Codrops Article 29 |
30 | 41 |
42 | 51 | 52 |
53 |

If you enjoyed this demo you might also like:

54 | 55 | 56 |

Wobbly Slideshow Effect

57 | 58 | 59 | 60 |

Shape Hover Effect

61 | 62 |
63 |
64 |
65 | 66 | 123 | 124 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Elastic SVG Elements | Sidebar menu 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 |
23 | 39 |
40 |
41 |

Elastic SVG Elements Adding elasticity with SVG shape animations

42 |
43 | Previous Demo / 44 | Back to the Codrops Article 45 |
46 | 57 |
58 | 59 |
60 |

If you enjoyed this demo you might also like:

61 | 62 | 63 |

Wobbly Slideshow Effect

64 | 65 | 66 | 67 |

Shape Hover Effect

68 | 69 |
70 |
71 |
72 | 73 | 124 | 125 | -------------------------------------------------------------------------------- /dropdown.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Elastic SVG Elements | Dropdown 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 |
23 |
24 |
25 |

Elastic SVG Elements Adding elasticity with SVG shape animations

26 |
27 | Previous Demo / 28 | Back to the Codrops Article 29 |
30 | 41 |
42 |
43 | 59 |
60 | 61 |
62 |

If you enjoyed this demo you might also like:

63 | 64 | 65 |

Custom Select Elements

66 | 67 | 68 | 69 |

Shape Hover Effect

70 | 71 |
72 |
73 |
74 | 75 | 128 | 129 | -------------------------------------------------------------------------------- /circlemenu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Elastic SVG Elements | Circular Menu 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 |
23 |
24 |
25 |

Elastic SVG Elements Adding elasticity with SVG shape animations

26 |
27 | Previous Demo / 28 | Back to the Codrops Article 29 |
30 | 41 |
42 | 60 | 61 |
62 |

If you enjoyed this demo you might also like:

63 | 64 | 65 |

Wobbly Slideshow Effect

66 | 67 | 68 | 69 |

Shape Hover Effect

70 | 71 |
72 |
73 |
74 | 75 | 124 | 125 | -------------------------------------------------------------------------------- /drag.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Elastic SVG Elements | Drag & Drop 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 |
23 |
24 |
25 |

Elastic SVG Elements Adding elasticity with SVG shape animations

26 |
27 | Previous Demo / 28 | Back to the Codrops Article 29 |
30 | 41 |
42 |
43 |
44 | 46 | 47 | 49 | 50 | 51 | 52 |
53 |
54 | 56 | 57 | 59 | 60 | 61 | 62 |
63 |
64 | 66 | 67 | 69 | 70 | 71 | 72 |
73 |
74 | 75 |
76 |

If you enjoyed this demo you might also like:

77 | 78 | 79 |

Drag & Drop Interaction Ideas

80 | 81 | 82 | 83 |

Shape Hover Effect

84 | 85 |
86 |
87 |
88 | 89 | 90 | 161 | 162 | -------------------------------------------------------------------------------- /js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.8.3 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-cssanimations-shiv-cssclasses-prefixed-testprop-testallprops-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.8.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.cssanimations=function(){return D("animationName")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,e.prefixed=function(a,b,c){return b?D(a,b,c):D(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f 2 | 3 | 4 | 5 | 6 | 7 | Elastic SVG Elements | Form Inputs 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 |
23 |
24 |
25 |

Elastic SVG Elements Adding elasticity with SVG shape animations

26 |
27 | Previous Demo / 28 | Back to the Codrops Article 29 |
30 | 41 |
42 |
43 |
44 | 45 |
46 | 47 | 49 | 50 | 51 | 52 | 53 |
54 |
55 | 56 |
57 | 58 | 59 | 60 | 61 | 62 | 63 |
64 |
65 |

Click, hold & release:

66 |
67 |
68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 |
76 | 77 |
78 |
79 |
80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 |
88 | 89 |
90 |
91 |
92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 |
100 | 101 |
102 |
103 |
104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 |
112 | 113 |
114 |
115 | 116 |
117 |

If you enjoyed this demo you might also like:

118 | 119 | 120 |

Animated Checkboxes

121 | 122 | 123 | 124 |

Shape Hover Effect

125 | 126 |
127 |
128 |
129 | 130 | 189 | 190 | -------------------------------------------------------------------------------- /collapseexpand.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Elastic SVG Elements | Collapse and Expand 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 |
23 |
24 |
25 |

Elastic SVG Elements Adding elasticity with SVG shape animations

26 |
27 | Previous Demo / 28 | Back to the Codrops Article 29 |
30 | 41 |
42 |
43 |

Collapse

44 |
45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 | 59 |
60 |
61 | 62 | 63 | 64 | 65 | 66 | 67 |
68 |
69 |
70 |

Expand

71 |
72 | 74 | 75 | 76 | 77 | 78 | 79 |
80 |
81 | 82 |
83 |

If you enjoyed this demo you might also like:

84 | 85 | 86 |

Wobbly Slideshow Effect

87 | 88 | 89 | 90 |

Shape Hover Effect

91 | 92 |
93 |
94 |
95 | 96 | 182 | 183 | -------------------------------------------------------------------------------- /js/draggabilly.pkgd.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Draggabilly PACKAGED v1.1.1 3 | * Make that shiz draggable 4 | * http://draggabilly.desandro.com 5 | * MIT license 6 | */ 7 | 8 | !function(a){function b(a){return new RegExp("(^|\\s+)"+a+"(\\s+|$)")}function c(a,b){var c=d(a,b)?f:e;c(a,b)}var d,e,f;"classList"in document.documentElement?(d=function(a,b){return a.classList.contains(b)},e=function(a,b){a.classList.add(b)},f=function(a,b){a.classList.remove(b)}):(d=function(a,c){return b(c).test(a.className)},e=function(a,b){d(a,b)||(a.className=a.className+" "+b)},f=function(a,c){a.className=a.className.replace(b(c)," ")});var g={hasClass:d,addClass:e,removeClass:f,toggleClass:c,has:d,add:e,remove:f,toggle:c};"function"==typeof define&&define.amd?define("classie/classie",g):a.classie=g}(window),function(){function a(){}function b(a,b){for(var c=a.length;c--;)if(a[c].listener===b)return c;return-1}function c(a){return function(){return this[a].apply(this,arguments)}}var d=a.prototype;d.getListeners=function(a){var b,c,d=this._getEvents();if("object"==typeof a){b={};for(c in d)d.hasOwnProperty(c)&&a.test(c)&&(b[c]=d[c])}else b=d[a]||(d[a]=[]);return b},d.flattenListeners=function(a){var b,c=[];for(b=0;be;e++)if(b=c[e]+a,"string"==typeof d[b])return b}}var c="Webkit Moz ms Ms O".split(" "),d=document.documentElement.style;"function"==typeof define&&define.amd?define("get-style-property/get-style-property",[],function(){return b}):a.getStyleProperty=b}(window),function(a){function b(a){var b=parseFloat(a),c=-1===a.indexOf("%")&&!isNaN(b);return c&&b}function c(){for(var a={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},b=0,c=g.length;c>b;b++){var d=g[b];a[d]=0}return a}function d(a){function d(a){if("string"==typeof a&&(a=document.querySelector(a)),a&&"object"==typeof a&&a.nodeType){var d=f(a);if("none"===d.display)return c();var i={};i.width=a.offsetWidth,i.height=a.offsetHeight;for(var j=i.isBorderBox=!(!h||!d[h]||"border-box"!==d[h]),k=0,l=g.length;l>k;k++){var m=g[k],n=d[m],o=parseFloat(n);i[m]=isNaN(o)?0:o}var p=i.paddingLeft+i.paddingRight,q=i.paddingTop+i.paddingBottom,r=i.marginLeft+i.marginRight,s=i.marginTop+i.marginBottom,t=i.borderLeftWidth+i.borderRightWidth,u=i.borderTopWidth+i.borderBottomWidth,v=j&&e,w=b(d.width);w!==!1&&(i.width=w+(v?0:p+t));var x=b(d.height);return x!==!1&&(i.height=x+(v?0:q+u)),i.innerWidth=i.width-(p+t),i.innerHeight=i.height-(q+u),i.outerWidth=i.width+r,i.outerHeight=i.height+s,i}}var e,h=a("boxSizing");return function(){if(h){var a=document.createElement("div");a.style.width="200px",a.style.padding="1px 2px 3px 4px",a.style.borderStyle="solid",a.style.borderWidth="1px 2px 3px 4px",a.style[h]="border-box";var c=document.body||document.documentElement;c.appendChild(a);var d=f(a);e=200===b(d.width),c.removeChild(a)}}(),d}var e=document.defaultView,f=e&&e.getComputedStyle?function(a){return e.getComputedStyle(a,null)}:function(a){return a.currentStyle},g=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"];"function"==typeof define&&define.amd?define("get-size/get-size",["get-style-property/get-style-property"],d):a.getSize=d(a.getStyleProperty)}(window),function(a){function b(a,b){for(var c in b)a[c]=b[c];return a}function c(){}function d(d,e,g,j,k){function m(a,c){this.element="string"==typeof a?f.querySelector(a):a,this.options=b({},this.options),b(this.options,c),this._create()}function n(){return!1}function o(a,b){a.x=void 0!==b.pageX?b.pageX:b.clientX,a.y=void 0!==b.pageY?b.pageY:b.clientY}function p(a,b,c){return c=c||"round",b?Math[c](a/b)*b:a}var q=j("transform"),r=!!j("perspective");b(m.prototype,e.prototype),m.prototype.options={},m.prototype._create=function(){this.position={},this._getPosition(),this.startPoint={x:0,y:0},this.dragPoint={x:0,y:0},this.startPosition=b({},this.position);var a=h(this.element);"relative"!==a.position&&"absolute"!==a.position&&(this.element.style.position="relative"),this.enable(),this.setHandles()},m.prototype.setHandles=function(){this.handles=this.options.handle?this.element.querySelectorAll(this.options.handle):[this.element];for(var b=0,c=this.handles.length;c>b;b++){var d=this.handles[b];a.navigator.pointerEnabled?(g.bind(d,"pointerdown",this),d.style.touchAction="none"):a.navigator.msPointerEnabled?(g.bind(d,"MSPointerDown",this),d.style.msTouchAction="none"):(g.bind(d,"mousedown",this),g.bind(d,"touchstart",this),t(d))}};var s="attachEvent"in f.documentElement,t=s?function(a){"IMG"===a.nodeName&&(a.ondragstart=n);for(var b=a.querySelectorAll("img"),c=0,d=b.length;d>c;c++){var e=b[c];e.ondragstart=n}}:c;m.prototype._getPosition=function(){var a=h(this.element),b=parseInt(a.left,10),c=parseInt(a.top,10);this.position.x=isNaN(b)?0:b,this.position.y=isNaN(c)?0:c,this._addTransformPosition(a)},m.prototype._addTransformPosition=function(a){if(q){var b=a[q];if(0===b.indexOf("matrix")){var c=b.split(","),d=0===b.indexOf("matrix3d")?12:4,e=parseInt(c[d],10),f=parseInt(c[d+1],10);this.position.x+=e,this.position.y+=f}}},m.prototype.handleEvent=function(a){var b="on"+a.type;this[b]&&this[b](a)},m.prototype.getTouch=function(a){for(var b=0,c=a.length;c>b;b++){var d=a[b];if(d.identifier===this.pointerIdentifier)return d}},m.prototype.onmousedown=function(a){var b=a.button;b&&0!==b&&1!==b||this.dragStart(a,a)},m.prototype.ontouchstart=function(a){this.isDragging||this.dragStart(a,a.changedTouches[0])},m.prototype.onMSPointerDown=m.prototype.onpointerdown=function(a){this.isDragging||this.dragStart(a,a)};var u={mousedown:["mousemove","mouseup"],touchstart:["touchmove","touchend","touchcancel"],pointerdown:["pointermove","pointerup","pointercancel"],MSPointerDown:["MSPointerMove","MSPointerUp","MSPointerCancel"]};m.prototype.dragStart=function(b,c){this.isEnabled&&(b.preventDefault?b.preventDefault():b.returnValue=!1,this.pointerIdentifier=void 0!==c.pointerId?c.pointerId:c.identifier,this._getPosition(),this.measureContainment(),o(this.startPoint,c),this.startPosition.x=this.position.x,this.startPosition.y=this.position.y,this.setLeftTop(),this.dragPoint.x=0,this.dragPoint.y=0,this._bindEvents({events:u[b.type],node:b.preventDefault?a:f}),d.add(this.element,"is-dragging"),this.isDragging=!0,this.emitEvent("dragStart",[this,b,c]),this.animate())},m.prototype._bindEvents=function(a){for(var b=0,c=a.events.length;c>b;b++){var d=a.events[b];g.bind(a.node,d,this)}this._boundEvents=a},m.prototype._unbindEvents=function(){var a=this._boundEvents;if(a&&a.events){for(var b=0,c=a.events.length;c>b;b++){var d=a.events[b];g.unbind(a.node,d,this)}delete this._boundEvents}},m.prototype.measureContainment=function(){var a=this.options.containment;if(a){this.size=k(this.element);var b=this.element.getBoundingClientRect(),c=i(a)?a:"string"==typeof a?f.querySelector(a):this.element.parentNode;this.containerSize=k(c);var d=c.getBoundingClientRect();this.relativeStartPosition={x:b.left-d.left,y:b.top-d.top}}},m.prototype.onmousemove=function(a){this.dragMove(a,a)},m.prototype.onMSPointerMove=m.prototype.onpointermove=function(a){a.pointerId===this.pointerIdentifier&&this.dragMove(a,a)},m.prototype.ontouchmove=function(a){var b=this.getTouch(a.changedTouches);b&&this.dragMove(a,b)},m.prototype.dragMove=function(a,b){o(this.dragPoint,b);var c=this.dragPoint.x-this.startPoint.x,d=this.dragPoint.y-this.startPoint.y,e=this.options.grid,f=e&&e[0],g=e&&e[1];c=p(c,f),d=p(d,g),c=this.containDrag("x",c,f),d=this.containDrag("y",d,g),c="y"===this.options.axis?0:c,d="x"===this.options.axis?0:d,this.position.x=this.startPosition.x+c,this.position.y=this.startPosition.y+d,this.dragPoint.x=c,this.dragPoint.y=d,this.emitEvent("dragMove",[this,a,b])},m.prototype.containDrag=function(a,b,c){if(!this.options.containment)return b;var d="x"===a?"width":"height",e=this.relativeStartPosition[a],f=p(-e,c,"ceil"),g=this.containerSize[d]-e-this.size[d];return g=p(g,c,"floor"),Math.min(g,Math.max(f,b))},m.prototype.onmouseup=function(a){this.dragEnd(a,a)},m.prototype.onMSPointerUp=m.prototype.onpointerup=function(a){a.pointerId===this.pointerIdentifier&&this.dragEnd(a,a)},m.prototype.ontouchend=function(a){var b=this.getTouch(a.changedTouches);b&&this.dragEnd(a,b)},m.prototype.dragEnd=function(a,b){this.isDragging=!1,delete this.pointerIdentifier,q&&(this.element.style[q]="",this.setLeftTop()),this._unbindEvents(),d.remove(this.element,"is-dragging"),this.emitEvent("dragEnd",[this,a,b])},m.prototype.onMSPointerCancel=m.prototype.onpointercancel=function(a){a.pointerId===this.pointerIdentifier&&this.dragEnd(a,a)},m.prototype.ontouchcancel=function(a){var b=this.getTouch(a.changedTouches);this.dragEnd(a,b)},m.prototype.animate=function(){if(this.isDragging){this.positionDrag();var a=this;l(function(){a.animate()})}};var v=r?function(a,b){return"translate3d( "+a+"px, "+b+"px, 0)"}:function(a,b){return"translate( "+a+"px, "+b+"px)"};return m.prototype.setLeftTop=function(){this.element.style.left=this.position.x+"px",this.element.style.top=this.position.y+"px"},m.prototype.positionDrag=q?function(){this.element.style[q]=v(this.dragPoint.x,this.dragPoint.y)}:m.prototype.setLeftTop,m.prototype.enable=function(){this.isEnabled=!0},m.prototype.disable=function(){this.isEnabled=!1,this.isDragging&&this.dragEnd()},m}for(var e,f=a.document,g=f.defaultView,h=g&&g.getComputedStyle?function(a){return g.getComputedStyle(a,null)}:function(a){return a.currentStyle},i="object"==typeof HTMLElement?function(a){return a instanceof HTMLElement}:function(a){return a&&"object"==typeof a&&1===a.nodeType&&"string"==typeof a.nodeName},j=0,k="webkit moz ms o".split(" "),l=a.requestAnimationFrame,m=a.cancelAnimationFrame,n=0;nli{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"} -------------------------------------------------------------------------------- /button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Elastic SVG Elements | Buttons 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 |
23 |
24 |
25 |

Elastic SVG Elements Adding elasticity with SVG shape animations

26 |
27 | Previous Demo / 28 | Back to the Codrops Article 29 |
30 | 41 |
42 |
43 |
44 | 52 | 60 | 68 | 76 |
77 |
78 | 86 | 94 | 102 | 110 |
111 |
112 | 120 | 128 | 136 | 144 |
145 |
146 | 154 | 162 | 170 | 178 |
179 |
180 | 188 | 196 | 204 | 212 |
213 |
214 | 222 | 230 | 238 | 246 |
247 |
248 | 256 | 264 | 272 | 280 |
281 |
282 | 290 | 298 | 306 | 314 |
315 |
316 | 317 |
318 |

If you enjoyed this demo you might also like:

319 | 320 | 321 |

Wobbly Slideshow Effect

322 | 323 | 324 | 325 |

Shape Hover Effect

326 | 327 |
328 |
329 |
330 | 331 | 399 | 400 | --------------------------------------------------------------------------------