<div class="glowy-blob">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<span>Drag</span>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
@import 'compass/css3';
@import url('https://fonts.googleapis.com/css?family=Chewy|Gloria+Hallelujah');
$bg : #121327;
html { height:100%; width:100%; }
body{
margin:0;
padding:0;
height:100%;
width:100%;
background:$bg;
overflow:hidden;
@include filter(hue-rotate(0deg));
@include animation(huerot 5s ease infinite )
}
/** end for goo container **/
@function randomNum($min, $max) {
$rand: random();
$randomNum: $min + floor($rand * (($max - $min) + 1));
@return $randomNum;
}
$color:#fff;
$color2:#5048A0;
$color3:#85EDE8;
$color4:#48098b;
.glowy-blob {
position:absolute;
left:50%;
top:50%;
@include transform(translate(-50,-50));
@include filter(url('#goo'));
div {
width:80px;
height: 80px;
background:$color3;
@include border-radius(500px);
display: inline-block;
position:absolute;
box-shadow:0px 0px 50px $color3;
$top-collection: 0;
$left-collection: 0;
@for $i from 2 to 17 {
$left: randomNum(-60px, 60px);
$top: randomNum(-60px, 60px);
$randWH : randomNum(30px, 60px);
&:nth-child(#{$i}) {
width:$randWH;
height: $randWH;
left:$left;
}
$left-collection: append($left-collection,$left);
$top-collection: append($top-collection,$top);
}
@for $i from 1 to length($top-collection) {
&:nth-child(#{$i}) {
top: 0;
left: 0;
@include animation(anim-#{$i} 2.5s ease-in-out infinite);
@if($i == 1) {
@include animation-delay(0s);
}
@else {
@include animation-delay(randomNum(1s,3s));
}
}
/**keyframes **/
@include keyframes(anim-#{$i}) {
0%{left:0;top:0}
50% { left:nth($left-collection, $i+1);top:nth($top-collection, $i)}
100%{left:0;top:0}
}
} //end of collection loop
&:hover {
cursor:default;
}
} //end of div
} //end of glowby-blob
span {
color:$color3;
opacity: 0.5;
font-size: 24px;
font-family:'Chewy';
font-weight: bolder;
text-transform: uppercase;
letter-spacing:1px;
position: absolute;
left:50%;
top:30%;
@include transform(translate(-50,-50));
-webkit-touch-callout: none; /* iOS Safari */
@include user-select(none);
&:hover {
cursor:default;
}
}
@include keyframes(huerot) {
0%{@include filter(hue-rotate(0deg));}
100%{@include filter(hue-rotate(360deg));}
}
@include keyframes(bounceback) {
100%{left:0;top:0}
}
View Compiled
var doms = document.getElementsByClassName("glowy-blob");
var selected = 0;
for(var x =0;x<doms.length;x++) {
for(var i = 0;i<doms[x].children.length;i++) {
doms[x].children[i].addEventListener("mousedown", function(e){
selected = this;
})
}
}
window.addEventListener("mouseup", function(e){
selected.style.animation = "bounceback 1s ease";
selected.style.animationFillMode = "forwards";
var lala = selected;
selected = null;
setTimeout(function() {
lala.style.animation = "";
lala.style.animationFillMode = "";
lala.style.left = "";
lala.style.top = "";
},1000)
})
window.addEventListener("mousemove", function(e) {
if(selected == null || !selected) return;
selected.style.left = (e.clientX - (selected.getBoundingClientRect().width/2) - window.innerWidth/2) +"px"
selected.style.top = (e.clientY - (selected.getBoundingClientRect().height/2) - window.innerHeight/2 ) +"px"
selected.style.animation = 0;
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.