Question

当它接近屏幕的顶部/底部时，我试图让.title褪色。我认为问题在于Jquery文档的目标。正如您所看到的，初始淡入淡出效果非常好，但是当文本接近顶部/底部时，文本不会褪色。

您可以查看代码集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元素而不是文档。我还将调用移至scrollBanner()

中的$(document).ready

＆＃13;

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

＆＃13;

/* 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);
}

＆＃13;

<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>

＆＃13;

通过更改，我的代码可以运行。它可能不是你打算如何工作，但它正在发挥作用。

在视口边缘处文本不透明度渐变

1 个答案: