Javascript ile Ripple (Dalgalanma) Efekti Oluşturma

Javascript ile Ripple (Dalgalanma) Efekti Oluşturma - Blog ve web sitelerinde trend olmuş ripple efekti, sayfada bulunan menü ve bağlantı butonlarına tıklama hassasiyeti veren dalgalanma efektidir.

Ripple efekti, CSS ve Javascipt kodları ile yapılması mümkün, ancak blog sitelerinde ne kadar fazla javascript komut dosyası çalışırsa blog sayfalarının da yüklenme süresi o kadar artar ve sorgu sayısında artışlara neden olur. Bu sorgu sayılarını en aza indirmek için saf (ham) javascript kullanmak en doğru yol olacaktır.

Bu yazımızda paylaşmış olduğumuz ripple efekti css ve saf (ham) javascript dosyası ile oluşturulmuştur. Blog sitenize eklediğinizde herhangi bir javascript komut dosyasına ihtiyaç duymadan kullanabilirsiniz. Böylece hem sayfa yüklenme süresine etki etmemiş olursunuz hem de sayfa sorgu sayısını artırmamış olursunuz. Diğer bir faydası da sayfa bağlantısına tıkladığınız zaman sayfa yüklenmeye başladığında herhangi bir komut dosyasına ihtiyaç olmadığı için her zaman hazır durumdadır.

Blog Sitesine Ripple Efekti Nasıl Eklenir?

Blog sitenize ripple efekti eklemek için aşağıdaki adımları takip edin.

Aşağıdaki CSS kodlarını blog sitenizin tema editör sayfasında bulunan <style> dosyası içerisine ekleyin.

CSS

 [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)
    }
}

Aşağıdaki javascript kodunu tema editör sayfasında bulunan </body> kodunun bir satır üzerine ekleyin.

Javascript

<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>

Ripple efekti eklemek istediğiniz menü veya bağlantılarınızın HTML içerisine aşağıdaki kodu ekleyin.

Ripple HTML Konum Kodu

ripple="ripple"

HTML ripple kodu menü ve bağlantı HTML kodları içerisine nasıl ekleyeceğinizi öğrenmek için aşağıdaki HTML örnek kodu inceleyin.

Örnek Kodlama

<button href="#" class="button" ripple="ripple">button</button>
<br>
<a href="#" class="link" ripple="ripple">bağlantı</a>
<br>
<span href="#" ripple="ripple">başlık</span>
<br>
<icon class="icon" ripple="ripple">icon</icon>

Ripple efekti uygulamasını daha detaylı incelemek için aşağıdaki ön izleme butonuna tıklayın.

Ön İzleme

Blog sitelerinin tasarımlarını geliştirmek için faydalı bilgiler ve ekletileri paylaşmaya devam edeceğiz. Gerçekten bugün sizinle paylaşmış olduğum CSS3 ve saf (ham) javascript kodları ile oluşturulmuş ripple efekti blog sitenize harika bir görünüm kazandıracaktır.

Javascript ile Kaydırma Göstergesi Nasıl Oluşturulur?

Ripple efekti ile ilgili daha fazla bilgi almak ve görüşlerinizi bizimle paylaşmak için yorum bırakabilirsiniz.