更改滚动颜色的背景位置水平过渡 jQuery/CSS

Question

我最近看到这个网站 - https://www.wokine.com/ - 在 scroll() 上，背景位置从具有两种颜色的线性渐变变为从屏幕上滑出一种颜色。我了解了他们如何使用线性渐变创建分色，但我无法弄清楚他们是如何使用红色 'pushing' 水平离开屏幕的白色制作动画的。

这是我最近尝试过的事情之一。最终，我想在滚动时进行操作，但我现在尝试在单击时进行操作。我将悬停样式保留在那里进行测试。

$(document).ready(function() {
  $("button").click(function() {
    $(".box").css('background-position': 'left');
  });
});

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-size: 200% 200%;
  transition: background-position 1s;
  background-image: linear-gradient(to right, blue 50%, green 0);
  background-position: right;
}

.box:hover {
  background-position: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="box"></div>
<br>
<button>Toggle background position</button>

Answer 1

根据您分享的 link，我正在使用 Scroll 事件，据我了解，这是您的最终目标。

所以我们可以使用 $(document).ready() 或 $(window).on('load',.. 来启动第一个动画，使用 class .intro.

然后根据滚动方向，我们在两个 classes .slideleft 和 .slideright 之间切换。如果这是对 class 名称的混淆选择，您可以称它们为 Up 和 Down。

$(document).ready(function() {
  $('.box').addClass('intro');
});
(function() {
  var lastScroll = 0;
  $(window).on('scroll', function() {
    if ($(".box").is(".intro")) {
      $('.box').removeClass('intro');
    }
    var activeScroll = $(this).scrollTop();
    //We check the scroll direction
    cond = Boolean(activeScroll > lastScroll);
    //each background sliding effect follow it's scroll direction
    $(".box").toggleClass('slideleft', cond); //DownScroll
    $(".box").toggleClass('slideright', !cond); //UpScroll
    lastScroll = activeScroll;
  });
}());

.box {
  width: 100%;
  height: 200px;
  display: inline-block;
  background-size: 200% 200%;
  transition: background-position 1s;
  background-image: linear-gradient(to right, #ff5851 50%, #F8F8F8 50%);
  background-position: left;
}

.intro {
  background-position: 50%;
}

.slideleft {
  background-position: left center;
}

.slideright {
  background-position: center center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<div class="lorem">
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>

更改滚动颜色的背景位置水平过渡 jQuery/CSS

Change background-position horizontal transition for color on scroll jQuery/CSS

css

jquery

scroll

background-color

background-position