検索しても見つからないので質問させていただきます。
仕事のプロジェクトなのでコードは見せることはできませんが、できる限り理解しやすいように説明しますので、もし不明な点がある場合はコメントで指摘していただけるとお答えできます。
慣性スクロールするを実現できるものをwordpressのサイトで使用しています。locomotive-scroll
***実現したいこと***
locomotive-scrollを使用して、各画像に慣性スクロールをつけたい。
***現状****
jqueryでデータ属性のdata-scroll-container,data-scroll, data-scroll-speedを、動かしたい画像10枚に追加しています。
developer toolでは、htmlで、親要素にdata-scroll-container、エフェクトを付けたい各要素にdata-scrollとdata-scroll-speedが追加されているのを確認できています。
他のサイトでlocomotiveを使用しているので比較すると、data-scrollが付いている要素にはスクロールするごとにstyle="transform: matrix3d();" の値が可変していますが、私の場合は手動でwindowサイズを縮めたり広げたりした後にスクロールすると可変しますが、windowサイズを変更せずにスクロールしても何も変わらず、親要素のmatrix3dのみが可変します。
実装したい動きは、各要素のdata-scroll-speedの値が異なるので、ページが読み込まれた後にスクロールすると時間差で要素を動かしたいです。(windowサイズを変更しないで)
全てのデータ属性を追加してから、下記のコードを書いています。
// main.js const scroll = new LocomotiveScroll({ el: document.querySelector('[data-scroll-container]'), smooth: true, multiplier: 1, lerp: 0.05, reloadOnContextChange: true });
原因がわからないので、もしアドバイスや何かこれが原因ではないかとわかる方がいれば、コメントで教えてください。よろしくお願いいたします。
あなたの回答
tips
プレビュー