【Javascript】clip-pathでスライドアニメーションを作ってみた - Qiita

初めに 学習した内容をもとにスライドーアニメーションを作ってみました。 ※内容に間違いなどがある場合はご指摘をよろしくお願いします。 完成形のイメージ 矢印ボタンを押すとイメージが左から右へとスライドします。 Main Concept ① イメージが入っている箱を横に並べます。（親要素のpositionをrelativeにし、子要素のイメージ箱をabsoluteにする） ② イメージコンテナ（イメージが入っている５つの箱の親要素）にclip-pathで四角い形で切り抜きます。これが可視領域になります。 ③ ボタンをクリックした時にsetIntervalを使って、イメージの位置（left)が徐々に増えるようにします。また、一定の数（count)が実行されたらclearIntervalを指定し止まるようにします。 ④image0.jpg 〜 image4.jpgの絶対位置（left)を全て左か