come lasciare il contenitore scorrere verso il basso da cima a fondo

Question

voglio implementare questo effetto html come questo:

da this website

esposizione di immagine da cima a fondo con scorrimento, piuttosto fresco.

ma il mio implementare è:

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

questo è dal basso in alto.

Come posso cambiare l'immagine dall'alto verso il basso con lo scorrimento?

Answer 1

Plunker

Ecco cosa ho fatto per ottenere questo lavoro da cima a fondo:

• Posizionamento - Ogni diapositiva auto ha position: absolute e inizia con bottom: 0% e lo scorrimento rivela lentamente la slitta passando a bottom: 100%. L'eccezione si trova nella terza transizione che si verifica da sinistra a destra e passa da left: -100% a left: 0%.
• Diapositiva corrente - La diapositiva corrente viene calcolata prendendo la posizione di scorrimento e dividendola per l'altezza della vista e quindi arrotondando per difetto in questo modo Math.floor(scrollTop/height).
• percentuale diapositiva corrente - La percentuale corrente per ogni transizione di diapositiva (che viene utilizzato per la transizione degli stili bottom e left) è calcolata da ottenere la quantità di pixel rispetto alla normale posizione di scorrimento corrente utilizzando var partPixels = scrollTop % height;, e dividendo tale dal visualizzare l'altezza e convertire il risultato in una percentuale come questa (partPixels/height) * 100.

Quindi si tratta semplicemente di aggiornare il DOM con gli stili rilevanti ogni volta che cambia la posizione di scorrimento.

Codice completa

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>