Water Drops/Click Detection w/animation
An animated click detector. Think of waterdroplets.
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="stage">
<div class="title">Click Something- <br/>
Walking in the rain
It will never be the same</div>
</div>
CSS
.title {
font-family:cursive;
padding:20px;
font-size:25px;
color:white;
}
.drop {
height:10px;
width:10px;
background: #6BB9F0;
border-radius:50%;
position:absolute;
background: radial-gradient(circle at center, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C */
}
.stage {
/* margin:50px; */
width:100%;
height:100%;
display:block;
position:absolute;
}
JavaScript
//create droplets
$('.stage').click(function (e) { //Default mouse Position
// alert(e.pageX + ' , ' + e.pageY);
var parentOffset = $(this).parent().offset();
var clickHorz = 100;
var clickVert = 100;
$('<div class="drop justAdded"></div>').appendTo(this).css({"left": clickHorz + "px", "top": clickVert +"px" }).animate({
'width':'100px',
'height':'100px',
opacity: "0",
marginLeft:"-46px",
marginTop:"-46px"
}, 4000,'easeOutCubic', function(){
$('.justAdded').removeClass('justAdded')
} );
});