Question

我有一些javascript，可以让我的横幅中的文字效果更慢，并且当横幅的底部向上滚动以满足它时消失。

function scrollBanner() {
  //Get the scoll position of the page
  scrollPos = $(this).scrollTop();

  //Scroll and fade out the banner text
  $('#bannerText').css({
    'margin-bottom' : -(scrollPos/3)+"px",
    'opacity' : 1-(scrollPos/300)
  });

}

我现在正试图用css3实现这一点，因为这种方式不适用于移动设备有很多原因。

我尝试过用css翻译失败了。文本将在div中滚动，但页面不会。或者我可以滚动页面，文本会保持锁定位置，并且不会以较慢的速度滚动。

CSS

.banner .parallax {
  perspective: 1px;
  overflow-y: auto;
  height: 440px;
  position: relative;
  clear: both;
}

.banner .parallax .parallax-container{
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) translateZ(-2px) scale(1);
}

HTML

<section class="banner features-banner">
    <div class="banner-inner parallax">
        <div class="parallax-container">
            <h1 class="feature-primary-heading">FEATURE TOUR</h1>
        </div>
    </div>
</section>

css3 div容器内的速度较慢

0 个答案: