Small program carousel map realizes animation from far to near

Build a resource server

1. Install serve globally:npm install -g serve
2. Create a new folder anywhere you want: resources. Create a new folder under resources: images, which is used to store static image resources.
3. Start server: serve resources.

applet project

The files involved in the code are:

1. index.html
2. index.wxss
3. index.js

index.html

<view class="swiper-container">
    <swiper style="height:{ 
        { 
        swiperH}}" class="swiper" bindchange="handleChange" autoplay circular duration="1500" bindtransition="handleTransition" bindanimationfinish="handleAnimationFinish">
        <swiper-item wx:for="{
     
     {imgList}}" wx:key="id" class="swiper-item">
            <view class="box">
                <image src="{
     
     {item.url}}" bindload="getHeight" style="height:{ 
        { 
        swiperH}}" class="img {
     
     {index===curIndex?'image-use-animate':'image-unuse-animate'}}"></image>
                <view class="box-title {
     
     {index===curIndex?'title-use-animate':'title-unuse-animate'}}">{
   
   {item.title}}</view>
            </view>
        </swiper-item>
    </swiper>
</view>

index.wxss

page{
    
    
    height: 100%;
    width: 100%;
    padding: 0 10rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiper-container{
    
    
    width: 100%;
    border-radius: 10rpx;
    overflow: hidden;
}
.swiper-item .img{
    
    
    width: 100%;
    transform-style: preserve-3d;
    transform: translateZ(0);
}
.image-use-animate{
    
    
    animation: depthOfFocus 3s 1s ease-in-out both;
}
.image-unuse-animate{
    
    
    animation: none;
}
.box{
    
    
  width: 100%;
  height: 100%;
  perspective: 300rpx;
  overflow: hidden;
}
.box-title{
    
    
    position: absolute;
    left: 0;
    right: 0;
    font-size: 36rpx;
    text-align: center;
    color: #fff;
}
.title-use-animate{
    
    
    animation: bounceInUp .5s linear .5s both;
}
.title-unuse-animate{
    
    
    animation: none;
}
@keyframes depthOfFocus{
    
    
  100% {
    
    
    transform: translateZ(60rpx);
  }
}
@keyframes bounceInUp{
    
    
    to{
    
    
      bottom: 10rpx;
    }
    from{
    
    
        bottom: -50rpx;
    }
}

index.js

const host = "http://localhost:3000"
Page({
    
    
    data:{
    
    
        swiperH:0,
        imgList:[
            {
    
    id:"001",url:host+'/images/1.jpg',title:"公司简介"},
            {
    
    id:"002",url:host+'/images/2.jpg',title:"愿景及使命"},
            {
    
    id:"003",url:host+'/images/3.jpg',title:"发展历程"},
            {
    
    id:"004",url:host+'/images/4.jpg',title:"业务架构"},
            {
    
    id:"005",url:host+'/images/5.jpg',title:"管理团队"}
        ],
        curIndex:0
    },
    getHeight:function(e){
    
    
        var winWid = wx.getSystemInfoSync().windowWidth;//获取当前屏幕的宽度
        var imgh = e.detail.height;//图片高度
        var imgw = e.detail.width;
        var sH = winWid * imgh / imgw + "px"
        this.setData({
    
    
          swiperH: sH//设置高度
        })
      },
      handleChange(event){
    
    
        //轮播开始
      this.setData({
    
    curIndex:event.detail.current});
    },
    handleTransition(event){
    
    
        //轮播过程
    //   console.log("enter transition",event);
    },
    handleAnimationFinish(event){
    
    
        //轮播结束
    //   console.log("enter animation finish",event);
    }
})

Related Links

css realizes the effect of moving elements from far to near,
the swiper carousel image rounded corners will slide into right angles and then return to rounded corners