1

我已经为本地测试项目安装了 LocomotiveScroll

第一的：

npm install LocomotiveScroll

然后：

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    repeat: true
});

添加了要测试的 HTML 和 CSS，但检测到元素（“is-in-view”）并且 data-scroll-class 工作，但与 data-scroll-speed 无关

<div data-scroll-container>
      <section class="s1" data-scroll-section>
          <h1>Hey</h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium at sunt magnam cum quam natus, recusandae consequuntur voluptate reprehenderit, quis vitae. Eaque pariatur cumque provident, cum animi sapiente deleniti quae?</p>
      </section>
      <section class="s2" data-scroll-section>
          <h2>What's up?</h2>
          <p class="custom-p" data-scroll data-scroll-class="scroll-class">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, at similique nobis nulla sit quos deserunt ipsa voluptates consequatur, molestiae hic perspiciatis illum temporibus qui autem dicta perferendis, distinctio provident.</p>
          <span data-scroll data-scroll-speed="4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, nulla ipsum veniam labore ipsam voluptatem nesciunt voluptatum cum. Sequi molestiae expedita adipisci natus excepturi nesciunt, vel provident neque a perferendis?</span>
      </section>
      <section class="s1" data-scroll-section>
        <h1>Hey</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium at sunt magnam cum quam natus, recusandae consequuntur voluptate reprehenderit, quis vitae. Eaque pariatur cumque provident, cum animi sapiente deleniti quae?</p>
    </section>
  </div>

CSS：

* { box-sizing: border-box; }

body { height: 100vh; background: red; color: #fff; }

section{ height: 100vh; padding: 8rem; }

.s1 { background: blue;}
.s2 { background: green;}

.custom-p{
   opacity: 0;
   transition: all 1s;
   position: relative;
   transform: translateY(60px);
}

.scroll-class{
   opacity: 1;
   transform: translateY(0);
}

有什么建议么？谢谢，任何建议都很重要

4

0 回答 0