how to let the container scroll down from top to bottom

Question

i wanna implement this html effect like this:

from this website

image show from top to bottom with scrolling, pretty cool.

but my implement is :

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

this is from bottom to top.

how can i change the image from top to bottom with scrolling?

Answer 1

Plunker

Here's what I did to get this working from top to bottom:

• Positioning - Each car slide has position: absolute and starts with bottom: 0% and as you scroll it slowly reveals the slide by transitioning to bottom: 100%. The exception is on the third transition that happens from left to right which moves from left: -100% to left: 0%.
• Current slide - The current slide is calculated by taking scroll position and dividing it by the view height and then rounding down like this Math.floor( scrollTop / height ).
• Current slide percentage - The current percentage for each slide transition (which is used for transitioning the bottom and left styles) is calculated by getting the amount of pixels beyond the current slide position using var partPixels = scrollTop % height;, and then dividing that by the view height and converting the result to a percentage like this (partPixels / height) * 100.

Then it's just a matter of updating the DOM with the relevant 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>