javascript - 我如何制作像这个网站 http://ejosue.com 这样的滑动框

Question

所以，我想做一个像这个网站一样的滑动框：http ://ejosue.com?Sorry ，但这是我第一次在 Stack Overflow 上提出问题，

标签： javascript

Answer 1

此代码取自可通过 google 搜索找到的许多示例！

来源：https ://codepen.io/villefalkenmark/pen/jbQKYv

    $(window).on('scroll', function() {

      $('.flip').each(function() {

        var scrollTop = $(window).scrollTop(),
          parentElementOffsetTop = $(this).parent().offset().top,
          parentDistanceTop = (parentElementOffsetTop - scrollTop);
        var elementHeight = $(this).height();
        var distanceBottom = (parentDistanceTop + elementHeight);
        var opacity = (distanceBottom / elementHeight);
        var rotateSpeed = ((parentDistanceTop / 8).toFixed(2) * -1);

        if (rotateSpeed <= 0) {
          rotateSpeed = 0;
        } else if (rotateSpeed >= 90) {
          rotateSpeed = 90;
        }
        $(this).find(".pixel-counter").html(distanceBottom + "px is the parents bottom-               distance to top of viewport");
        $(this).css({
          "transform": " translateY(0px)  rotateX(" + rotateSpeed + "deg)",
          "opacity": opacity
        });
      });
    });

* {
  margin: 0;
}

.container {
  font-family: Arial;
  width: 100%;
  margin: 0 auto;
  position: relative;
  background-color: rgb(48, 48, 48);
}

.flip-parent {
  position: relative;
  perspective: 1200px;
  vertical-align: baseline;
  margin-bottom: -0px;
}

.flip {
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  /* transform-origin: center bottom; */
  
  box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
  scale: (1);
  transform: translateY(0px);
  height: 800px;
  width: 100%;
  color: white;
  font-size: 24px;
  /* CENTER OUR CONTENT  */
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.flip:before {
  width: 100%;
  z-index: 2;
  text-transform: uppercase;
}

#first {
  background-color: #D64541;
}

#second {
  background-color: #59ABE3;
}

#third {
  background-color: #E08283;
}

#fourth {
  background-color: #E08283;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <section>
    <div class="flip-parent">
      <div class="flip" id="first">
        <p class="pixel-counter"></p>
      </div>
    </div>
  </section>
  <section>
    <div class="flip-parent">
      <div class="flip" id="second">
        <!--Since the section is tilting we need a constant linear value from our parent -->
        <p class="pixel-counter"></p>
      </div>
    </div>
  </section>
  <section>
    <div class="flip-parent">
      <div class="flip" id="third">
        <p class="pixel-counter"></p>
      </div>
    </div>
  </section>
  <section>
    <div class="flip-parent">
      <div class="flip" id="fourth">
        <p class="pixel-counter"></p>
      </div>
    </div>
  </section>
</div>