Based off of googles Material design a small code snippet to allow you to put the ripple effect on any element with the ability to specify a color or just use the default.
A Pen by Tyler Benton on CodePen.
<div class="box" data-ripple></div> | |
<div class="box" data-ripple="#C82754" data-ripple-wipe></div> |
Based off of googles Material design a small code snippet to allow you to put the ripple effect on any element with the ability to specify a color or just use the default.
A Pen by Tyler Benton on CodePen.
/*$(document).ready(function(){ | |
$("[data-ripple]").on("click", function(e){ | |
var $obj = $(this), | |
bg = $obj.attr("data-ripple") ? "background: " + $obj.attr("data-ripple") + ";": "", | |
x = ~~(e.pageX - $obj.offset().left - 200), | |
y = ~~(e.pageY - $obj.offset().top - 200); | |
$obj.find(".ripple").remove(); | |
$obj.append("<div class='ripple' style='" + bg + "top: " + y + "px; left: " + x + "px;'></div>"); | |
}); | |
});*/ | |
// pure js | |
(function(){ | |
var rippleContainer = document.querySelectorAll("[data-ripple]"), | |
isTouch = (("ontouchstart" in window) || (window.DocumentTouch && document instanceof DocumentTouch) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)), | |
pointers, | |
touch = { | |
start: "touchstart", | |
move: "touchmove", | |
end: "touchend" | |
}, | |
mouse = { | |
start: "mousedown", | |
move: "mousemove", | |
end: "mouseup" | |
}, | |
pointer = isTouch ? touch : mouse; | |
for(var i = 0; i < rippleContainer.length; i++){ | |
rippleContainer[i].addEventListener(pointer.start, startEvent, false); | |
rippleContainer[i].addEventListener(pointer.end, endEvent, false); | |
} | |
function startEvent(e){ | |
var obj = this, | |
bg = obj.getAttribute("data-ripple"), | |
pageX = isTouch ? e.touches[0].pageX : e.pageX, | |
pageY = isTouch ? e.touches[0].pageY : e.pageY, | |
x = ~~(pageX - obj.offsetLeft - 25), | |
y = ~~(pageY - obj.offsetTop - 25), | |
ripple = document.createElement("div"); | |
ripple.classList.add("ripple"); | |
ripple.style.top = y + "px"; | |
ripple.style.left = x + "px"; | |
if(bg) ripple.style.background = bg; | |
obj.appendChild(ripple); | |
} | |
function endEvent(e){ | |
var ripple = this.querySelectorAll(".ripple"); | |
for(var i = 0; i < ripple.length; i++){ | |
ripple[i].classList.add("animate"); | |
setTimeout(function(){ | |
ripple[i].parentNode.removeChild(ripple[i]); | |
}, 2000); | |
} | |
} | |
})(); |
@import "compass/css3"; | |
*{ | |
box-sizing: border-box; | |
&:before, &:after{ | |
box-sizing: inherit; | |
} | |
} | |
html, body{ | |
background-color: #e2e2e2; | |
display: flex; | |
flex-flow: row wrap; | |
align-items: center; | |
justify-content: center; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
} | |
.box{ | |
background: #585555; | |
border-radius: 20px; | |
height: 200px; | |
margin: 20px; | |
width: 200px; | |
} | |
[data-ripple]{ | |
overflow: hidden; | |
position: relative; | |
transform-style: preserve-3d; | |
.ripple{ | |
background-color: #fff; | |
border-radius: 100%; | |
height: 50px; | |
opacity: .5; | |
position: absolute; | |
transform: scale(1); | |
width: 50px; | |
&.animate{ | |
animation: ripple .75s ease-in; | |
animation-fill-mode: forwards; | |
} | |
} | |
&[data-ripple-wipe] .ripple.animate{ | |
animation: ripple-wipe .75s ease-in; | |
animation-fill-mode: forwards; | |
opacity: 1; | |
} | |
} | |
@keyframes ripple{ | |
100%{ | |
opacity: 0; | |
transform: scale(50); | |
} | |
} | |
@keyframes ripple-wipe{ | |
100%{ | |
transform: scale(50); | |
} | |
} |