Q&A
ご質問は、Luxy.js で対応したいということですか？
それとも、他のライブラリを探している、ということですか？
質問させていただきます。
https://shinmi-shika.com/
上記サイトのような
パララックスを作成したいと思っているのですが
要素が重なるように動く動きは
https://b-risk.jp/blog/2021/02/luxy/
上記で紹介されているLuxy.jsで対応できるかと思うのですが
それ以外の画像の視差効果について
.wrap{
height: 500px;
width: 400px;
background: url("背景画像指定") no-repeat left center / cover;
background-attachment: fixed;
margin: 0;
}
上記CSSのみで行うパララックスですと
画像が動きすぎてしまうのと（参考サイトのように動く範囲を限定したい）
本来背景画像をブロック内にある
divで囲んだ範囲のみで100％表示したいが
それをはみ出して画面全体の横100%で表示されてしまいます（各ブロックはflexboxで横並びにしています）
こちら解決方法や別途よい方法などありましたらご教授いただきたけますと幸いです。
お手数をおかけいたしますがよろしくお願いいたします。
Luxy.jsで全て対応できるのであればそれだけで対応したいと思っています。
Luxy.jsはデモサイト（https://b-risk.jp/wp/wp-content/themes/brisk/sample/entry/20210225/）を見ると
投稿画像の赤枠部分の画像同士が感じ重なる慣性スクロールの個所の動きはそのものだと思うのですが
そのほかの配置されている画像の枠内でのパララックスの動きが違うので（画像の範囲は動かず範囲内の画像が動く）
そちらを参考サイトに合わせるためには
その他のライブラリと組み合わせる必要があるのかと考えていました。
もしLuxy.jsのみで対応できず、他に一括で対応できるライブラリがある場合はそちらを
教えていただけますと大変うれしいです。
お手数をおかけして申し訳ございません
回答1件
0
ベストアンサー
有名どころだと skrollr.js などいろいろなプラグインがあると思いますが、scroll-timeline の polyfill を使うのがいいのではないかと思いました。
GitHub - flackr/scroll-timeline: A polyfill of ScrollTimeline.
ご存知の通り、@scroll-timeline はまだ Chrome が試験的に導入しているだけですが、先々はメジャーブラウザで対応されることが期待できますので、その仕様に合わせたやり方をしておくのは悪くないと思います。
いちおう、サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/s10dykvu/
参考：
@scroll-timelineを使ってCSSのみでスクロールアニメーションを実現する | フロントエンドBlog | ミツエーリンクス
投稿2022/02/12 04:14
総合スコア37421
あなたの回答
tips
プレビュー
