"animation"
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/jasesmith/pen/WGJQZW?depth=everything&order=popularity&page=58&q=Overlay&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <style class="cp-pen-styles">@import "https://fonts.googleapis.com/css?family=Unkempt"; @-webkit-keyframes droplet { 50% { box-shadow: 0 0 0 3.5em; color: transparent; } } @keyframes droplet { 50% { box-shadow: 0 0 0 3.5em; color: transparent; } } .static { position: relative; z-index: 1; } .static div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: default; background: -webkit-radial-gradient(top left, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.15) 65%, rgba(255, 255, 255, 0.5) 100%), -webkit-radial-gradient(top left, rgba(255, 255, 255, 0.85) 0%, rgba(0, 0, 0, 0) 75%), -webkit-radial-gradient(30% 30%, rgba(255, 255, 255, 0.2) 10%, rgba(0, 0, 0, 0) 15%), -webkit-radial-gradient(28% 18%, rgba(255, 255, 255, 0.4) 5%, rgba(0, 0, 0, 0) 5%), currentColor; background: radial-gradient(top left, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.15) 65%, rgba(255, 255, 255, 0.5) 100%), radial-gradient(top left, rgba(255, 255, 255, 0.85) 0%, rgba(0, 0, 0, 0) 75%), radial-gradient(30% 30%, rgba(255, 255, 255, 0.2) 10%, rgba(0, 0, 0, 0) 15%), radial-gradient(28% 18%, rgba(255, 255, 255, 0.4) 5%, rgba(0, 0, 0, 0) 5%), currentColor; font-size: 50%; width: 9vmin; height: 9vmin; margin: 0 2em; border-radius: 100%; box-shadow: 0 0 0 0.3ch rgba(0, 0, 0, 0.1) inset, 0 0.5em 3em -1em #342342; will-change: transform; } .static div span { pointer-events: none; mix-blend-mode: overlay; color: #333; text-shadow: .1ch .1ch 0 #999; } .static div:hover { -webkit-animation: jello .7s ease-out; animation: jello .7s ease-out; } .dynamic { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; overflow: hidden; font-size: calc(120% + 2.5vmax); } .dynamic div { pointer-events: none; position: absolute; padding: 2px; border-radius: 1em; -webkit-animation: droplet 3.2s alternate ease-out infinite; animation: droplet 3.2s alternate ease-out infinite; will-change: box-shadow; color: inherit; background: currentColor !important; box-shadow: 0 0; } .normal .dynamic div { mix-blend-mode: normal; } .multiply .dynamic div { mix-blend-mode: multiply; } .screen .dynamic div { mix-blend-mode: screen; } .overlay .dynamic div { mix-blend-mode: overlay; } .darken .dynamic div { mix-blend-mode: darken; } .lighten .dynamic div { mix-blend-mode: lighten; } .color-dodge .dynamic div { mix-blend-mode: color-dodge; } .color-burn .dynamic div { mix-blend-mode: color-burn; } .hard-light .dynamic div { mix-blend-mode: hard-light; } .soft-light .dynamic div { mix-blend-mode: soft-light; } .difference .dynamic div { mix-blend-mode: difference; } .exclusion .dynamic div { mix-blend-mode: exclusion; } .hue .dynamic div { mix-blend-mode: hue; } .saturation .dynamic div { mix-blend-mode: saturation; } .color .dynamic div { mix-blend-mode: color; } .luminosity .dynamic div { mix-blend-mode: luminosity; } .unset .dynamic div { mix-blend-mode: unset; } main .c1 { color: #481459; } main .c2 { color: #ff703b; } main .c3 { color: #d2de74; } main .c4 { color: #0dc7db; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; background: #d9d9d3; } body { margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: calc(1em + 1vmin); font-family: Helvetica, sans-serif; } h1, h2, h3, h4, footer { text-align: center; font-weight: 200; margin: 1em 0; color: #777; text-shadow: 0 0 em; font-family: Unkempt, FontAwesome, sans-serif; text-rendering: geometricPrecision; } small { display: block; font-size: .4em; color: #555; } .tools { mix-blend-mode: unset; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; background: #343439; color: #ddd; line-height: 1; top: 0; left: 0; right: 0; margin: 0; padding: .5em; cursor: pointer; } .tools > * { pointer-events: none; } .tools b { box-shadow: 0 0.1ch 0 0 rgba(255, 255, 255, 0.35); display: inline-block; padding: 0 .5ch; } .status { color: #555; } main { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } footer { position: absolute; right: 0; bottom: 0; font-size: 65%; padding: 2em; margin: 0; } footer a { color: inherit; text-decoration: none; color: #777; } </style></head><body> <main class='dynamic'></main> <h1> Inky Autumn Disco <small>click anywhere to start the party</small> </h1> <main class='static'> <div class='c1'> <span>#481459</span> </div> <div class='c2'> <span>#ff703b</span> </div> <div class='c3'> <span>#d2de74</span> </div> <div class='c4'> <span>#0dc7db</span> </div> </main> <h3 class='tools'> party blend: <b>multiply</b> </h3> <h2 class='status'> <small> droplets: <b>0</b> </small> </h2> <footer> <a href='https://codepen.io/collection/AvKkNx/' target='_blank'>More Inky Things </a> </footer> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >// TO-DO: make it work with mobile/touch screen (function() { var maxNodes = 100; var interval = 80; var colors = ['#343439','#ff703b','#d2de74','#0dc7db']; var modes = ['normal','overlay','screen','multiply','lighten','darken','color-dodge','color-burn','soft-light','hard-light','difference','exclusion','hue','saturation','color','luminosity','unset']; var mode = 2; var c = 'c'+colors.length; var go = false; var html = document.querySelector('html'); var body = document.querySelector('body'); var main = document.querySelector('main.dynamic'); var modeText = document.querySelector('.tools b'); var instrux = document.querySelector('h1 small'); var status = document.querySelector('.status b'); var setMode = function(mode){ // mode = mode || modes[Math.round( Math.random() * (modes.length - 1) )]; var modeName = modes[mode]; body.classList = modeName; modeText.innerText = modeName; }; setMode(mode); var cleanup = function(max) { var sprites = main.querySelectorAll('div'); sprites = Array.from(sprites); if(max === 0) { main.innerHTML = ''; sprites.length = 0; // } else { // if(sprites.length > max) { // main.removeChild(main.firstChild); // sprites.length = max; // } } status.innerText = sprites.length; } var mouseMove = function(e) { if(go) { var echo = document.createElement('div'); echo.style.left = e.clientX+'px'; echo.style.top = e.clientY+'px'; echo.classList = c; main.appendChild(echo); cleanup(maxNodes); } }; // base throttle fn from: https://codepen.io/SitePoint/pen/RRLVAL // added: event propagation function throttle(target, fn, wait) { var time = Date.now(); return function() { if ((time + wait - Date.now()) < 0) { fn(target.event); time = Date.now(); } } } var mouseHandler = function(e){ var target = e.target; if(target.tagName === 'DIV') { c = target.classList[0]; target.style.transformOrigin = Math.round(Math.random()*100)+'% ' + Math.round(Math.random()*100)+'%'; } }; var clickHandler = function(e){ if(e.target.className === 'tools') { mode++; if(parseInt(mode) > modes.length-1) { mode = 0; } setMode(mode); } else if(e.target.tagName === 'A' || e.target.tagName === 'FOOTER') { // do nothing } else { go = !go; instrux.innerHTML = go ? ' recording': ' playing'; if(go) { cleanup(0); } } }; var addListenerMulti = function(scope, signatures, fn) { var events = signatures.split(' '); for (var i = 0, len = events.length; i < len; i++) {if (window.CP.shouldStopExecution(1)){break;} scope.addEventListener(events[i], fn, false); } window.CP.exitedLoop(1); }; addListenerMulti(document, 'mousemove touchstart touchmove', throttle(this, mouseMove, interval)); addListenerMulti(document, 'click', clickHandler); addListenerMulti(document, 'mouseover', mouseHandler); })(); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: