照片墙滚动

<div class="ipart02"> 
    <div class="container2"> 
    
        <div class="infor"> 
            <div class="wrap"> 
                <div class="solu-tyxt">
                    <h3>Solution</h3>
                    <p>To provide customers with product-level intelligent manufacturing and intelligent logistics solutions</p>
                    <div class="solu-more">
                        <a href="<!--{$url_index}-->p/mater1.html">Intelligent logistics</a>
                        <a href="<!--{$url_index}-->p/mater2.html">Intelligent manufacturing</a>
                    </div>
                </div>
            </div> 
        </div>
      
        <div class="content"> 
          <ul class="list"> 
            <li class="row row01" style="transform: translate3d(-6.6422%, 0px, 0px);"> 
                <ul class="fix"> 
                    <!--{foreach $app->ads->find(32) as $volist}-->
                    <li class="item"> <img src="<!--{$volist.uploadfiles}-->" alt="<!--{$volist.adsname}-->" /> </li> 
                    <!--{/foreach}-->
                </ul> 
            </li> 
            <li class="row row02" style="transform: translate3d(6.6422%, 0px, 0px);"> 
                <ul class="fix"> 
                    <!--{foreach $app->ads->find(33) as $volist}-->
                    <li class="item"> <img src="<!--{$volist.uploadfiles}-->" alt="<!--{$volist.adsname}-->" /> </li> 
                    <!--{/foreach}-->
                </ul> 
            </li> 
            <li class="row row03" style="transform: translate3d(-6.6422%, 0px, 0px);"> 
                <ul class="fix"> 
                    <!--{foreach $app->ads->find(34) as $volist}-->
                    <li class="item"> <img src="<!--{$volist.uploadfiles}-->" alt="<!--{$volist.adsname}-->" /> </li> 
                    <!--{/foreach}-->
                </ul> 
            </li> 
          </ul> 
        </div> 
     
    </div> 
</div>


.ipart02{position:relative;height:100vh;overflow:hidden}
.ipart02 .container2{position:absolute;top:0;left:0;width:100%;height:100%}
.ipart02 .container2 .infor{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:100%;text-align:center}
.ipart02 .container2 .infor .solu-tyxt h3{font-size:54px;line-height:1;color:#fff;font-weight:700}
.ipart02 .container2 .infor .solu-tyxt p{font-size:20px;line-height:1;color:#fff;font-weight:400;margin-top:20px}
.solu-more{position:relative;margin:3vw 0;display:flex;justify-content:center;align-items:center}
.solu-more a{position:relative;display:flex;align-items:center;justify-content:center;width:290px;line-height:55px;border:1px solid #fff;margin:0 10px;font-size:16px;color:#fff;z-index:99;-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s;border-radius:30px}
.solu-more a i{width:20px;height:20px;background:url(../images/j-more.png) no-repeat center;margin-left:10px;display:block;-webkit-transition:-webkit-transform .2s ease;transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}
.solu-more a:nth-child(1){color:#fff;border-color:#b71b2b;background:#b71b2b linear-gradient(to bottom,#c31426,#8d0614)}
.solu-more a:nth-child(2):hover{-webkit-transform:translateY(-5px);transform:translateY(-5px)}
.solu-more a:nth-child(2):hover i{-webkit-transform:translate(4px,-4px);transform:translate(4px,-4px)}
.ipart02 .container2 .content{position:relative;height:100%;z-index:1}
.ipart02 .container2 .content::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.42);z-index:1}
.ipart02 .container2 .list{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;transform:rotate(-10deg) scale(1.3)}
.ipart02 .container2 .list .row{height:31.83%;margin-top:1.5%}
.ipart02 .container2 .list .row ul{height:100%}
.ipart02 .container2 .list .row .item{float:left;position:relative;width:23.5%;height:100%;margin-right:1.5%;border-radius:30px;background:#000;overflow:hidden}
.ipart02 .container2 .list .row .item img{max-width:none;width:100%;height:100%;object-fit:cover}


<script src="<!--{$skinpath}-->assets/js/gsap.js"></script>
<script src="<!--{$skinpath}-->assets/js/scrolltrigger.js"></script>
    
    
<script>
    // 等待文档准备好
    document.addEventListener("DOMContentLoaded", function () {
        photoWallScroll();
    });

    // 照片墙滚动
    function photoWallScroll() {
        gsap.set('.ipart02 .container2 .list .row01', { x: '15%' });
        gsap.set('.ipart02 .container2 .list .row02', { x: '-15%' });
        gsap.set('.ipart02 .container2 .list .row03', { x: '15%' });

        var tl = gsap.timeline({
            scrollTrigger: {
                trigger: '.ipart02',
                start: 'top bottom',
                end: 'bottom top',
                scrub: 0.8
            }
        });

        tl.to('.ipart02 .container2 .list .row01', { x: '-15%', ease: 'none' }, 0);
        tl.to('.ipart02 .container2 .list .row02', { x: '15%', ease: 'none' }, 0);
        tl.to('.ipart02 .container2 .list .row03', { x: '-15%', ease: 'none' }, 0);
    }
</script>