LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
 
HEYYY CLICK ME!

Some ripple?
CSS
html {
  background: #1a1a1a;
  color: #fff;
}

.b1 {
  background: #666;
  padding: 40px;
  margin: 40px;
  display: inline-block;
  cursor: pointer;
}
JS
// TODO
// more configuration options (overflow)
// centering the ripple through configuration
// speed choices ('slow', 'fast')
// different ripple configurations for different .classes
// factory

const config = {
  selector: '.ripple', // string | jquery element
  opacity: 0.4, // float < 1
  speed: 'auto', // 'auto' | integer
  background: '#fff', // string
  triggers: 'click' // string
};

const elementsCss = {
  ripple: {
    overflow: 'hidden',
    position: 'relative',
  },

  rippleElement: {
    display: 'block',
    position: 'absolute',
    borderRadius: '50%',
    userSelect: 'none',
    pointerEvents: 'none',
    touchEvents: 'none',
    padding: 0,
    margin: 0,
    transform: 'translate3d(-50%, -50%, 0)',
    backfaceVisibility: 'hidden',
    willChange: 'transform, opacity'
  }
};

$(document).on(config.triggers, config.selector, function(e) {
  let $rippleElement = $(''),
    $buttonElement = $(this),
    btnOffset = $buttonElement.offset(),
    xPos = e.pageX - btnOffset.left,
    yPos = e.pageY - btnOffset.top,
    size = 10,
    animateSize = parseInt(Math.max($buttonElement.width(), $buttonElement.height()) * Math.PI);

  let _speed = config.speed;
  if (config.speed == 'auto') {
    _speed = (animateSize - size) * 1.3;
  }

  let _animationFunction = 'animate';
  if ($rippleElement.velocity) {
    _animationFunction = 'velocity';
  }

  $buttonElement.css(elementsCss.ripple);

  $rippleElement
    .css(elementsCss.rippleElement)
    .css({
      top: yPos,
      left: xPos,
      width: size,
      height: size,

      opacity: config.opacity,
      background: $buttonElement.data("ripple-color") || config.background
    })
    .appendTo($buttonElement)[_animationFunction]({
      width: animateSize,
      height: animateSize,
      opacity: 0
    }, _speed, function() {
      $(this).remove();
    });
});
Tue, 12/26/2017 - 13:06

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv