1
skrollr.jsの実装方法に関する私の理解には少し問題があります。Skrollr.jsを使用してMultiparallaxスクロールを実装する方法
私はちょうどこれと同じ効果が欲しいです：マルチパララックスのみ。私はCodePenで、このいずれかを使用してみましたが、それは、上記の例のようにスクロールしない
http://prinzhorn.github.io/skrollr/
：どのようにあなたはこのような何かを実装するのです
。
HTML
<body style="height:1200px;">
<div id="bg1" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;" class="skrollable skrollable-between" style="background-position: 0px 0px;"></div>
<div id="bg2" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;" class="skrollable skrollable-between" style="background-position: 0px 0px;"></div>
<div id="bg3" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;" class="skrollable skrollable-between" style="background-position: 0px 0px;"></div>
</body>
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
CSS
#bg1, #bg2, #bg3 {
z-index: 50;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://prinzhorn.github.io/skrollr/examples/images/bubbles.png) repeat 0 0;
}
#bg2 {
z-index: 49;
background-image: url(https://prinzhorn.github.io/skrollr/examples/images/bubbles2.png);
}
#bg3 {
z-index: 48;
background-image: url(https://prinzhorn.github.io/skrollr/examples/images/bubbles3.png);
}
.skrollable {
/*
* First-level skrollables are positioned relative to window
*/
position:fixed;
/*
* Skrollables by default have a z-index of 100 in order to make it easy to position elements in front/back without changing each skrollable
*/
z-index:100;
}
.skrollr-mobile .skrollable {
/*
* May cause issues on Android default browser (see #331 on GitHub).
*/
position:absolute;
}
.skrollable .skrollable {
/*
* Second-level skrollables are positioned relative their parent skrollable
*/
position:absolute;
}
.skrollable .skrollable .skrollable {
/*
* Third-level (and below) skrollables are positioned static
*/
position:static;
}
JS
(function($){
skrollr.init();
})(jQuery);
あなたは私を啓発することができ期待して。私はまだ奴隷です。
ありがとうございます！
これは、私が望む効果に近いですが、背景画像の間にはやや滑らかなイージングトランジションがありません。どのようにするか知っていますか？ – ccmanz
CSSトランジションを追加できます。私はskrollrの速度を変更するためのデータ属性を見つけられませんでした。そこで私はトランジションを追加しました。これを参照してください - https://jsfiddle.net/ktzepu1t/4/ – Bhumika107