文本不透明度在视口边缘淡化

Question

我试图让 .title 在靠近屏幕 top/bottom 时淡出。我认为问题在于 Jquery 文档定位。如您所见，初始淡入淡出效果很好，但文本在接近 top/bottom.

时不会淡入淡出

您可以查看代码笔here。

如有任何帮助，我们将不胜感激！

    function scrollBanner() {
      $(document).scroll(function() {
        var scrollPos = $(this).scrollTop();
        $('.title').css({
          'top': (scrollPos / 3) + 'px',
          'opacity': 1 - (scrollPos / 100)
        });
        $('.title').css({
          'background-position': 'center ' + (-scrollPos / 200) + 'px'
        });
      });
    }
    scrollBanner();

    $(document).ready(function() {
      $(".title").delay(1000).hide().fadeIn(2000);
    });

/* Parallax base styles
  --------------------------------------------- */

.parallax {
  height: 500px;
  /* fallback for older browsers */
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 300px;
  -webkit-overflow-scrolling: touch;
  perspective: 300px;
}
.parallax__group {
  position: relative;
  height: 500px;
  /* fallback for older browsers */
  height: 100vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.parallax__layer--fore {
  -webkit-transform: translateZ(90px) scale(.7);
  transform: translateZ(90px) scale(.7);
  z-index: 1;
}
.parallax__layer--base {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 4;
}
.parallax__layer--back {
  -webkit-transform: translateZ(-300px) scale(2);
  transform: translateZ(-300px) scale(2);
  z-index: 3;
}
.parallax__layer--deep {
  -webkit-transform: translateZ(-600px) scale(3);
  transform: translateZ(-600px) scale(3);
  z-index: 2;
}
/* demo styles
  --------------------------------------------- */

body,
html {
  overflow: hidden;
}
body {
  font: 100% / 1.5 Arial;
}
* {
  margin: 0;
  padding: 0;
}
.parallax {
  font-size: 200%;
}
/* centre the content in the parallax layers */

.title {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/* style the groups
  --------------------------------------------- */

#group1 {
  z-index: 5;
  /* slide over group 2 */
}
#group1 .parallax__layer--base {
  background: rgb(102, 204, 102);
}
#group2 {
  z-index: 3;
  /* slide under groups 1 and 3 */
}
#group2 .parallax__layer--back {
  background: rgb(123, 210, 102);
}

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

<div class="parallax">
  <div id="group1" class="parallax__group">
    <div class="parallax__layer parallax__layer--base">
      <div class="title">Base Layer Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tellus risus, vestibulum non neque ut, consectetur fermentum neque. Nam pharetra tellus pulvinar ante suscipit dapibus. Quisque pharetra libero vel lectus placerat laoreet.</div>
    </div>
  </div>
  <div id="group2" class="parallax__group">
    <div class="parallax__layer parallax__layer--base">
      <div class="title">Base Layer</div>
    </div>
    <div class="parallax__layer parallax__layer--back">
      <div class="title">Background Layer</div>
    </div>

  </div>

Answer 1

我仔细查看了您的代码并运行它在 jsfiddle 中，并弄清楚了滚动事件未触发的原因。我将 $(document).scroll 更改为 $('.parallax').scroll 因为您实际上滚动的是 .parallax 元素而不是文档。我还将呼叫移到了 $(document).ready

中的 scrollBanner()

function scrollBanner() {
  $('.parallax').scroll(function() {
    var scrollPos = $(this).scrollTop();
    $('.title').css({
      'top': (scrollPos / 3) + 'px',
      'opacity': 1 - (scrollPos / 100)
    });
    $('.title').css({
      'background-position': 'center ' + (-scrollPos / 200) + 'px'
    });
  });
}

$(document).ready(function() {
  $(".title").delay(1000).hide().fadeIn(2000);

  scrollBanner();
});

/* Parallax base styles
  --------------------------------------------- */

.parallax {
  height: 500px;
  /* fallback for older browsers */
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 300px;
  -webkit-overflow-scrolling: touch;
  perspective: 300px;
}
.parallax__group {
  position: relative;
  height: 500px;
  /* fallback for older browsers */
  height: 100vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.parallax__layer--fore {
  -webkit-transform: translateZ(90px) scale(.7);
  transform: translateZ(90px) scale(.7);
  z-index: 1;
}
.parallax__layer--base {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 4;
}
.parallax__layer--back {
  -webkit-transform: translateZ(-300px) scale(2);
  transform: translateZ(-300px) scale(2);
  z-index: 3;
}
.parallax__layer--deep {
  -webkit-transform: translateZ(-600px) scale(3);
  transform: translateZ(-600px) scale(3);
  z-index: 2;
}
/* demo styles
  --------------------------------------------- */

body,
html {
  overflow: hidden;
}
body {
  font: 100% / 1.5 Arial;
}
* {
  margin: 0;
  padding: 0;
}
.parallax {
  font-size: 200%;
}
/* centre the content in the parallax layers */

.title {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/* style the groups
  --------------------------------------------- */

#group1 {
  z-index: 5;
  /* slide over group 2 */
}
#group1 .parallax__layer--base {
  background: rgb(102, 204, 102);
}
#group2 {
  z-index: 3;
  /* slide under groups 1 and 3 */
}
#group2 .parallax__layer--back {
  background: rgb(123, 210, 102);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax">
  <div id="group1" class="parallax__group">
    <div class="parallax__layer parallax__layer--base">
      <div class="title">Base Layer Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tellus risus, vestibulum non neque ut, consectetur fermentum neque. Nam pharetra tellus pulvinar ante suscipit dapibus. Quisque pharetra libero vel lectus placerat laoreet.</div>
    </div>
  </div>
  <div id="group2" class="parallax__group">
    <div class="parallax__layer parallax__layer--base">
      <div class="title">Base Layer</div>
    </div>
    <div class="parallax__layer parallax__layer--back">
      <div class="title">Background Layer</div>
    </div>

  </div>
</div>

通过我所做的更改，您的代码可以正常工作。这可能不是您想要的工作方式，但它正在工作。

文本不透明度在视口边缘淡化

Text opacity fade when at edge of viewport

html

css

jquery

viewport

opacity