Butona Dalga Efekti Verme

Butona Dalga Efekti Verme
Butona Dalga Efekti Verme
Çoğunlukla android cihazlarda veya materializecss.com üzerinde görebileceğiniz butona tıklandığında oluşan dalga efektinden bahsettim. Merak edenler için yazının devamını okuyabilirsiniz.

Merhabalar,

Bu yazımda çoğunlukla android cihazlarda veya Google material tasarımı üzerine gelişmiş olan materializecss.com css kütüphanesinde görebileceğiniz butona tıklandığında oluşan dalga efektinden bahsedeceğim.

Biz hazır bir kütüphane kullanmadan Html, Css ve Javascript kullanarak baştan bir efekt oluşturacağız. Onun için Html de kısa bir buton veya link verme elemanı olan a etiketini oluşturabiliriz.

<button class="dalga">DALGA EFEKTi</button>
<a href="#" class="dalga">DALGA EFEKTİ</a> 

Html kısmında sadece butonumuzu oluşturmak yeterli. Tabi bu butonlara biraz güzel bir görünüm sağlamamız gerekiyor. Bunun için biraz Css kodu ekleyelim.

/* Butonlar */
.dalga{color: #fff;border: 1px solid #333;background-color: #333;cursor:pointer;font-size: 14px;padding: 20px 30px;line-height:17px;text-decoration:none;position: relative;overflow: hidden;}
.dalga .daire {position: absolute;border-radius: 50%;background-color: #fff;width: 100px;height: 100px;transform: translate(-50%, -50%) scale(0);animation: buyut 0.6s ease-out;}

/* Eklenen daireye verilen animasyon */
@keyframes buyut {
    to {
        transform: translate(-50%, -50%) scale(4);opacity: 0;
    }
} 

Css kısmında da kısa bir işlemimiz bulunuyor. Burada dikkatinizi çeken .daire class’ı olabilir çünkü Html tarafında böyle bir class’a sahip olan element yok. Bu daire class’ına sahip span elementini Javascript tarafında oluşturacağız.

Onun dışında da @keyframes ile bir büyütme animasyonu oluşturduk ki sonradan içine ekleyeceğimiz daire animasyonlu bir şekilde büyüyüp butonu kapsayabilsin.

Şimdi gelelim tüm tıklama, element oluşturma ve mouse ile nereye tıkladığımızı seçebileceğimiz kodları yazacağımız Javascript bölümüne ;

const dalga = document.querySelectorAll('.dalga'); // dalga classına sahip tüm elemenlter

dalga.forEach(d => { //dalga classına sahip elementelerin hepsine uygulanacak şekilde döngü
	d.addEventListener('click', function(e) { // tıklama eventi
        // ilk adım
		let x = e.clientX; // Yatay koordinatı alın
		let y = e.clientY; // Dikey koordinatı alın

        // ikinci adım
		let ustDalga = e.target.offsetTop; // Yukarıdan uzaklığı
		let solDalga = e.target.offsetLeft; // Soldan uzaklığı

        // son adım
		let xInside = x - solDalga; // İçeriden koordinat hesaplaması
		let yInside = y - ustDalga; // İçeriden koordinat hesaplaması

        let daire = document.createElement('span'); // span oluştur
        daire.classList.add('daire'); // daire classını oluşturulan spana ata
        daire.style.top = yInside + 'px'; // yukarıdan seçtiğimiz kadar boşluk
        daire.style.left = xInside + 'px'; // soldan seçtiğimiz kadar boşluk

        this.appendChild(daire); // dalga class elementinin içerisine daireyi yerleştir

        setTimeout(() => {
            daire.remove();
        }, 600); // 600 ms süre sonra eklenen daire spanını kaldır
	});
}); 

Javascript aşaması yukarıdaki gibi oluşmuş olacaktır. Yazılan her işlemde ne yapıldığını satırın sonunda özetlemeye çalıştım. Anlayamadığınız bölüm olursa yorumlarda belirtebilirsiniz. 

Şimdi canlı olarak test edebilmeniz için codepen bağlantısını da aşağıya bırakıyorum.

See the Pen
Dalga Efekti
by furkangiray.com (@furkangiray_com)
on CodePen.

Bir çok farklı yöntem ile bu efekte ulaşabilirsiniz. Ben uzun süredir sabit olarak kullandığım bu yöntemden sizlere bahsetmek istedim. Sitenizdeki tıklamalara oldukça hoş bir estetiklik kattığını düşünüyorum. Umarım bir gün işinize yarar.

Mutlu Kodlamalar 🙂

0 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
Javascript - Kar Yağışı
Devamını Oku

Kar Yağışı Efekti

Web sayfanıza ekleyebileceğiniz Javascript ve Css animasyonları ile kar yağışı efekti uygulanmıştır. Nasıl yapıldığını merak ediyorsanız yazımı detaylı inceleyebilirsiniz..

Devamını Oku

Görseli Yuvarlak Yapma
Devamını Oku

Görseli Yuvarlak Yapma

Bu yazımda img etiketiyle eklenen bir görseli Css özelliği border-radius ile nasıl yuvarlak yapabiliriz bu konudan bahsettim. Detaylar için yazımın devamını okuyabilirsiniz.

Devamını Oku