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
CSS – ::selection – Seçili Metin
Devamını Oku

::selection – Seçili Metin

::selection sözde seçicisi ile mouse sol tuşuyla tıklanıp basılı tutarak seçilen metinlere nasıl stil verilebileceği anlatılmıştır. Söz dizimi ve nasıl yapılmasıyla ile ilgili detaylara yazımdan ulaşabilirsiniz

Devamını Oku

CSS object-fit Kullanımı
Devamını Oku

object-fit Kullanımı

Css' de oldukça işe yarayan object-fit özelliği bir medya öğesinin verilen yüksekliğine ve genişliğine göre nasıl tepki vereceğini tanımlar. Detaylar için yazımı inceleyebilirsiniz.

Devamını Oku