Question

所以我有点儿起作用了。我相信我无法正确理解javascript。

我从另一个线程获得了这个信息，但是它并没有达到我试图实现的目的。我看到这些变量是一个基于窗口高度的运动的数学方程。

如何操纵方程式，以便可以控制“ Some cool text。”的初始位置（如果在加载时注意到它占据了正确的位置，然后在滚动时被JS移动了）留在我想要的地方吗？
什么控制运动的速度和强度，我该如何操纵？

我相信我只是不了解控制所有这些变量的语法，您能为我指明正确的方向以便阅读一些理解这些特定变量的内容吗？谢谢。：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处理滚动效果。

如果要使用下面的代码，则需要将文本包装在具有 Introduction

类的元素中

在页面滚动时，元素会将样式动态添加到元素。

<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/

希望这会有所帮助！

对滚动文本的水平视差效果

1 个答案: