Selamlar aşağıda mause tıklandığında dalgalanma efekti veren kod var ama sitesinde çalışıyor fakat eksik mi var hata mı bilemiyorum lakin çalışmıyor, düzenleyebilecek arkadaş varmı ?
Ripple Efekt, Google Material Design
<style type="text/css">
html {
display:table;
height:100%;
}
.dalgalanma {
position: relative;
overflow: hidden;
-webkit-transform: translateundefined0);
}
.efekt {
display: block;
position: absolute;
pointer-events: none;
border-radius: 50%;
transform: scaleundefined0);
z-index:9999;
background: rgbaundefined52, 152, 219,.7);
opacity: 1;
}
.efekt.oynat {
-webkit-animation: dalgalanma 2s cubic-bezierundefined0.165, 0.85, 0.45, 1);
-o-animation: dalgalanma 2s cubic-bezierundefined0.165, 0.85, 0.45, 1);
animation: dalgalanma 2s cubic-bezierundefined0.165, 0.85, 0.45, 1);
}
@keyframes dalgalanma {
100% {
opacity: 0;
-webkit-transform: scaleundefined2);
-ms-transform: scaleundefined2);
-o-transform: scaleundefined2);
transform: scaleundefined2);
}
}
@-webkit-keyframes dalgalanma {
100% {
opacity: 0;
-webkit-transform: scaleundefined2);
-ms-transform: scaleundefined2);
-o-transform: scaleundefined2);
transform: scaleundefined2);
}
}
@-moz-keyframes dalgalanma {
100% {
opacity: 0;
-webkit-transform: scaleundefined2);
-ms-transform: scaleundefined2);
-o-transform: scaleundefined2);
transform: scaleundefined2);
}
}
@-ms-keyframes dalgalanma {
100% {
opacity: 0;
-webkit-transform: scaleundefined2);
-ms-transform: scaleundefined2);
-o-transform: scaleundefined2);
transform: scaleundefined2);
}
}
@-o-keyframes dalgalanma {
100% {
opacity: 0;
-webkit-transform: scaleundefined2);
-ms-transform: scaleundefined2);
-o-transform: scaleundefined2);
transform: scaleundefined2);
}
}
</style>
<script type="text/javascript">
$("div.blog-item-wrap").click(function(e){
var ripple = $(this);
if(ripple.find(".efekt").length == 0) {
ripple.append("<span class='efekt'></span>");
}
var efekt = ripple.find(".efekt");
efekt.removeClass("oynat");
if(!efekt.height() && !efekt.width())
{
var d = Math.max(ripple.outerWidth(), ripple.outerHeight());
efekt.css({height: 150, width: 150});
}
var x = e.pageX - ripple.offset().left - efekt.width()/2;
var y = e.pageY - ripple.offset().top - efekt.height()/2;
efekt.css({
top: y+'px',
left:x+'px'
}).addClass("oynat");
})
</script>