Изменить горизонтальный переход положения фона для прокрутки цвета jQuery / CSS - PullRequest
Новая
       41

Изменить горизонтальный переход положения фона для прокрутки цвета jQuery / CSS

0 голосов
/ 23 февраля 2020

Я недавно видел этот веб-сайт - https://www.wokine.com/ - где при прокрутке () положение фона меняется с линейного градиента на два цвета, чтобы сдвинуть один цвет за пределы экрана. Я узнал, как они создали разделенные цвета с линейным градиентом, но я не могу понять, как они делают анимацию, когда красный цвет «отталкивает» белый цвет от экрана по горизонтали.

Вот одна из последних вещей, которые я пробовал. В конечном счете, я хочу сделать это с помощью прокрутки, но сейчас я пробовал это делать по клику. Я держал стиль наведения там для тестирования. 

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

1 Ответ

0 голосов
/ 23 февраля 2020

По ссылке, которой вы поделились, я использую событие прокрутки, и это ваша конечная цель, насколько я понимаю.

Таким образом, мы можем использовать $(document).ready() или $(window).on('load',.., чтобы начать с первой анимации, используя класс .intro.

Затем в зависимости от направления прокрутки мы переключаемся между двумя классами .slideleft и .slideright. Если это неправильный выбор имен классов, вы можете называть их Вверх и Вниз. 

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