jQueryで波を表現したいが画像が切れてしまう

Question

以下のページのように永遠に波が動いている様子を表現したいのですが、自分で波の画像して配置すると、画像が終わっているところがどうしても表示されてしまいます。
参考ページ

実装したもの
Codepen

画像サイズを横幅2107pxにしているので原寸で表示されれば良いのか？と思い、widthをautoにしてみたりしたのですがうまくいきませんでした。。

大変恐れ入りますが、修正方法を教えていただけませんでしょうか。

以上よろしくお願いいたします。

Answer 1

この例に関して言えば、widthはautoではなく固定幅を指定しておく必要があります。
autoだと親の幅と同じなので動かせば当然表示は切れます。

参考ページは同じ画像を横に2つ並べているようですが、1つでも問題なさそうです。

今回は親を1000px、画像を1500px、動かす幅を50%にしていますが、レスポンシブルやサイトの作りに合わせて変更してください。

親:1000px
子:1500px
→ 子は最大50%動かす余地がある

#content {
  position: relative;
  height: 250px;
  width: 1000px;
  overflow: hidden;
  border:1px solid red;
}
#rect {
  position: absolute;
  text-align: center;
  width: 1500px;
}
#content img {
}

$(function () {
  setTimeout("rect()"); //アニメーションを実行
});

function rect() {
  $("#rect")
    .animate(
      {
        left: "-50%"
      },
      5000
    )
    .animate(
      {
        left: "0%" //要素を戻す位置
      },
      5000
    );
  setTimeout("rect()", 3000); //アニメーションを繰り返す間隔
}

Comments

[ringoringogogo]

ご丁寧で的確なご回答いただきまして、本当にありがとうございます！！！
自分の理解できていない部分もしっかりわかりました。widthのautoなどについて、もう少し勉強しなければと思いました。
想定通りの動きとなりました、本当にありがとうございました！