Параллакс свиток в обе стороны - PullRequest
Новая
       7

Параллакс свиток в обе стороны

0 голосов
/ 12 февраля 2019

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

Я добился этого с помощью $(document).scrollTop() и вставил вывод в CSS с помощью jQuery: 

var width = $(".horizontalScroller").width() - $(window).width() + $(window).height();

$("body").css("height", width);

$(document).on("scroll", function() {

  var pixels = $(document).scrollTop();

  $(".horizontalScroller").css("left", -1 * pixels);

  $(".info").css({
    "margin-left": -0.5 * pixels
  });

  setTimeout(function() {
    $(".info").css({
      transition: "all 1s",
      "margin-left": "0",
    });
  });
});

Здесь вы можете увидеть, что у меня есть до сих пор:

https://codepen.io/Dennisade/pen/BMVVMr

Я хочу, чтобы эффект работал и в обратном направлении.Я также заметил, что чем дальше я прокручиваю, тем больше эффект.Может быть, у кого-то есть совершенно другое решение, как сделать это гладко.

Я ценю любую помощь здесь.

...