视差效果

<div 
    class="imgH"
    data-target="page1"
    id="page1"
></div>
<div 
    class="banner"
    
    data-skrollr
    data-page1-0="transform: translateY(0%);"
    data-page1-1000="transform: translateY(-50%);"
>
    <div class="item">
        <div class="pic">
            <img src="images/a1.jpg" alt="" class="bg">
            <div class="txt">
                <div class="wp">
                    <div class="tit wow fadeInUp">
                        <p>Aulis</p>
                        <p> Ventures</p>
                    </div>
                    <div class="desc wow fadeInUp">
                        <p>We’re passionate about the transformative</p>
                        <p> potential of blockchain technology</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="main-idx">
    <div class="row-a1">
        <div class="wp">
            <div class="m-a1">
                <div class="txt">
                    <div class="desc">
                        <p>Aulis Ventures is an early-stage investment firm that focuses on blockchain technology and
                            cryptocurrency, currently managing approximately US$80m in assets.</p>
                    </div>
                    <a href="" class="g-morea1 g-btnanim">
                        <span class="g-anim"></span>
                        <span class="t1"> Learn More</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/skrollr/custom_slide.js"></script>
<script type="text/javascript" src="js/skrollr/skrollr.min.js"></script>
<script type="text/javascript" src="js/skrollr/relate-skrollr.js"></script>


<script type="text/javascript">
    $(document).ready(function() {
        if($(window).width() >= 1200) {
            var s = skrollr.init({
        
                edgeStrategy: 'set',
        
                smoothScrolling: true,
        
                mobileCheck: function () {
                    return false;
                },
                constants: constants,
        
                easing: {
        
                    WTF: Math.random,
        
                    inverted: function (p) {
        
                        return 1 - p;
        
                    }
        
                }
        
            });
        }
    })



</script>

元素添加data-target代表，相对于这个元素顶部位置进行操作，里边放自身的id值。

<div 
    class="imgH"
    data-target="page1"
    id="page1"
></div>

需要做视差的元素添加下边三个属性

第一个属性data-skrollr代表该元素需要做视差效果

第二个属性data-page1-0，page1代表相对于#page1这个元素顶部位置，0代表，页面滚动距离到page1顶部 + 0的位置，后边的值代表css属性的变化，有多个的话，加分号

第三个属性data-page1-1000，page1和上一条相同，1000代表滚动一屏（会根据屏幕自动计算，1000代表就是1屏，如果需要从0到两屏幕之间渐变，值应该是1000 * 2），页面滚动距离到page1顶部 + 1000的位置，后边的值代表css属性的变化，有多个的话，加分号

data-page1-[number]可以有多条，根据滚动距离做复杂动效，number可以是负值，用于页面刚从下边出现时或者滚动到中间时做动画，需要注意，属性的值格式必须是一致的，如translateY(0px)后边的属性值，如果需要渐变的话，单位必须也是px，如果是百分比的话，值必须是百分比，否则动效不生效

    data-skrollr
    data-page1-0="transform: translateY(0%);"
    data-page1-1000="transform: translateY(-50%);"

1691467160000.zip

效果链接

http://test.h5.org.cn/fanqie/aulis/index.html 视差效果

http://14.celong.cn/ 复杂效果（js文件比较老，建议用该文档的）

https://github.com/Prinzhorn/skrollr

使用插件链接（基于此插件改的，该插件不支持响应式）需要其他功能可以参考这个组件文档