$(function(global) {
let ClassCycler = function(opt) {
let timer,
execCycle = (function() {
let $item = opt.$targetElm,
index = 0,
max = $item.length;
return function() {
if (!opt.oneWay) {
$item.removeClass(opt.cycleClassName);
}
$item.eq(index).addClass(opt.cycleClassName);
index = (++index === max) ? 0 : index;
if (opt.oneWay && index === 0) {
global.clearInterval(timer);
}
};
}());
opt.startImmediate && execCycle();
timer = global.setInterval(execCycle, opt.duration);
};
// 即実行したいなら
global.ClassCycler = ClassCycler;
}(this.self || global));
$(window).scroll(function () {
$('.js-bg-fadein-footprints-show').each(function () {
let hit = $(this).offset().top;
let scroll = $(window).scrollTop();
let wHeight = $(window).height();
if (scroll > hit - wHeight + wHeight / 100 + 80 && $(this)) { // 高さ調整
new ClassCycler({
$targetElm: $(this).children().children().children().children(), //連続Class付与させたいセレクタの指定
cycleClassName: 'show',// 付与するClassName
duration: 120, // 連続する間隔
startImmediate: true,// 初期状態から1つ目に付与するのか
oneWay: true // 付け替え or 付けて終わり
});
}
});
});
<div class="fadein-footprints__inner--point">
<div class="bg-fadein-footprints nth-1"></div>
<div class="bg-fadein-footprints nth-2"></div>
<div class="bg-fadein-footprints nth-3"></div>
</div>
コメントを残す