How to let a container scroll down from top to bottom

Question

I want to implement this html effect as follows:

from this website

Image shows top to bottom with scrolling, pretty cool.

but my tool:

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

it is from the bottom up.

How can I change the image from top to bottom by scrolling?

Answer 1

Plunker

Here is what I did to get this job top to bottom:

• Positioning . On each slide of the car, it is position: absolute and starts from bottom: 0% , and when you scroll it slowly, you will see a slide going to bottom: 100% . An exception is the third transition, which occurs from left to right, which moves from left: -100% to left: 0% .
• Current slide . The current slide is calculated by taking the scroll position and dividing it by the height of the view, and then rounding it down as follows Math.floor( scrollTop / height ) .
• Current percentage of slides . The current percentage for each slide transition (which is used to transition the bottom and left styles) is calculated by getting the number of pixels outside the current slide position using var partPixels = scrollTop % height; and then dividing this by the height of the view and converting the result to a percentage such as this (partPixels / height) * 100 .

Then it's just a matter of updating the DOM with the appropriate styles whenever the scroll position changes.

Full code

 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>