Горизонтальный эффект параллакса для текста на свитке

Question

Так что я вроде как все заработало. Я полагаю, что не правильно понимаю javascript.

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

1. Как я могу манипулировать уравнением, чтобы контролировать исходную позицию «Какой-нибудь классный текст». (если вы заметили, что при загрузке он занимает правильную позицию, а затем при прокрутке перемещается JS), чтобы остаться там, где я хочу?

2. Что контролирует скорость и интенсивность движенияи как я могу манипулировать этим?

Я считаю, что я просто не понимаю синтаксис, который контролирует все эти переменные, можете ли вы указать мне правильное направление для некоторого чтения, чтобы понять эти конкретные переменные? Спасибо. : D

https://jsfiddle.net/codingcrafter/kv9od1ju/22/

/* Custom Horizontal Scrolling Parallax */
.hero-two {
  overflow: hidden;
  position: relative;
  min-height: 500px;
}

h1 {
   -webkit-text-stroke-width: 0.1rem;
   -webkit-text-stroke-color: black;
   color: #fff;
   font-family: 'Open Sans', Helvetica, Times New Roman !important;
   font-weight: 900;
}

.para-ele {
  position: absolute;
  width: 100%;
  font-size: 5rem;
}

#hero-first {
  left: 75%;
  top: 15%;
}

#hero-second {
  left: -32%;
  bottom: 10%;
}

.container {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="hero-two">
    <h1 id="hero-first" class="h1 para-ele">
      Some cool text.
    </h1>
    <h1 id="hero-second" class="h1 para-ele">
      Some boring text.
    </h1>
  </div>
</div>

$(document).ready(function() {
  var $horizontal = $('#hero-first');

  $(window).scroll(function() {
    var s = $(this).scrollTop(),
      d = $(document).height(),
      c = $(this).height();

    scrollPercent = (s / (d - c));

    var position = (scrollPercent * ($(document).width() - $horizontal.width()));

    $horizontal.css({
      'left': position
    });
  });
});

Answer 1

То есть вы хотите переместить текст слева направо или справа налево?

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

ЕслиВы собираетесь использовать приведенный ниже код, вам нужно будет обернуть текст в элементе классом Введение

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

<h1 class="introduction">

WE ARE A <br><span class="d">DIGITAL</span><br>PARTNER

</h1>

$(window).scroll(function() {
    var wScroll = $(this).scrollTop();
    $(".introduction").css({
        transform: "translateX(-" + wScroll / 23 + "%)"
    })
});

Демонстрация: https://guide -nancy-64871.netlify.com / При прокрутке страницы текст заголовка перемещается влево.

Читатьподробнее о преобразовании CSS: https://css -tricks.com / almanac / properties / t / transform /

Надеюсь, это поможет!