Wie Multiparallax Scrolling mit Skrollr.js zu implementieren

Ich habe ein kleines Problem mit meinem Verständnis, wie Sie die skrollr.js implementieren.Wie Multiparallax Scrolling mit Skrollr.js zu implementieren

Ich möchte nur den gleichen Effekt wie dieser: Der MULTI PARALLAX NUR.

Wie setzen Sie so etwas wie diese:

http://prinzhorn.github.io/skrollr/

ich in CodePen mit dieser hat man versucht, aber es bewegt sich nicht wie das Beispiel oben.

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; 
}

(function($){ 

    skrollr.init(); 

})(jQuery);

der Hoffnung, Sie mich aufklären konnte. Ich bin aber immer noch noob.
Danke!

Quelle

2016-05-11 ccmanz

Ich weiß nicht, ob dies der Parallax-Effekt ist, den Sie wollen, aber here ist etwas, das Ihnen helfen kann, damit umzugehen und damit zu spielen.

Auch ich habe Ihren Code aktualisiert und eine Demo von Multiparallax Scrolling mit data-100-start und data-100-end Attribute erstellt.

<div id="bg1" data-100-start="background-position:0px 0px;" data-100-end="background-position:-500px -10000px;" class="skrollable skrollable-between" style="background-position: 0px 0px;"></div> 
<div id="bg2" data-100-start="background-position:0px 0px;" data-100-end="background-position:-500px -10000px;" class="skrollable skrollable-between" style="background-position: 0px 0px;"></div> 
<div id="bg3" data-100-start="background-position:0px 0px;" data-100-end="background-position:-500px -10000px;" class="skrollable skrollable-between" style="background-position: 0px 0px;"></div>

Bitte beziehen Sie sich auf diese fiddle.

Quelle

2016-05-11 04:10:27 Bhumika107

es ist nah an dem Effekt, den ich will, aber es gibt keinen Übergang zwischen den Hintergrundbildern etwas eine glatte Erleichterung Übergang. weißt du wie? – ccmanz

Sie können CSS-Übergänge hinzufügen. Ich habe kein Datenattribut gefunden, um die Geschwindigkeit in skrollr zu ändern. Also habe ich Übergänge hinzugefügt. Bitte beachten Sie diese - https://jsfiddle.net/ktzepu1t/4/ – Bhumika107

Wie Multiparallax Scrolling mit Skrollr.js zu implementieren

Antwort

Verwandte Themen