jquery - 文本不透明度在视口(viewport)边缘淡化

Question

我试图让 .title 在靠近屏幕顶部/底部时淡出。我认为问题在于 Jquery 文档定位。如您所见，最初的淡入淡出效果很好，但文本在靠近顶部/底部时不会淡出。

可以查看codepen 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>

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