1.前提条件
bubble：映画フィルムのように、imageを横流しアニメーション化したい。
2.発生している問題
❶左右のはみ出した部分（widgh : 120%）がレスポンシブに干渉してしまう。
→写真のようにはみ出した部分を切り出したい。
❷静止画ではなく、映像もしくはアニメーションを配置したい。
4.実装したい機能
添付資料のようなアニメーションを実装したい。
このimageが並んでいるエレメントはリピーティンググループで実現されているということでしょうか？
これらのimageを並べているエレメントに関する情報をご教示いただきたいです！
あと、添付資料のようなアニメーションとは、常時そのimageたちがスクロールされて流れているといったことを指していますか？
アニメーションの動きの情報ももう少しいただきたいです！
「いいね！」 2
toshiki.azumaさんありがとうございます！
❶このピンクで囲まれた写真群はRepeating GroupのRandom itemsで出力しています。
❷アニメーションはまさに “常時そのimageたちがスクロールされて流れている状況” を想起しています。
参考LPを貼らせていただきます
参考になりそうなサイトを共有していただけました。
「いいね！」 1
Discordでも返信しましたが、こちらにも投稿しておきます。
使用したCSS
<style>
@keyframes infinity-scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
#scroll-infinity__list--left {
animation: infinity-scroll-left 20s infinite linear 0.5s both;
}
#scroll-infinity__item {
width: calc(100vw / 5) !important;
}
</style>
「いいね！」 3