ОБСУЖДЕНИЕ

"Разделить" функцию

1 сообщений1 просмотровОткрыта
#1
Всем привет!
Решил заняться написанием дизайна в стиле Material....
Так вот - Все сделал, все отлично, но эффект "волны" кривовато работает. Волновой эффект - как в Android 5.0 при нажатии - образуется волна, так вот суть в том что нажимая на кнопку, активируются сразу все и я не знаю как разделить их по-отдельности...
js:
PHP
var ripplyScott = (function() {
  var circle = document.getElementById('js-ripple'),
      ripple = document.querySelectorAll('.js-ripple');

  function rippleAnimation(event, timing) {
    var tl           = new TimelineMax();
        x            = event.offsetX,
        y            = event.offsetY,
        w            = event.target.offsetWidth,
        h            = event.target.offsetHeight,
        offsetX      = Math.abs( (w / 2) - x ),
        offsetY      = Math.abs( (h / 2) - y ),
        deltaX       = (w / 2) + offsetX,
        deltaY       = (h / 2) + offsetY,
        scale_ratio  = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));

    console.log('x is:' + x);
    console.log('y is:' + y);
    console.log('offsetX is:' + offsetX);
    console.log('offsetY is:' + offsetY);
    console.log('deltaX is:' + deltaX);
    console.log('deltaY is:' + deltaY);
    console.log('width is:' + w);
    console.log('height is:' + h);
    console.log('scale ratio is:' + scale_ratio);

    tl.fromTo(ripple, timing, {
      x: x,
      y: y,
      transformOrigin: '50% 50%',
      scale: 0,
      opacity: 1,
      ease: Linear.easeIn
    },{
      scale: scale_ratio,
      opacity: 0
    });

    return tl;
  }

  return {
    init: function(target, timing) {
      var button = document.getElementById(target);

      button.addEventListener('click', function(event) {
        rippleAnimation.call(this, event, timing);
      });
    }
  };
})();

ripplyScott.init('js', 0.75);
ripplyScott.init('js1', 0.75);
ripplyScott.init('js2', 0.75);
ripplyScott.init('js3', 0.75);

в конце я пытался их разделить, но не получилось.
Прошу помощи! Спасибо!