229 lines
8.6 KiB
JavaScript
229 lines
8.6 KiB
JavaScript
|
/*
|
||
|
|
slick-animation.js
|
||
|
|
Version: 0.3.3 Beta
|
||
|
|
Author: Marvin Hübner
|
||
|
|
Docs: https://github.com/marvinhuebner/slick-animation
|
||
|
|
Repo: https://github.com/marvinhuebner/slick-animation
|
||
|
|
*/
|
||
|
|
|
||
|
|
(function ($) {
|
||
|
|
$.fn.slickAnimation = function () {
|
||
|
|
var currentSlickSlider = $(this);
|
||
|
|
|
||
|
|
var slickItems = currentSlickSlider.find('.slick-list .slick-track > div');
|
||
|
|
var firstSlickItem = currentSlickSlider.find('[data-slick-index="0"]');
|
||
|
|
|
||
|
|
var animatedClass = 'animated';
|
||
|
|
var visible = {opacity: '1'};
|
||
|
|
var hidden = {opacity: '0'};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* function for setting animationIn and animationOut class
|
||
|
|
* @param obj
|
||
|
|
* @param type
|
||
|
|
* @param animationIn
|
||
|
|
* @param animatedClass
|
||
|
|
* @param visibility
|
||
|
|
*/
|
||
|
|
|
||
|
|
function slickSetAnimationDefault(obj, type, animationIn, animatedClass, visibility) {
|
||
|
|
visibility = typeof visibility !== 'undefined' ? visibility : false;
|
||
|
|
|
||
|
|
slickRemoveAnimation(obj, 'delay');
|
||
|
|
slickRemoveAnimation(obj, 'duration');
|
||
|
|
|
||
|
|
if (type['opacity'] == 1) {
|
||
|
|
obj.addClass(animationIn);
|
||
|
|
obj.addClass(animatedClass);
|
||
|
|
} else {
|
||
|
|
obj.removeClass(animationIn);
|
||
|
|
obj.removeClass(animatedClass);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (visibility) obj.css(type);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* get timeout when delay, duration, delay and duration is set
|
||
|
|
* @param delayIn
|
||
|
|
* @param durationIn
|
||
|
|
* @returns {number}
|
||
|
|
*/
|
||
|
|
|
||
|
|
function getTimeout(delayIn, durationIn) {
|
||
|
|
if (delayIn) {
|
||
|
|
return delayIn * 1000 + 1000;
|
||
|
|
|
||
|
|
} else if (durationIn) {
|
||
|
|
return durationIn * 1000;
|
||
|
|
|
||
|
|
} else if ((delayIn) || (durationIn)) {
|
||
|
|
return (delayIn * 1000) + (durationIn * 1000);
|
||
|
|
}
|
||
|
|
return 1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* add css animations for delay and duration
|
||
|
|
* @param obj
|
||
|
|
* @param animation
|
||
|
|
* @param value
|
||
|
|
*/
|
||
|
|
function slickAddAnimation(obj, animation, value) {
|
||
|
|
var delayInAttr = [
|
||
|
|
'animation-' + animation,
|
||
|
|
'-webkit-animation-' + animation,
|
||
|
|
'-moz-animation-' + animation,
|
||
|
|
'-o-animation-' + animation,
|
||
|
|
'-ms-animation-' + animation
|
||
|
|
];
|
||
|
|
var delayInAttributes = {};
|
||
|
|
delayInAttr.forEach(function (entry) {
|
||
|
|
|
||
|
|
delayInAttributes[entry] = value + 's';
|
||
|
|
});
|
||
|
|
obj.css(delayInAttributes);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* remove css animations for delay and duration
|
||
|
|
* @param obj
|
||
|
|
* @param animation
|
||
|
|
*/
|
||
|
|
function slickRemoveAnimation(obj, animation) {
|
||
|
|
var delayInAttr = [
|
||
|
|
'animation-' + animation,
|
||
|
|
'-webkit-animation-' + animation,
|
||
|
|
'-moz-animation-' + animation,
|
||
|
|
'-o-animation-' + animation,
|
||
|
|
'-ms-animation-' + animation
|
||
|
|
];
|
||
|
|
var delayInAttributes = {};
|
||
|
|
delayInAttr.forEach(function (entry) {
|
||
|
|
|
||
|
|
delayInAttributes[entry] = '';
|
||
|
|
});
|
||
|
|
obj.css(delayInAttributes);
|
||
|
|
}
|
||
|
|
|
||
|
|
slickItems.each(function () {
|
||
|
|
var slickItem = $(this);
|
||
|
|
|
||
|
|
slickItem.find('[data-animation-in]').each(function () {
|
||
|
|
var self = $(this);
|
||
|
|
|
||
|
|
self.css(hidden);
|
||
|
|
|
||
|
|
var animationIn = self.attr('data-animation-in');
|
||
|
|
var animationOut = self.attr('data-animation-out');
|
||
|
|
var delayIn = self.attr('data-delay-in');
|
||
|
|
var durationIn = self.attr('data-duration-in');
|
||
|
|
var delayOut = self.attr('data-delay-out');
|
||
|
|
var durationOut = self.attr('data-duration-out');
|
||
|
|
|
||
|
|
if (animationOut) {
|
||
|
|
if (firstSlickItem.length > 0) {
|
||
|
|
if (slickItem.hasClass('slick-current')) {
|
||
|
|
|
||
|
|
slickSetAnimationDefault(self, visible, animationIn, animatedClass, true);
|
||
|
|
|
||
|
|
if (delayIn) {
|
||
|
|
slickAddAnimation(self, 'delay', delayIn);
|
||
|
|
}
|
||
|
|
if (durationIn) {
|
||
|
|
slickAddAnimation(self, 'duration', durationIn);
|
||
|
|
}
|
||
|
|
|
||
|
|
setTimeout(function () {
|
||
|
|
slickSetAnimationDefault(self, hidden, animationIn, animatedClass);
|
||
|
|
slickSetAnimationDefault(self, visible, animationOut, animatedClass);
|
||
|
|
if (delayOut) {
|
||
|
|
slickAddAnimation(self, 'delay', delayOut);
|
||
|
|
}
|
||
|
|
if (durationOut) {
|
||
|
|
slickAddAnimation(self, 'duration', durationOut);
|
||
|
|
}
|
||
|
|
setTimeout(function() {
|
||
|
|
slickRemoveAnimation(self, 'delay');
|
||
|
|
slickRemoveAnimation(self, 'duration');
|
||
|
|
}, getTimeout(delayOut, durationOut));
|
||
|
|
|
||
|
|
}, getTimeout(delayIn, durationIn));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
currentSlickSlider.on('afterChange', function (event, slick, currentSlider) {
|
||
|
|
if (slickItem.hasClass('slick-current')) {
|
||
|
|
|
||
|
|
slickSetAnimationDefault(self, visible, animationIn, animatedClass, true);
|
||
|
|
|
||
|
|
if (delayIn) {
|
||
|
|
slickAddAnimation(self, 'delay', delayIn);
|
||
|
|
}
|
||
|
|
if (durationIn) {
|
||
|
|
slickAddAnimation(self, 'duration', durationIn);
|
||
|
|
}
|
||
|
|
|
||
|
|
setTimeout(function () {
|
||
|
|
slickSetAnimationDefault(self, hidden, animationIn, animatedClass);
|
||
|
|
slickSetAnimationDefault(self, visible, animationOut, animatedClass);
|
||
|
|
|
||
|
|
if (delayOut) {
|
||
|
|
slickAddAnimation(self, 'delay', delayOut);
|
||
|
|
}
|
||
|
|
if (durationOut) {
|
||
|
|
slickAddAnimation(self, 'duration', durationOut);
|
||
|
|
}
|
||
|
|
setTimeout(function() {
|
||
|
|
slickRemoveAnimation(self, 'delay');
|
||
|
|
slickRemoveAnimation(self, 'duration');
|
||
|
|
}, getTimeout(delayOut, durationOut));
|
||
|
|
|
||
|
|
}, getTimeout(delayIn, durationIn));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
currentSlickSlider.on('beforeChange', function (event, slick, currentSlider) {
|
||
|
|
slickSetAnimationDefault(self, hidden, animationOut, animatedClass, true);
|
||
|
|
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
|
||
|
|
if (firstSlickItem.length > 0) {
|
||
|
|
if (slickItem.hasClass('slick-current')) {
|
||
|
|
slickSetAnimationDefault(self, visible, animationIn, animatedClass, true);
|
||
|
|
|
||
|
|
if (delayIn) {
|
||
|
|
slickAddAnimation(self, 'delay', delayIn);
|
||
|
|
}
|
||
|
|
if (durationIn) {
|
||
|
|
slickAddAnimation(self, 'duration', durationIn);
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
currentSlickSlider.on('afterChange', function (event, slick, currentSlider) {
|
||
|
|
if (slickItem.hasClass('slick-current')) {
|
||
|
|
slickSetAnimationDefault(self, visible, animationIn, animatedClass, true);
|
||
|
|
|
||
|
|
if (delayIn) {
|
||
|
|
slickAddAnimation(self, 'delay', delayIn);
|
||
|
|
}
|
||
|
|
if (durationIn) {
|
||
|
|
slickAddAnimation(self, 'duration', durationIn);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
currentSlickSlider.on('beforeChange', function (event, slick, currentSlider) {
|
||
|
|
slickSetAnimationDefault(self, hidden, animationIn, animatedClass, true);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
})(jQuery);
|