私はクライアント用のパララックス ホームページを構築しており、現在 Stellar.js を使用しています。
#slide2ページの中央に幅で呼び出され、高さ100%で始まるdiv があります650px。#slide3 という別の div もwidth: 100%のすぐ下にあります#slide2。#slide3の前を通常よりも速く上にスクロールします#slide2。
プロジェクトのデザイナーは、#slide2「高さが 350px になるまで縮小」したいと考えています。さて、これは、その#slide3下の が ある速度で上にスクロールしなければならないことを意味します - その後ろの一部を含むように速く#slide2- そして突然別の速度 - 通常の速度でスクロールし、 の以上を覆わないようにし300pxます#slide2。
jQuery を使用して、別の「data-stellar-ratio」をスクロール途中の要素に書き込んで、突然別の速度で移動させようとしました。しかし、うまくいきません。属性はコードに表示されますが、速度は変わりません。
また、スクロールを介してサイズ変更イベントをトリガーしようとしました-つまり#slide2、文字通り350pxに縮小し#slide3、#slide2の前をまったく通過しません-しかし、それはデザイナーが望んでいることではありません. さらに、サイズ変更イベントは 1 回しか発生せず、再度表示するにはページを更新する必要があり、これもノーノーです。
だから、ここに私の問題があります.彼らが私に求めていることは、現在存在する現在のパララックスプラグインで実際に可能だとは思いません.
そして、これが私がここに私の質問を投稿している理由です。Stellar.js またはその他の現在利用可能なプラグインで、スクロールの途中で要素のスクロール速度を変更できますか? または、誰かがそれを行う方法について何か考えを持っていますか?
どんな助けでも大歓迎です。
操作しようとしているHTMLは次のとおりです。
<div class="slide" id="slide2" data-stellar-background-ratio="0.2">
</div>
<div class="slide" id="slide3" data-stellar-ratio="2.65" data-stellar-vertical-offset="190">
</div>
重要であれば、これが私の Stellar.js コードです。
$(window).stellar({
horizontalScrolling: false,
verticalScrolling: true,
scrollProperty: 'scroll',
parallaxBackgrounds: true,
parallaxElements: true,
hideDistantElements: false
});