ducdt/Homepage_PC_Xanh_2021
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upload

Browse Source
This commit is contained in:
ducdt
2021-03-24 10:47:36 +07:00
commit 920706d3b5
74 changed files with 14206 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
js/slickanimation.js Normal file
View File

@@ -0,0 +1,229 @@
/*
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);