Как сделать непрерывное смещение изображения влево-вправо?

Question

[Андрей]

Предположим, что есть веб-страница, с плавающей шириной в от 320 до 1920 пикселей.
На этой странице есть изображение шириной 3000 пикселей и левая сторона этого изображения прижата к левому краю веб-страницы (jsfiddle.net/38qenpw2)

Вопрос: как сделать плавное непрерывное движение этого изображения вправо (до конца), затем влево (до конца), и по новой?
Заранее спасибо! :)

Answer 1

[Виталий Инчин ☢]

Юзайте marquee!

°• Пример использования •°

Через jQuery.animate: jsfiddle.net/m3yq25n0/1

Comments

[Андрей]

Спасибо за ответ, но к сожалению данный вариант не подходит. Данный вариант устарел: caniuse.com/#search=marquee

[Виталий Инчин ☢]

Андрей: устарел, но поддерживается везде.

Можно использовать хоть тот же jQuery.animate. Сначала влево, по окончании анимации - делать новую, вправо, по ее окночанию опять влево. И всего-то.

А можно и на чистом, с помощью коэффициента и transitionend. Пример использования transitionend.

[Андрей]

Виталий Инчин ☢: а можете сбросить пример кода для jQuery.animate? Я не особо разбираюсь в js, хотелось бы сразу готовый код. Заранее спасибо!

[Виталий Инчин ☢]

Андрей: добавлю, обновлю ответ

Answer 2

[ya_yshel_rabotati_v_teleg]

c помощью jquery можно (animate)

Comments

[Андрей]

можете скинуть пример рабочего кода пожалуйста)

[ya_yshel_rabotati_v_teleg]

mugairyukan.ru

[ya_yshel_rabotati_v_teleg]

что то типо такого

function timer(){
$("#id").animate({
marginLeft: "200px",


}, 40000 );
setTimeout(timer2,100);
}
function timer2(){
$("#id").animate({
marginLeft: "0px",


}, 00 );
setTimeout(timer,100);
}



setTimeout(timer,100);

[Андрей]

ya_yshel_rabotati_v_teleg: спасибо. если я правильно понял, данный вариант не зациклен?

Answer 3

[Alex Sokol]

О боже, - это же легко на CSS3 = смотреть в сторону CSS3 Animation, Keyframes...

Делаешь нужное движение и потом: animation-iteration-count: infinite; - определяет сколько раз будет проигрываться анимационный цикл, перед тем как остановиться.

Comments

[Андрей]

Как вы предлагаете на keyframes получить расстояние для движения? Я знаю как это сделать с помощью js и всё

[Alex Sokol]

1) absolute: top, right, bottom, left.
2) Transform: Translate()

[Андрей]

Alex Sokol: пример пожалуйста, непонятно

[Alex Sokol]

codepen.io/sokol_dev/pen/ZbKmer

[Alex Sokol]

Тоже Самое на Absolute: codepen.io/sokol_dev/pen/PPmxJN

Только надо еще немного с позиционированием поиграться....

[Андрей]

Вы немного не поняли мою задачу. Мне нужно, чтобы картинка шириной 3000 пикслей двигалась влево-вправо в блоке плавающей ширины (максимум 1920 пикселей). Ваш код к этой задаче не применим(