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 🙂
