Как сделать бесконечный фон?

     Я Видела решение через клоны, решение через введение три переменных.

     Но например мне нужен был просто меняющийся фон. Потому хочу показать пример ,через две картинке.

     Чтобы сделать меняющийся постоянно фон,бесконечный фон нужно условно две одинаковые картинки.

     

     

     Я нарисовала вот таких две картинки…

     

     Код для первой картинки будет таким. Размещаем картинку в центре …. икс и игрек равно нулю….

     теперь мы будем смещать картинку , изменить икс на 2 , мы будем менять местоположение постоянно потому оператор повторять всегда.

      Когда картинка уйдет из зоны видимости нам нужно ее вернуть в начало ….

     в положение икс равно 463 картинку не видно….

     Она ушла за кадр …...следовательно нам нужно переместить ее ,но не в начало, а же за кадр ...а это 463*2 =926

     Почему не минус 463 ? потому что нам нужно место чтобы сюда влезла наша вторая картинка….

     

     тут две картинки, а не одна….чтобы они поместились обе , будет 926 пикселей,а не 463.

     Вторую картинку мы смещаем на старте ….

     

     Поскольку у нас смещается только икс, то мы смещаем картинку относительно первой на минус 462.

     Т.е когда картинка уехала за край мы подставляем вторую картинку.

     две картинки это 926 пискелей. Потому как только одна картинка ушла из видимости мы подставляем другую ..

     По сути мы просто склеили две картинки. И двигаем их с одинаковой скоростью за край экрана.

      Как видим ничего сложного. Сложность бывает в расчете видимых зон и длины двух картинок. Часто просто не учитывают что нужно считать длину обеих картинок.

     Это будет работать также и в яве скрипт принцип тот же .

     

     Я добавила простую анимацию в виде машины, в виде рандомной тарелки, ну и пламени на колесо.

      Эту инструкцию я написала потому что просмотрев много уроков ,именно этот способ я не нашла. При чем делая эту анимацию я сама сделала ошибку первый раз, так как не учла расстояние ,сделала неправильно расчет без учета двух картинок, потому не могла понять что не так, потому выкладываю рабочую версию…

     автор Штумоз 28.10.2020