Судите сами:
function resize() {
const el = document.getElementsByClassName('preloader-wrap')[0];
let scale = 0 < window.innerWidth - window.innerHeight
? window.innerWidth / 2200
: window.innerWidth / 800;
el.style.transform = 'translate(-50%, -50%) scale(' + scale + ')';
}
function animAdd(selector, className, timeout) {
const el = document.getElementsByClassName(selector)[0];
setTimeout(function () {
el.classList.add(className);
}, timeout);
}
function animRem(selector, className, timeout) {
const el = document.getElementsByClassName(selector)[0];
setTimeout(function () {
el.classList.remove(className);
}, timeout);
}
function getRandom() {
return 10 * Math.round((1500 * Math.random() + 500) / 10);
}
function animBannerAdd() {
animAdd('preloader-item1', 'active', getRandom());
animAdd('preloader-item2', 'active', getRandom());
animAdd('preloader-item3', 'active', getRandom());
animAdd('preloader-item4', 'active', getRandom());
animAdd('preloader-item5', 'active', getRandom());
animAdd('preloader-item6', 'active', getRandom());
animAdd('preloader-item7', 'active', getRandom());
animAdd('preloader-item8', 'active', getRandom());
animAdd('preloader-item9', 'active', getRandom());
animAdd('preloader-item10', 'active', getRandom());
animAdd('preloader-item11', 'active', getRandom());
animAdd('preloader-item12', 'active', getRandom());
animAdd('preloader-item13', 'active', getRandom());
animAdd('preloader-item14', 'active', getRandom());
animAdd('preloader-item15', 'active', getRandom());
animAdd('preloader-item16', 'active', getRandom());
animAdd('preloader-item17', 'active', getRandom());
animAdd('preloader-item18', 'active', getRandom());
animAdd('preloader-item19', 'active', getRandom());
animAdd('preloader-item20', 'active', getRandom());
animAdd('preloader-item21', 'active', getRandom());
animAdd('preloader-item22', 'active', getRandom());
animAdd('preloader-item23', 'active', getRandom());
animAdd('preloader-item24', 'active', getRandom());
animAdd('preloader-item25', 'active', getRandom());
animAdd('preloader-item26', 'active', getRandom());
animAdd('preloader-item27', 'active', getRandom());
animAdd('preloader-item28', 'active', getRandom());
animAdd('preloader-item29', 'active', getRandom());
animAdd('preloader-item30', 'active', getRandom());
animAdd('preloader-item31', 'active', getRandom());
animAdd('preloader-item32', 'active', getRandom());
}
function animBannerRem() {
animRem('preloader-item1', 'active', 0);
animRem('preloader-item2', 'active', 0);
animRem('preloader-item3', 'active', 0);
animRem('preloader-item4', 'active', 0);
animRem('preloader-item5', 'active', 0);
animRem('preloader-item6', 'active', 0);
animRem('preloader-item7', 'active', 0);
animRem('preloader-item8', 'active', 0);
animRem('preloader-item9', 'active', 0);
animRem('preloader-item10', 'active', 0);
animRem('preloader-item11', 'active', 0);
animRem('preloader-item12', 'active', 0);
animRem('preloader-item13', 'active', 0);
animRem('preloader-item14', 'active', 0);
animRem('preloader-item15', 'active', 0);
animRem('preloader-item16', 'active', 0);
animRem('preloader-item17', 'active', 0);
animRem('preloader-item18', 'active', 0);
animRem('preloader-item19', 'active', 0);
animRem('preloader-item20', 'active', 0);
animRem('preloader-item21', 'active', 0);
animRem('preloader-item22', 'active', 0);
animRem('preloader-item23', 'active', 0);
animRem('preloader-item24', 'active', 0);
animRem('preloader-item25', 'active', 0);
animRem('preloader-item26', 'active', 0);
animRem('preloader-item27', 'active', 0);
animRem('preloader-item28', 'active', 0);
animRem('preloader-item29', 'active', 0);
animRem('preloader-item30', 'active', 0);
animRem('preloader-item31', 'active', 0);
animRem('preloader-item32', 'active', 0);
}
document.addEventListener('DOMContentLoaded', function () {
resize();
});
window.onresize = function () {
resize();
};
console.log(getRandom());
animBannerAdd();
setInterval(function () {
animBannerRem();
}, 3000);
setInterval(function () {
animBannerAdd();
}, 3000);
