How can I add this Ripple Click Effect?
#1
How can I add this: https://codepen.io/thulstrup/pen/OVROEm

To buttons on my theme. I've tried adding the js to headerinclude, the css to global.css then naming the divs etc but I don't think I'm doing it right.
[Image: logo.png]
Reply
#2
(2018-03-12, 01:26 AM)Kioshi Wrote: ¿Cómo puedo agregar esto ?: https://codepen.io/thulstrup/pen/OVROEm

A los botones de mi tema. He intentado agregar js a headerinclude, css a global.css y luego nombrar los divs, etc., pero no creo que lo esté haciendo bien.

en el js agrega 
var links = document.querySelectorAll('body');

for (var i = 0, len = links.length; i < len; i++) {
  links[i].addEventListener('click', function(e) {
    var targetEl = e.target;
    var inkEl = targetEl.querySelector('.ink');

    if (inkEl) {
      inkEl.classList.remove('animate');
    }
    else {
      inkEl = document.createElement('span');
      inkEl.classList.add('ink');
      inkEl.style.width = inkEl.style.height = Math.max(targetEl.offsetWidth, targetEl.offsetHeight) + 'px';
      targetEl.appendChild(inkEl);
    }

    inkEl.style.left = (e.offsetX - inkEl.offsetWidth / 2) + 'px';
    inkEl.style.top = (e.offsetY - inkEl.offsetHeight / 2) + 'px';
    inkEl.classList.add('animate');
  }, false);
}

revisa haber si te funciona....
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)