Зацикленная смена background-position без плавного перехода

[Удален]

28 сентября 2016, 19:54

816

Подскажите как с помощью JS или keyframes сделать зацикленную смену background-position БЕЗ ПЛАВНОГО перехода?

Есть спрайт:

Надо чтобы по очереди с небольшой задержкой менялись background-position:

background-position: -27px 0px; 

background-position: -55px 0px; 

background-position: -83px 0px; 

background-position: -113px 0px;

background-position: -139px 0px;

background-position: -141px 0px;

png sprite.png

366

Samail

28 сентября 2016, 20:50

#1

Не знаю насчёт правильности, но работать должно:


function bp() {

setTimeout(function() {document.getElementById("split").style.backgroundPosition = "-27px 0px";}, 1000);

setTimeout(function() {document.getElementById("split").style.backgroundPosition = "-55px 0px";}, 2000);

setTimeout(function() {document.getElementById("split").style.backgroundPosition = "-83px 0px";}, 3000);

setTimeout(function() {document.getElementById("split").style.backgroundPosition = "-113px 0px";}, 4000);

setTimeout(function() {document.getElementById("split").style.backgroundPosition = "-139px 0px";}, 5000);

setTimeout(function() {document.getElementById("split").style.backgroundPosition = "-141px 0px";}, 6000); 

setTimeout(function() {bp();}, 6000); 

};

window.onload = bp;

D

10

dmtrplvtsv

28 сентября 2016, 20:51

#2

как вариант, только координаты подправить, а то прыгает стрелочка

https://jsfiddle.net/yxxox80a/

Тренды маркетинга в 2024 году: мобильные продажи, углубленная аналитика и ИИ

VK приобрела 70% в структуре компании-разработчика red_mad_robot