视觉差缓动效果的轮播--React版

React实现视觉差效果缓动轮播

效果如下(图片帧率低看起来有点卡顿,看个大概就行):

分享一下思路:
1.正常引入一个轮播组件(站在巨人肩膀省时省力),去除指示点、引导箭头等不需要的元素,有些组件支持配置,不支持就手动覆盖CSS样式了
2.找到组件中用于显示展示当前图片的类名
3.添加transform效果和transition属性

实操:

1.配置轮播组件,因为项目使用的ant design,所以这里直接使用Carousel组件

(Carousel组件也是封装自React Slickhttps://react-slick.neostack.com/,也可以直接使用这个)

复制代码
import {Carousel} from 'antd';
import style from './index.less';
import loginBgOne from "@/assets/images/login_bg_one.jpg";//背景图
import loginBgTwo from "@/assets/images/login_bg_two.png";

const TestPage= () => {
  const carouselSetting = {
    effect: 'fade', //动画效果:渐显
    autoplay: true,
    autoplaySpeed: 5000, //自动播放速度(每张图的展示时间)
    dots: false,
    draggable:false,
    speed: 1500, //切换动画速度
  };

  return (
    <div className={style.pageBox}>
      <Carousel {...carouselSetting}>
        <div className={style.imgBox}>
          <img src={loginBgOne} />
        </div>
        <div className={style.imgBox}>
          <img src={loginBgTwo} />
        </div>
      </Carousel>
     {/*随便搞点字,效果更明显*/}
      <div className={style.systemName}>ZYJ's BOLG</div>
      <div className={style.desBox}>
        <p className={style.titleOne}>跨越山海·不舍自由与爱</p>
        <p className={style.titleTwo}>天行健 君子以自强不息</p>
      </div>
    </div>
  );
};
export default TestPage;

2.打开控制台,找到组件展示当前图片的类名,添加样式,carousel中是.slick-current

复制代码
//添加缩放属性,并配置过渡。加500ms延迟看起来不那么生硬
:global {
  .ant-carousel .slick-list .slick-slide.slick-current img {
    transform: scale(1.15, 1.15);
    transition: 5.5s ease-in 500ms;
  }
}

至此,其实已经实现效果了。但是在图片切换的动画期间,放大的图片会由于丢失样式瞬间回到一倍大小,感官上有顿挫感。虽然可以加快切换动画的速度,但就显得不丝滑。(毕竟咱们是追求优雅的人,233)

解决办法还是transition属性,通过给不活跃的图片设置一个一倍缩放,再加一个延迟。在切换动画期间就看不到缩小了

复制代码
.imgBox {
  width: 100%;
  img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    pointer-events: none;
    //关键
    transform: scale(1, 1);
    transition: 1s ease-in 1000ms;
  }
}
相关推荐
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
前端风云志20 小时前
Ant Design如何自定义输入框(Input)组件样式
react·ant design
爱看书的小沐2 天前
【小沐杂货铺】基于Three.JS绘制汽车展示Car(WebGL、vue、react、autoshow、提供全部源代码)
汽车·vue3·react·webgl·three.js·opengl·autoshow
Crazy Struggle7 天前
.NET 9 + React 开发的企业级后台权限管理系统,文档齐全,轻松上手
react·权限管理系统·后台管理系统·.net 9.0
Python私教10 天前
FastAPI+React19 ERP系统实战 第01期
react·fastapi
一笑code11 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
ZHOU_WUYI23 天前
GitHub OAuth 认证示例
flask·github·react
SuperherRo24 天前
Web攻防-XSS跨站&浏览器UXSS&突变MXSS&Vue&React&Electron框架&JQuery库&写法和版本
vue.js·electron·jquery·react·xss·mxss·uxss
飞鸟malred25 天前
nextjs入门
前端·react·nextjs
aiguangyuan1 个月前
React 动态路由的使用和实现原理
react·前端开发