"cloud"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/jcblw/pen/zbqLu?limit=all&page=46&q=mobile" /> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">@-webkit-keyframes jitter { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 25% { -webkit-transform: translate(3px, 0); transform: translate(3px, 0); } 50% { -webkit-transform: translate(-3px, 0); transform: translate(-3px, 0); } 75% { -webkit-transform: translate(3px, 0); transform: translate(3px, 0); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes jitter { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 25% { -webkit-transform: translate(3px, 0); transform: translate(3px, 0); } 50% { -webkit-transform: translate(-3px, 0); transform: translate(-3px, 0); } 75% { -webkit-transform: translate(3px, 0); transform: translate(3px, 0); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes flyin { 0% { -webkit-transform: translate(0, 0) rotate(0deg) scale(1); transform: translate(0, 0) rotate(0deg) scale(1); } 25% { -webkit-transform: translate(30px, -40px) rotate(20deg) scale(0.9); transform: translate(30px, -40px) rotate(20deg) scale(0.9); } 50% { -webkit-transform: translate(70px, -30px) rotate(45deg) scale(0.8); transform: translate(70px, -30px) rotate(45deg) scale(0.8); } 100% { -webkit-transform: translate(360px, 20px) rotate(90deg) scale(0.6); transform: translate(360px, 20px) rotate(90deg) scale(0.6); } } @keyframes flyin { 0% { -webkit-transform: translate(0, 0) rotate(0deg) scale(1); transform: translate(0, 0) rotate(0deg) scale(1); } 25% { -webkit-transform: translate(30px, -40px) rotate(20deg) scale(0.9); transform: translate(30px, -40px) rotate(20deg) scale(0.9); } 50% { -webkit-transform: translate(70px, -30px) rotate(45deg) scale(0.8); transform: translate(70px, -30px) rotate(45deg) scale(0.8); } 100% { -webkit-transform: translate(360px, 20px) rotate(90deg) scale(0.6); transform: translate(360px, 20px) rotate(90deg) scale(0.6); } } @-webkit-keyframes flyout { 0% { -webkit-transform: rotate(-90deg) scale(0.3); transform: rotate(-90deg) scale(0.3); margin-right: 350px; } 100% { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); margin-right: 30px; } } @keyframes flyout { 0% { -webkit-transform: rotate(-90deg) scale(0.3); transform: rotate(-90deg) scale(0.3); margin-right: 350px; } 100% { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); margin-right: 30px; } } @-webkit-keyframes ticker { 0% { padding-left: 50px; width: 200px; } 100% { width: 50px; padding-left: 200px; } } @keyframes ticker { 0% { padding-left: 50px; width: 200px; } 100% { width: 50px; padding-left: 200px; } } @-webkit-keyframes fadeinout { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 25% { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } 75% { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; display: none; } } @keyframes fadeinout { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 25% { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } 75% { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; display: none; } } @-webkit-keyframes fadein { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } } @keyframes fadein { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } } body { background: #ECEEF1; } a { color: #D73825; font-size: .8em; text-decoration: none; } h4 { color: #222; font-size: 23px; margin: 0; padding: 0; } .darkgrey { color: #9099A3; font-size: 23px; } .row { margin: 30px auto; padding: 10px 0; max-width: 940px; position: relative; } .pre-docs { position: absolute; margin-top: 50px; float: left; } .pre-docs .document { float: left; } .post-doc { float: right; -webkit-transform: rotate(-90deg) scale(0.3); transform: rotate(-90deg) scale(0.3); margin-right: 350px; } .document { width: 100px; height: 125px; margin: 15px; position: relative; z-index: 1; text-align: center; } .document span { -webkit-transition-property: border-width; transition-property: border-width; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; content: ""; display: block; position: absolute; top: 0; left: 0; width: 0; height: 0; border-width: 20px; border-color: #ddd rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.3) #ddd; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); border-style: solid; } .document em { position: absolute; bottom: 5px; right: 7px; font-style: none; color: rgba(255, 255, 255, 0.5); } .document:hover span { border-width: 30px; } .document.doc { background: #38405b; } .document.doc span { border-color: #ECEEF1 #73798b #73798b #ECEEF1; } .document.pdf { background: #dd4b39; } .document.pdf span { border-color: #ECEEF1 #e78074 #e78074 #ECEEF1; } .document.html { background: #38405b; width: 150px; height: 180px; } .document.html span { border-color: #ECEEF1 #dd4b39 #dd4b39 #ECEEF1; } .document.html em { color: #fff; font-size: 1.2em; } .cloud { height: 125px; background: #fff; width: 300px; margin: 100px auto 0; border-radius: 75px; position: relative; z-index: 3; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } .cloud:after { display: inline-block; content: ""; width: 80px; height: 80px; border-radius: 100%; position: absolute; top: -65px; left: 180px; background: #fff; } .cloud:before { display: inline-block; content: ""; width: 150px; height: 150px; border-radius: 100%; position: absolute; top: -90px; left: 50px; background: #fff; } .copy { position: relative; } .copy > div { position: absolute; top: 20px; left: 30px; max-width: 275px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .lines > div { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .lines .line { -webkit-animation-delay: 0; -webkit-animation-duration: 1s; -webkit-animation-name: ticker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0; -moz-animation-duration: 1s; -moz-animation-name: ticker; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -moz-animation-fill-mode: forwards; -o-animation-delay: 0; -o-animation-duration: 1s; -o-animation-name: ticker; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; -o-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 1s; animation-name: ticker; animation-iteration-count: infinite; animation-timing-function: linear; animation-fill-mode: forwards; width: 200px; height: 30px; overflow: hidden; position: absolute; top: 50%; } .lines .line:after { border-top: 20px dotted #9099A3; margin-left: -200px; width: 600px; height: 100px; content: ""; display: inline-block; } .lines .line.post { right: 100px; } .lines .line.pre { left: 100px; } .button { -webkit-transition: all 0.3s; transition: all 0.3s; width: auto; background: #DD4A38; border-radius: 3px; border: none; border-bottom: 5px solid #9C3528; color: white; cursor: pointer; display: inline-block; font-family: inherit; font-size: 14px; font-weight: bold; line-height: 1; margin: 10px 0; padding: 10px 20px 11px; position: relative; text-align: center; text-decoration: none; } .button:active { -webkit-transform: translate(0, 5px); transform: translate(0, 5px); border-bottom-width: 0; } .cloud-processing.process .line-pre { -webkit-animation-delay: 0; -webkit-animation-duration: 1s; -webkit-animation-name: fadeinout; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0; -moz-animation-duration: 1s; -moz-animation-name: fadeinout; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -moz-animation-fill-mode: forwards; -o-animation-delay: 0; -o-animation-duration: 1s; -o-animation-name: fadeinout; -o-animation-iteration-count: 1; -o-animation-timing-function: linear; -o-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 1s; animation-name: fadeinout; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } .cloud-processing.process .line-post { -webkit-animation-delay: 5s; -webkit-animation-duration: 1s; -webkit-animation-name: fadein; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 5s; -moz-animation-duration: 1s; -moz-animation-name: fadein; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -moz-animation-fill-mode: forwards; -o-animation-delay: 5s; -o-animation-duration: 1s; -o-animation-name: fadein; -o-animation-iteration-count: 1; -o-animation-timing-function: linear; -o-animation-fill-mode: forwards; animation-delay: 5s; animation-duration: 1s; animation-name: fadein; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } .cloud-processing.process .pre-docs .doc { -webkit-animation-delay: 0.5s; -webkit-animation-duration: 0.8s; -webkit-animation-name: flyin; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.5s; -moz-animation-duration: 0.8s; -moz-animation-name: flyin; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.5s; -o-animation-duration: 0.8s; -o-animation-name: flyin; -o-animation-iteration-count: 1; -o-animation-timing-function: linear; -o-animation-fill-mode: forwards; animation-delay: 0.5s; animation-duration: 0.8s; animation-name: flyin; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } .cloud-processing.process .pre-docs .pdf { -webkit-animation-delay: 0; -webkit-animation-duration: 1s; -webkit-animation-name: flyin; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0; -moz-animation-duration: 1s; -moz-animation-name: flyin; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -moz-animation-fill-mode: forwards; -o-animation-delay: 0; -o-animation-duration: 1s; -o-animation-name: flyin; -o-animation-iteration-count: 1; -o-animation-timing-function: linear; -o-animation-fill-mode: forwards; animation-delay: 0; animation-duration: 1s; animation-name: flyin; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } .cloud-processing.process .post-doc { -webkit-animation-delay: 4s; -webkit-animation-duration: 1s; -webkit-animation-name: flyout; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 4s; -moz-animation-duration: 1s; -moz-animation-name: flyout; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -moz-animation-fill-mode: forwards; -o-animation-delay: 4s; -o-animation-duration: 1s; -o-animation-name: flyout; -o-animation-iteration-count: 1; -o-animation-timing-function: linear; -o-animation-fill-mode: forwards; animation-delay: 4s; animation-duration: 1s; animation-name: flyout; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } .cloud-processing.process .cloud { -webkit-animation-delay: 1s; -webkit-animation-duration: 1s; -webkit-animation-name: jitter; -webkit-animation-iteration-count: 4; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 1s; -moz-animation-duration: 1s; -moz-animation-name: jitter; -moz-animation-iteration-count: 4; -moz-animation-timing-function: linear; -moz-animation-fill-mode: forwards; -o-animation-delay: 1s; -o-animation-duration: 1s; -o-animation-name: jitter; -o-animation-iteration-count: 4; -o-animation-timing-function: linear; -o-animation-fill-mode: forwards; animation-delay: 1s; animation-duration: 1s; animation-name: jitter; animation-iteration-count: 4; animation-timing-function: linear; animation-fill-mode: forwards; } .cloud-processing.process .pre-text { -webkit-animation-delay: 1s; -webkit-animation-duration: 4s; -webkit-animation-name: fadeinout; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 1s; -moz-animation-duration: 4s; -moz-animation-name: fadeinout; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; -moz-animation-fill-mode: forwards; -o-animation-delay: 1s; -o-animation-duration: 4s; -o-animation-name: fadeinout; -o-animation-iteration-count: 1; -o-animation-timing-function: linear; -o-animation-fill-mode: forwards; animation-delay: 1s; animation-duration: 4s; animation-name: fadeinout; animation-iteration-count: 1; animation-timing-function: linear; animation-fill-mode: forwards; } .cloud-processing.process .post-text { -webkit-animation-delay: 5s; -webkit-animation-duration: 1s; -webkit-animation-name: fadein; -webkit-animation-iteration-count: linear; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 5s; -moz-animation-duration: 1s; -moz-animation-name: fadein; -moz-animation-iteration-count: linear; -moz-animation-timing-function: linear; -moz-animation-fill-mode: forwards; -o-animation-delay: 5s; -o-animation-duration: 1s; -o-animation-name: fadein; -o-animation-iteration-count: linear; -o-animation-timing-function: linear; -o-animation-fill-mode: forwards; animation-delay: 5s; animation-duration: 1s; animation-name: fadein; animation-iteration-count: linear; animation-timing-function: linear; animation-fill-mode: forwards; } .clear { clear: both; } </style></head><body> <div class="row cloud-processing"><div class="lines"><div class="line-pre"><div class="line pre"></div></div><div class="line-post"><div class="line post"></div></div></div><div class="pre-docs"><div class="document doc"><span></span><em>DOC</em></div><div class="document pdf"><span></span><em>PDF</em></div><div class="clear"></div></div><div class="post-doc"><div class="document html"><span></span><em>HTML 5</em></div></div><div class="copy"><div class="pre-text"><h4>You ...</h4><p class="darkgrey">Post your document to the Signature.io's API for processing. You can jpgs, docs, pdfs, html and more.<a href="http://signature.io" target="_blank"> checkout the list</a></p></div><div class="post-text"><h4>Signature.io ...</h4><p class="darkgrey">Creates a special HTML 5 document, and a link to the signable document<a href="http://jcbl.ws" target="_blank" class="button">Try it out</a></p></div></div><div class="cloud"></div><div class="clear"></div></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >// for http://signature.io var cloud = $('.cloud'); var process = $(".cloud-processing"); process.addClass("process"); // to restart the animation click and hold on the cloud cloud.on("mousedown", function(){ process.addClass("process"); }); cloud.on("mouseup", function(){ process.removeClass("process"); }); // TODO //- settup mobile friendly version //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: