कंटेनर ऊपर से करने के लिए नीचे

Question

मैं इस तरह इस एचटीएमएल प्रभाव को लागू करना चाहते हैं नीचे स्क्रॉल अनुमति देने का तरीका:

छवि शो this website से

ऊपर से स्क्रॉल के साथ नीचे, बहुत अच्छा करने के लिए।

लेकिन लागू मेरी है:

http://codepen.io/devbian/pen/dXOvGj

<div class="container container0"> 
    <img src='http://special.porsche.com/microsite/mission-e/assets/images/content/reveal/intro/intro-01.jpg' class='fixed'/> 
</div> 

<div class="container container1"> 
    <img src="http://special.porsche.com/microsite/mission-e/assets/images/content/reveal/intro/intro-02.jpg" class="moveable"> 
</div> 

<div class="container container2"> 
    <img src="http://special.porsche.com/microsite/mission-e/assets/images/content/reveal/intro/intro-04.png" class="moveable"> 
</div> 

<div class="container container3"> 
    <img src="http://special.porsche.com/microsite/mission-e/assets/images/content/reveal/intro/intro-05.jpg" class="moveable"> 
</div> 




* { 
    padding: 0; 
    margin: 0; 
} 

body{ 
    min-height:2000px; 
} 

.container { 
    overflow: hidden; 
    padding: 10px; 
    position: relative; 
    min-height: 300px; 
} 

.container img{ 
    width:100%; 
    height:300px; 
} 

/* .container0 { 
    background-color: #e67e22; 
} 
.container1 { 
    background-color: #ecf0f1; 
} 
.container2 { 
    background-color: #f39c12; 
} 
.container3 { 
    background-color: #1abc9c; 
} */ 

.fixed { 
    position:fixed; 
} 
.moveable { 
    position:absolute; 
} 


$(function() { 
    function setLogo() { 
    $('.moveable').each(function() { 
    $(this).css('top', 
     $('.fixed').offset().top - $(this).closest('.container').offset().top 
    ); 
    }); 
    } 
    $(window).on('scroll', function() { 
    setLogo(); 
    }); 
    setLogo(); 
}) 

इस तल ऊपर से है।

स्क्रॉलिंग के साथ मैं छवि को ऊपर से नीचे कैसे बदल सकता हूं?

Answer 1

Plunker

यहाँ है कि मैं क्या पाने के लिए किया था इस ऊपर से नीचे तक काम कर रहे:

• पोजिशनिंग - हर कार स्लाइड position: absolute है और bottom: 0% साथ शुरू होता है और आपके स्क्रॉल यह धीरे धीरे स्लाइड का पता चलता है bottom: 100% में संक्रमण करके। अपवाद तीसरे संक्रमण पर है जो बाएं से दाएं होता है जो left: -100% से left: 0% तक चलता है।
• वर्तमान स्लाइड - वर्तमान स्लाइड की गणना स्क्रॉल स्थिति ले कर और इसे दृश्य ऊंचाई से विभाजित करके और Math.floor(scrollTop/height) की तरह गोल करके गणना की जाती है।
• वर्तमान स्लाइड प्रतिशत - प्रत्येक स्लाइड संक्रमण के लिए वर्तमान प्रतिशत (जो bottom और left शैलियों संक्रमण के लिए इस्तेमाल किया जाता है) का उपयोग कर var partPixels = scrollTop % height; वर्तमान स्लाइड स्थिति परे पिक्सल की राशि हो रही है, और फिर विभाजित है कि द्वारा की जाती है ऊंचाई देखें और परिणाम को (partPixels/height) * 100 जैसे प्रतिशत में परिवर्तित करें।

तब स्क्रॉल स्थिति में परिवर्तन होने पर प्रासंगिक शैलियों के साथ डीओएम को अपडेट करने की बात है।

पूर्ण कोड

window.onload = function() { 
 
    var scrollTop, currentIndex, partPercentage, height, totalHeight; 
 
    var stylesLastUpdate = {}; 
 
    var elementsCache = { 
 
    partWrapper: document.getElementById("part-wrapper"), 
 
    spacer: document.getElementById("spacer"), 
 
    segment: document.getElementById("segment") 
 
    }; 
 
    var whiteBackgrounds = document.getElementsByClassName('part-background-light'); 
 
    var wbLength = whiteBackgrounds.length; 
 
    var partElements = elementsCache.partWrapper.getElementsByClassName("part"); 
 
    var partsLength = partElements.length; 
 
    var specialIndex = 3; 
 
    partsLength += 1; 
 
    for (var i = 0; i < partsLength; i++) { 
 
    if (i < specialIndex) { 
 
     elementsCache[i] = partElements[i]; 
 
    } 
 
    else { 
 
     elementsCache[i] = partElements[i-1]; 
 
    } 
 
    } 
 

 
    resize(); 
 
    onScroll(); 
 
    document.addEventListener("scroll", onScroll); 
 
    window.addEventListener("resize", resize); 
 

 
    function onScroll() { 
 
    scrollTop = document.body.scrollTop; 
 
    if (scrollTop > totalHeight) { 
 
     elementsCache.segment.classList.remove("fixed"); 
 
    } 
 
    else { 
 
     elementsCache.segment.classList.add("fixed"); 
 
    } 
 
    currentIndex = Math.floor(scrollTop/height); 
 
    var partPixels = scrollTop % height; 
 
    partPercentage = (partPixels/height) * 100; 
 
    updateDom(); 
 
    } 
 

 
    function updateDom() { 
 
    var nextIndex = currentIndex + 1; 
 
    for (var i = 0; i < partsLength; i++) { 
 
     if (i === currentIndex && nextIndex < partsLength) { 
 
     if (currentIndex !== (specialIndex-1)) { 
 
      updateStyle(nextIndex, 'bottom:' + (100 - partPercentage) + '%;display:block'); 
 
     } 
 
     } 
 
     if (i <= currentIndex) { 
 
     updateStyle(i, 'bottom:0%; display: block'); 
 
     } 
 
     if (i > nextIndex) { 
 
     updateStyle(i, 'bottom:100%; display: none'); 
 
     } 
 
    } 
 
    updateWhiteBackgrounds(); 
 
    } 
 

 
    function updateStyle(index, newStyle) { 
 
    if (!(index in stylesLastUpdate) || stylesLastUpdate[index] !== newStyle) { 
 
     stylesLastUpdate[index] = newStyle; 
 
     elementsCache[index].style.cssText = newStyle; 
 
    } 
 
    } 
 

 
    function updateWhiteBackgrounds() { 
 
    var wbPercentage = -100; // default 
 
    if (currentIndex === (specialIndex-1)) { 
 
     wbPercentage = -100 + partPercentage; 
 
    } 
 
    else if (currentIndex > (specialIndex-1)) { 
 
     wbPercentage = 0; 
 
    } 
 
    var newStyle = 'left:' + wbPercentage + '%;display:block'; 
 
    if (!('whiteBackgrounds' in stylesLastUpdate) || stylesLastUpdate['whiteBackgrounds'] !== newStyle) { 
 
     for (var m = 0; m < wbLength; m++) { 
 
     whiteBackgrounds[m].style.cssText = newStyle; 
 
     } 
 
    } 
 
    } 
 

 
    function resize() { 
 
    height = elementsCache.partWrapper.clientHeight; 
 
    totalHeight = height * (partsLength-1); 
 
    updateStyle('spacer', 'padding-top:' + totalHeight + 'px') 
 
    } 
 

 
}

body { 
 
    margin: 0; 
 

 
} 
 
.special-scroll { 
 
    padding-top: 1567px; 
 
} 
 

 
.segment { 
 
    margin: auto; 
 
    top: 0px; 
 
    left: 0px; 
 
    bottom: auto; 
 
    right: auto; 
 
} 
 
.segment.fixed { 
 
    position: fixed; 
 
} 
 

 
.animation-sequence { 
 
    background-color: black; 
 
} 
 

 
.part-spacer { 
 
    height: 15vh; 
 
    position: relative; 
 
} 
 
.part-background-dark { 
 
    background-color: black; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    
 

 
} 
 
.part-background-light { 
 
    background-color: white; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: -100%; 
 
    top: 0; 
 
    
 
} 
 

 

 
.part-wrapper { 
 
    position: relative; 
 
} 
 
.part { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 100%; 
 
    overflow: hidden; 
 
    display: none; 
 
} 
 
.part-0 { 
 
    position: relative; 
 
    display: block; 
 
} 
 
.part-2 img { 
 
    position: absolute; 
 
} 
 
.part img { 
 
    width: 100%; 
 
} 
 
.content { 
 
    min-height: 2000px; 
 
}

<!-- special-scroll -- start --> 
 
    <div class="special-scroll" id="spacer"> 
 
     <div class="segment fixed" id="segment"> 
 
     <div class="animation-sequence"> 
 
      <div class="part-spacer spacer-top"> 
 
      <div class="part-background-light"></div> 
 
      </div> 
 
      
 
      <div class="part-wrapper" id="part-wrapper"> 
 
      <div class="part part-0"> 
 
       <img src="http://i.imgur.com/B6fq5d3.jpg"> 
 
      </div> 
 
      <div class="part part-1"> 
 
       <img src="http://i.imgur.com/pE44BJ8.jpg"> 
 
      </div> 
 
      <div class="part part-2"> 
 
       <div class="part-background-dark"></div> 
 
       <div class="part-background-light"></div> 
 
       <img src="http://i.imgur.com/U7bEh2I.png"> 
 
      </div> 
 
      <div class="part part-4"> 
 
       <img src="http://i.imgur.com/HSNVbkR.jpg"> 
 
      </div> 
 
      <div class="part part-5"> 
 
       <img src="http://i.imgur.com/1OGlaDI.jpg"> 
 
      </div> 
 
      <div class="part part-6"> 
 
       <img src="http://i.imgur.com/CuTgGME.jpg"> 
 
      </div> 
 
      </div> 
 

 
      <div class="part-spacer spacer-bottom"> 
 
      <div class="part-background-light"></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!-- special-scroll -- end --> 
 
    <div class="content"> 
 
    </div>