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

Question

我最近看到了这个网站-https://www.wokine.com/-在scroll（）上，背景位置从具有两种颜色的线性渐变更改为将一种颜色滑出屏幕。我了解了他们如何创建具有线性渐变的拆分颜色，但是我无法弄清楚它们是如何通过将红色水平地“推”白色出屏幕来制作动画的。

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

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

按照您共享的链接，我正在使用Scroll事件，根据我的理解，这是您的最终目标。

所以我们可以使用$(document).ready()或$(window).on('load',..使用类.intro从第一个动画开始初始化。

---

然后根据滚动方向，我们在两个类别.slideleft和.slideright之间切换。如果这是一个令人困惑的类名选择，则可以将它们命名为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>