视差效果

少锋 发布于:2023-08-08 04:10:35

基于skrollr插件开发的视差滚动效果,可以做复杂效果

<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

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

觉得有用请点个赞吧!
2 175