【css3d动画】react+ts实现3d旋转环绕banner效果

最新推荐文章于 2024-10-13 08:49:06 发布

Mr.温m_

最新推荐文章于 2024-10-13 08:49:06 发布

阅读量619

点赞数

分类专栏： React 文章标签： react.js css3 3d

本文链接：https://blog.youkuaiyun.com/weixin_44216510/article/details/129626643

版权

静态效果图

在这里插入图片描述

功能

拖动后会默认居中当前最靠近中间元素
点击靠近中间位置的左右两个元素可以切换剧中元素
可选择hover时添加视频动画

代码

import React, {
    useState, MouseEvent, useMemo, useEffect } from 'react';
import {
    useEventListener, useThrottleFn } from 'ahooks';
import cx from './index.module.less';
// 采用了classNames的样式写法

interface Props {
   
  imgWidth: number;
  imgHeight: number;
}
interface ListItem {
   
  img: string;
  video: string;
  index: number;
}

const imgList = [
  {
   
    img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRc-daxzQsmo3cQ7M0TM4hOz3pX-1WKzB-V-w&usqp=CAU',
    video: '',
  },
  {
   
    img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQXhun_JTTMmKDhvGv0vELHx41BS5hVL58mDA&usqp=CAU',
    video: '',
  },
  {
   
    img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1kno3P3RqG6qB-uJYBlglsznLVf4XLY_34A&usqp=CAU',
    video: '',
  },
  {
   
    img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTz-VVabwdSkWiTFe4WTzj1WkD3ILkrEV0dQw&usqp=CAU',
    video: '',
  },
  {
   
    img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRc-daxzQsmo3cQ7M0TM4hOz3pX-1WKzB-V-w&usqp=CAU',
    video: '',
  },
  {
   
    img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQXhun_JTTMmKDhvGv0vELHx41BS5hVL58mDA&usqp=CAU',
    video: '',
  },
  {
   
    img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1kno3P3RqG6qB-uJYBlglsznLVf4XLY_34A&usqp=CAU',
    video: '',
  },
  {
   
    img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTz-VVabwdSkWiTFe4WTzj1WkD3ILkrEV0dQw&usqp=CAU',
    video: '',
  },
  {
   
    img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRc-daxzQsmo3cQ7M0TM4hOz3pX-1WKzB-V-w&usqp=CAU',
    video: '',
  },
  {
   
    img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQXhun_JTTMmKDhvGv0vELHx41BS5hVL58mDA&usqp=CAU',
    video: '',
  },
];

export const Banner3D = ({
    imgWidth = 400, imgHeight = 400 }: Props) => {
   
  const [clientWidth, setClientWidth] = useState(document.documentElement.clientWidth);
  // 鼠标是否处于拖动状态
  const [mouseDrag, setMouseDrag] = useState(false);
  // 鼠标拖动距离
  const [mouseX, setMouseX] =