1

我正在尝试实现与此示例相同的滚动效果。

第二节

根据文档，我添加了 data-scroll-direction="horizo​​ntal" 但是它相反，向下滚动它从右到左移动但应该是其他方式。也没有得到如何用js控制transform translateX / translateY？如果我想要自定义轨迹怎么办？

HTML：

<main data-scroll-container>
<section class="is-inview" id="top-section" data-scroll>
            </section>
            <section class="is-inview" data-scroll id="rocket-section">
                <div class="direction-block" style="position: absolute;right: 0;left: 0;z-index: 1;">
                    <div style="top:33%;">
                        <div data-scroll-direction="horizontal" data-scroll-direction="bottom" data-scroll-speed="15"
                            data-scroll id="rocket-ship">
                        </div>
                    </div>
                </div>
            </section>
</main>

JS：

const scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      class: 'is-inview',
      smooth: true,
      getDirection: true
 


const scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      class: 'is-inview',
      smooth: true,
      getDirection: true
      // lerp: 0.1,
    });


      scroll.update();
/* !locomotive-scrollv3.6.1|MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
  overflow: hidden;
  position: relative;
}

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.has-scroll-smooth body {
  overflow: hidden;
}

.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh;
}

.c-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 11px;
  height: 100%;
  transform-origin: center right;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
}
.c-scrollbar:hover {
  transform: scaleX(1.45);
}
.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
  opacity: 1;
}

.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #000000;
  opacity: 0.5;
  width: 7px;
  border-radius: 10px;
  margin: 2px;
  cursor: -webkit-grab;
  cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}


section {
  width: 100%;
  height: 100vh;
  padding: 1em;
  position: relative;
  background-color: #000000;
}

#rocket-ship {
  position: relative;
  font-size: 100px;
}
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
    <main data-scroll-container>
<section class="is-inview" id="top-section" data-scroll>
            </section>
            <section class="is-inview" data-scroll id="rocket-section">
                <div class="direction-block" style="position: absolute;right: 0;left: 0;z-index: 1;">
                    <div style="top:33%;">
                        <div data-scroll-direction="horizontal" data-scroll-direction="bottom" data-scroll-speed="15"
                            data-scroll id="rocket-ship">
                        </div>
                    </div>
                </div>
            </section>
</main>

4

0 回答 0