背景が動くスライドショー

Question

前提・実現したいこと

背景が動くスライドショーを実装したいです。

【付けたい機能】
1.1枚目をzoom、2枚目を左から右に動かす　等好きにアニメーションをつけられるように
2.スライドナビゲーションを付ける　
3.テキストをそれぞれ上に乗せる

試したこと

https://codepen.io/andrealba/pen/WzOOBe

こちらを参考に実装しましたが、背景にcssでアニメーションをつけると、
次に出てくる画像にもzoomが効いてしまい画像が見切れてしまいます。

元々そのような機能があるjsがあればそちらに変更、
もしくは参考サイトのjsを改修できればと思います。

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

Comments

[Jon_do]

参考にしたサイトを見ましたが、ズームされるような機能はありませんでした。
参考にして書いたコードを追記してください

[yaiya]

ご返信ありがとうございます。

参考サイトの
.slides__img に、
-webkit-animation:anime 15s 0s infinite; animation:anime 15s 0s infinite;
　を追記し、
@keyframes anime {100%{transform:scale(1.2);}}
　を追加してみました。

[m.ts10806]

codepenは自身のコードではないですよね。
自身のコードを全て　ご提示ください。

[yaiya]

初めてなものでよくわかっておらず、申し訳ありません。

ほとんどcodepenの参考サイトのままなのですが、
cssを追加したものを下記にアップしました。
https://codepen.io/yaiya/pen/NWrqXMP

ズームで躓いてしまったのですが、左から右へ動くもの、動かないものも設定できたらと思います。

[m.ts10806]

質問本文に入らなかったですか？