<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>
