Столкнулся с проблемой зацикливания анимация.
Задача состоит в том, чтобы сделать бегущую строку (настоящую), и для этого требуется сделать перестановку элементов, на данный момент это есть, но теперь требуется зациклить весь этот процесс.
Воспроизвести проблему можно сразу при запуске, после красной строки должно быть продолжение.
(function($) {
$.fn.uspSlider = function(options) {
var settings = $.extend({
'widthSliderResize': 1000,
'countElements': 3,
'tagDOM': 'li',
'showClassAppendAndPrepend': true,
'showDebugElements': true,
'duration': 7000,
'easing': 'linear'
}, options);
var mainContainer = this;
var sliderController = {
items: [],
itemsCloned: {
append: [],
prepend: []
},
width: 0,
fullWidth: 0,
fullWidthWithMargin: 0,
countElements: settings['countElements'],
tagDOM: settings['tagDOM'],
margin: {
container: '0 0 0 0',
element: '0 10px 0 0',
_left: 0,
_right: 10,
lastChildElement: false
}
};
var methods = {
_init: function() {
$(sliderController.tagDOM, mainContainer).each(function() {
sliderController.items.push($(this));
sliderController.width += $(this).outerWidth(true);
});
var sliderItemsLength = sliderController.items.length;
for (var i = 0; i < sliderItemsLength; i++) {
var j = sliderItemsLength - (i + 1);
sliderController.items[i].clone().addClass('cloned append').appendTo(mainContainer);
sliderController.items[j].clone().addClass('cloned prepend').prependTo(mainContainer);
}
var sliderContainerAllElemetsLength = sliderController.countElements * sliderController.countElements;
$(sliderController.tagDOM, mainContainer).each(function(index) {
if ($(this).hasClass('append')) {
sliderController.itemsCloned.append.push($(this));
} else if ($(this).hasClass('prepend')) {
sliderController.itemsCloned.prepend.push($(this));
}
if (!settings['showClassAppendAndPrepend']) {
$(this).removeClass('append prepend');
}
if (index < sliderContainerAllElemetsLength - 1 && !sliderController.margin.lastChildElement) {
$(this).css('margin', sliderController.margin.element);
}
});
var widthWithMargin = (sliderContainerAllElemetsLength * (sliderController.margin._right + sliderController.margin._left));
sliderController.fullWidth = ((sliderController.width * sliderController.countElements) + widthWithMargin);
sliderController.fullWidthWithMargin = sliderController.fullWidth + widthWithMargin;
mainContainer.width(sliderController.fullWidth);
if (settings['showDebugElements']) {
console.table(sliderController);
}
methods.uspBlockController();
},
_destroy: function() {
console.log('Destroy here!');
},
uspBlockController: function() {
var windowInnerWidth = window.innerWidth;
var controlClonedSliderElements = function(value) {
$(sliderController.tagDOM, mainContainer).each(function(index) {
if ($(this).hasClass('cloned')) {
value ? $(this).removeClass('cloned-disable') : $(this).addClass('cloned-disable');
}
});
}
if (windowInnerWidth < settings['widthSliderResize']) {
mainContainer.addClass('activeMobileUSP')
if (sliderController.items.length <= 0) {
methods._init();
}
controlClonedSliderElements(true);
mainContainer.width(sliderController.fullWidth);
var count = 1
tmpCount = 1,
itemsPositionLeft = [];
var animated = function(element) {
element.animate({
uspWidth: sliderController.fullWidth
}, {
step: function(widthForFirstAnimate, fx) {
$(this).css('-webkit-transform', "translate(" + -widthForFirstAnimate + "px, 0)");
var checkedAnimate = function() {
if (mainContainer.find(sliderController.tagDOM + ':nth-child(' + count + ')').is(':offscreen')) {
var thisElement = mainContainer.find(sliderController.tagDOM + ':nth-child(' + count + ')');
itemsPositionLeft.push(widthForFirstAnimate);
function tmpAnimate(tmpElement) {
console.log(tmpElement);
tmpElement.stop(true, false);
tmpElement.animate({
uspWidth: sliderController.fullWidth + itemsPositionLeft[tmpElement.index()]
}, {
start: function() {
console.log(tmpElement.index());
tmpCount++;
if (tmpCount > (sliderController.countElements * sliderController.countElements)) {
tmpCount = 1;
}
},
step: function(widthForSecondAnimate, fx) {
var stepVariable = 40; // Переменная которая отвечает за прижимание к левому краю первоначального animate
$(this).find('a').css("color", "red");
$(this).css("-webkit-transform", "translate(" + (-widthForSecondAnimate + sliderController.fullWidth - stepVariable) + "px, 0)");
if ($(this).is(':offscreen') && ($(this).index() + 1) == tmpCount) {
// Тому элементу, который скрылся за левую часть экрана, обновляем анимацию.
tmpAnimate(mainContainer.find(sliderController.tagDOM + ':nth-child(' + tmpCount + ')'));
}
},
duration: settings['duration'],
easing: settings['easing']
});
};
count++;
if (count > (sliderController.countElements * sliderController.countElements)) {
count = 1;
}
tmpAnimate(thisElement);
}
}
checkedAnimate();
},
duration: settings['duration'],
easing: settings['easing']
});
};
animated(mainContainer.find(sliderController.tagDOM));
} else if (windowInnerWidth > settings['widthSliderResize'] &&
mainContainer.hasClass('activeMobileUSP')) {
mainContainer.removeClass('activeMobileUSP');
controlClonedSliderElements(false);
mainContainer.find(sliderController.tagDOM).stop(true, true).animate({
uspWidth: 0
}).css('-webkit-transform', "translate(0, 0)").width('auto');
mainContainer.width('auto');
}
}
}
$(window).resize(function() {
methods.uspBlockController();
});
$.expr.filters.offscreen = function(el) {
var rect = el.getBoundingClientRect();
return (
(rect.x + rect.width) < 0 ||
(rect.y + rect.height) < 0 ||
(rect.x > window.innerWidth || rect.y > window.innerHeight)
);
};
methods.uspBlockController();
};
$('.usp-block-container').find('.usp-block-details').uspSlider({
'widthSliderResize': 486,
'showClassAppendAndPrepend': true,
'showDebugElements': false
});
})(jQuery);
html,
body {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
}
.usp-block-container {
width: 100%;
background-color: black;
overflow: hidden;
}
.usp-block-details {
color: white;
text-align: center;
padding: 15px 0;
margin: 0 auto;
}
.usp-block-details .item {
display: inline-block;
text-transform: uppercase;
margin-right: 10px;
}
.usp-block-details .item a {
color: white;
font-family: 'Consolas', sans-serif;
font-size: 16px;
text-decoration: none;
}
.usp-block-details .item:last-child {
margin-right: 0;
}
/* Style for usp-controller */
.cloned-disable {
display: none !important;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<h1>USP loop</h1>
<div class="usp-block-container">
<ul class="usp-block-details">
<li class="item"><a href="">First</a></li>
<li class="item"><a href="">Second</a></li>
<li class="item"><a href="">Third</a></li>
</ul>
</div>
Прошу обратить внимание на строку 211. Заранее благодарен за помощь.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Вызываю функцию addListener из библиотеки WebMidi, третий параметр называется 'listener'Требуется, чтобы этот параметр был функцией (В моём случае это...
Как сделать, когда доскролишь до самого низа страницы, чтобы поменялся background, как отловить тот момент, когда уже уперлись в самый низ страницы...