Javascript Ripple Dalga Efekti

<!DOCTYPE html>
<html>
<head>
<title>Ripple Dalga Efekti</title>
<style>
body {
    font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
    text-align: center;
}
 a{
    color:#fff;
    text-decoration:none
}
 h1 {
    font-size:1.5em
}
 .button {
     font-weight: 500;
     color: #fff;
     width: 80px;
     padding: 0.8em 1em;
     margin: 1em 0;
     border: none;
     outline: none;
     cursor: pointer;
     text-align: center;
}
 .button.red{
    background:#F44336;
}
 .button.green{
    background:#4CAF50
}
 .button.black{
    background:#444
}
 .container{
    margin:auto;
    text-align:center
}
 [ripple]{
    position:relative;
    overflow:hidden
}
 [ripple] .ripple--container{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0
}
 [ripple] .ripple--container span{
    background:#fff;
    transform:scale(0);
    border-radius:100%;
    position:absolute;
    opacity:0.75;
    animation:ripple 1000ms
}
 @-moz-keyframes ripple{
    to{
        opacity:0;
        transform:scale(2)
    }
}
 @-webkit-keyframes ripple{
    to{
        opacity:0;
        transform:scale(2)
    }
}
 @-o-keyframes ripple{
    to{
        opacity:0;
        transform:scale(2)
    }
}
 @keyframes ripple{
    to{
        opacity:0;
        transform:scale(2)
    }
}
</style>
</head>
<body>
<h1>Ripple Dalga Efekti</h1>
<div class="container">
<button class="button red" href="#" ripple='ripple'>Buton 1</button>
<button class="button green" href="#" ripple='ripple'>Buton 2</button>
<button class="button black" href="#" ripple='ripple'>Buton 3</button>
</div>
<script>
//<![CDATA[
(function() {
    var cleanUp, debounce, i, len, ripple, rippleContainer, ripples, showRipple;
    debounce = function(func, delay) {
        var inDebounce;
        inDebounce = undefined;
        return function() {
            var args, context;
            context = this;
            args = arguments;
            clearTimeout(inDebounce);
            return inDebounce = setTimeout(function() {
                return func.apply(context, args);
            }, delay);
        };
    };
    showRipple = function(e) {
        var pos, ripple, rippler, size, style, x, y;
        ripple = this;
        rippler = document.createElement('span');
        size = ripple.offsetWidth;
        pos = ripple.getBoundingClientRect();
        x = e.pageX - pos.left - (size / 2);
        y = e.pageY - pos.top - (size / 2);
        style = 'top:' + y + 'px; left: ' + x + 'px; height: ' + size + 'px; width: ' + size + 'px;';
        ripple.rippleContainer.appendChild(rippler);
        return rippler.setAttribute('style', style);
    };
    cleanUp = function() {
        while (this.rippleContainer.firstChild) {
            this.rippleContainer.removeChild(this.rippleContainer.firstChild);
        }
    };
    ripples = document.querySelectorAll('[ripple]');
    for (i = 0, len = ripples.length; i < len; i++) {
        ripple = ripples[i];
        rippleContainer = document.createElement('div');
        rippleContainer.className = 'ripple--container';
        ripple.addEventListener('mousedown', showRipple);
        ripple.addEventListener('mouseup', debounce(cleanUp, 2000));
        ripple.rippleContainer = rippleContainer;
        ripple.appendChild(rippleContainer);
    }
}());
//]]>
</script>
</body>
</html>

Kodeks Editör

Javascript Ripple Dalga Efekti

"Javascript Ripple Dalga Efekti" 0 Yorum yapıldı.

Yorum Gönder

Kodeks Editör

İletişim Formu

Javascript Ripple Dalga Efekti

"Javascript Ripple Dalga Efekti" 0 Yorum yapıldı.

Yorum Gönder