Merhabalar,

Bu yazımda çoğunlukla Android cihazlarda veya Google'ın Material tasarımına dayalı 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, sadece HTML, CSS ve JavaScript ile bu efekti sıfırdan oluşturacağız.

Öncelikle HTML tarafında bir button ya da a etiketi oluşturalım:

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

Butonları oluşturduktan sonra, bu elementlere güzel bir görünüm kazandırmak için CSS kodlarını ekleyelim:

.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;
}

@keyframes buyut {
  to {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

Burada .daire sınıfına sahip bir span etiketi kullandık. Bu elementi HTML içine doğrudan koymadık, çünkü onu JavaScript ile tıklama anında dinamik olarak oluşturacağız.

Şimdi gelelim JavaScript bölümüne:

const dalga = document.querySelectorAll('.dalga');

dalga.forEach(d => {
  d.addEventListener('click', function(e) {
    let x = e.clientX;
    let y = e.clientY;

    let ustDalga = e.target.offsetTop;
    let solDalga = e.target.offsetLeft;

    let xInside = x - solDalga;
    let yInside = y - ustDalga;

    let daire = document.createElement('span');
    daire.classList.add('daire');
    daire.style.top = yInside + 'px';
    daire.style.left = xInside + 'px';
    this.appendChild(daire);

    setTimeout(() => {
      daire.remove();
    }, 600);
  });
});

Bu JavaScript kodu sayesinde, butona tıklanan yere bir span ekleniyor ve CSS animasyonu ile genişleyerek yok oluyor.

Bu yöntem, sitenizdeki tıklamalara hoş bir etki katabilir. Umarım bir gün işinize yarar. Mutlu Kodlamalar :)