Fullpage.js元素以不同的速度水平滚动

问题描述

当使用鼠标/键盘触发自动滚动时，如何使幻灯片中的元素以不同的速度水平滚动？就像视差效果一样，使元素的移动速度比背景快。忘记下面的代码（需要发布），因为由于某种原因它无法正确显示，但是您可以在第二张幻灯片here上看到水平滚动的示例，我只想定位1个元素并使该元素的移动速度快于背景。视差扩展名对此无效，因为背景需要保持原样，我只需要位于顶部的元素即可更快地移动...

$('#fullpage').fullpage({
  sectionsColor: ['#1bbc9b','#4BBFC3','#7BAABE','whitesmoke','#ccddff'],anchors: ['firstPage','secondPage','3rdPage','4thpage','lastPage'],menu: '#menu',slidesNavigation: true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimscroll/1.3.1/jquery.slimscroll.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/jquery.fullPage.min.js"></script>
<ul id="menu">
    <li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
    <li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
    <li data-menuanchor="4thpage"><a href="#4thpage">Fourth slide</a></li>
</ul>

<div id="fullpage">
    <div class="section" id="section0">
        <h1>fullPage.js</h1>
        <p>Create Beautiful Fullscreen Scrolling Websites</p>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/fullPage.png" alt="fullPage" />
    </div>
    <div class="section" id="section1">
        <div class="slide">
            <div class="intro">
                <h1>Create Sliders</h1>
                <p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/slider.png" alt="slider" />
            </div>

        </div>
        <div class="slide">
            <div class="intro">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/1.png" alt="simple" />
                <h1>Simple</h1>
                <p>Easy to use. Configurable and customizable.</p>
            </div>
        </div>
        <div class="slide">
            <div class="intro">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/2.png" alt="Cool" />
                <h1>Cool</h1>
                <p>It just looks cool. Impress everybody with a simple and modern web design!</p>
            </div>
        </div>
        <div class="slide">
            <div class="intro">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/3.png" alt="Compatible" />
                <h1>Compatible</h1>
                <p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
            </div>
        </div>
    </div>
    <div class="section" id="section2">
        <div class="intro">
            <h1>Example</h1>
            <p>HTML markup example to define 4 sections.</p>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/example2.png" alt="example" />
        </div>
    </div>
    <div class="section" id="section3">
        <div class="intro">
            <h1>Working On Tablets</h1>
            <p>
                Designed to fit to different screen sizes as well as tablet and mobile devices.
                <br /><br /><br /><br /><br /><br />
            </p>
        </div>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/tablets.png" alt="tablets" />
    </div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）