You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.1 KiB
79 lines
2.1 KiB
// Сделано на основе пена http://codepen.io/SitePoint/pen/MwEaQM
|
|
|
|
(function($) {
|
|
|
|
var _elements,
|
|
_options;
|
|
|
|
var methods = {
|
|
init: function(elements, options) {
|
|
|
|
_elements = elements;
|
|
_options = options;
|
|
|
|
methods.bind();
|
|
},
|
|
bind: function() {
|
|
$(window).scroll(function() {
|
|
methods.animate(_elements, _options);
|
|
});
|
|
$(window).trigger('scroll');
|
|
},
|
|
animate: function(elements, options) {
|
|
|
|
var viewHeight = $(window).height(),
|
|
viewTop = $(window).scrollTop(),
|
|
viewBottom = (viewTop + viewHeight);
|
|
|
|
$.each(elements, function() {
|
|
var elementAnimation = $(this).data('animate'),
|
|
elementOffset = $(this).data('offset'),
|
|
elementDuration = $(this).data('duration'),
|
|
elementDelay = $(this).data('delay'),
|
|
elementIteration = $(this).data('iteration'),
|
|
elementHeight = $(this).outerHeight(),
|
|
elementTop = $(this).offset().top,
|
|
elementBottom = (elementTop + elementHeight);
|
|
|
|
if (elementOffset) {
|
|
elementTop = elementTop + elementOffset;
|
|
elementBottom = elementBottom - elementOffset;
|
|
}
|
|
|
|
$(this).css({'-webkit-animation-duration': elementDuration, 'animation-duration': elementDuration});
|
|
$(this).css({'-webkit-animation-delay': elementDelay, 'animation-delay': elementDelay});
|
|
$(this).css({'-webkit-animation-iteration-count': elementIteration, 'animation-iteration-count': elementIteration});
|
|
|
|
if ((elementBottom >= viewTop) && (elementTop <= viewBottom)) {
|
|
$(this).css('visibility', 'visible');
|
|
$(this).addClass('animate__'+elementAnimation);
|
|
$(this).addClass('animate__animated');
|
|
}
|
|
else {
|
|
if (options.once === false) {
|
|
$(this).css('visibility', 'hidden');
|
|
$(this).removeClass('animate__'+elementAnimation);
|
|
$(this).removeClass('animate__animated');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
jQuery.fn.scrolla = function(options) {
|
|
options = $.extend({
|
|
mobile: false,
|
|
once: false
|
|
}, options);
|
|
|
|
if (options.mobile === false) {
|
|
if(/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
methods.init(this, options);
|
|
|
|
};
|
|
})(jQuery);
|