57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
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 buttons = document.getElementsByClassName(target);
|
|
for (var i = 0; i < buttons.length; i++) {
|
|
button = buttons[i];
|
|
// console.log(button);
|
|
button.addEventListener('mouseover', function(event) {
|
|
rippleAnimation.call(this, event, timing);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
})();
|
|
|
|
ripplyScott.init('js-ripple-btn', 0.75);
|