dedecms三合一网站源码,聚财的公司名字大全,网页ui设计图,鄂州网格员招聘前言
最近#xff0c;我看到一个工程师的个人网站上#xff0c;采用了拖拽作品集的互动特效#xff0c;既有趣又吸引眼球。经过一些研究#xff0c;我发现其实借助一些现成的套件#xff0c;就能轻松实现这样的效果。今天就带大家一起看看#xff0c;如何通过 Framer Mo…前言
最近我看到一个工程师的个人网站上采用了拖拽作品集的互动特效既有趣又吸引眼球。经过一些研究我发现其实借助一些现成的套件就能轻松实现这样的效果。今天就带大家一起看看如何通过 Framer Motion 来制作这个特效吧
安装 React Framer Motion
我将使用 React 和 Framer Motion 来实现这个特效。首先用 Vite 来快速搭建一个 React 开发环境
npm create vitelatest my-react-app -- --template react
执行完成后就依序执行以下指令分别是
cd my-react-app : 移动到 my-react-app 资料夹npm install : 安装相关依赖npm run dev : 执行
cd my-react-app
npm install
npm run dev
打开浏览器访问 http://localhost:5173你应该会看到一个基础的 React 应用如下图。
并且也可以看到你的资料夹结构如果只是想练习这个特效直接改 App.jsx 就好
下一步就是安装 Framer Motion直接在终端机打上以下指令就好
npm install framer-motion
引入图片 创建容器
我们将图片保存在 ./public/drag-img/ 文件夹中并用数组来存储图片路径。通过 Array.map() 方法我们可以轻松地渲染出所有的图片。
const images [/drag-img/image-1.png,/drag-img/image-2.png,/drag-img/image-3.png,/drag-img/image-4.png,/drag-img/image-5.png,/drag-img/image-6.png,/drag-img/image-7.png,/drag-img/image-8.png,/drag-img/image-9.png,/drag-img/image-10.png,/drag-img/image-11.png,/drag-img/image-12.png,/drag-img/image-13.png,/drag-img/image-14.png,
];
然后我们创建一个容器来存放这些图片。为了方便后续操作我们使用 useRef 来引用容器以便后面获取容器的宽高。
export default function DragImg() {const containerRef useRef(null);return (divref{containerRef}classNamedrag-img__container{/* 图片渲染 */}/div);
}
接下来稍微修改一下style样式
.drag-img__container {position: relative;width: 100vw;height: 100vh;overflow: hidden;background: #f0f0f0;
} 渲染图片 随机位置
通过刚才定义的 images 数组来渲染所有图片。这里使用的是 motion.img 标签这样才能使用 Framer Motion 提供的动画和交互功能。
export default function DragImg() {const containerRef useRef(null);return (divref{containerRef}classNamedrag-img__container{images.map((src, index) (motion.imgkey{index}src{src}classNamedrag-img__imgalt{Image ${index 1}}/))}/div);
}
.drag-img__img {width: 200px;aspect-ratio: 4/3;object-fit: contain;padding: 4px;position: absolute;background: rgba(255, 255, 255, 0.2);border-radius: 6px;box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);cursor: grab;
} 稍微调整图片的宽度、比例并让他的 position 是 absolute其他就是一些小装饰例如 padding、shadow 等等现在所有的图片都会在右上角因为我们还没调整他们的位置
接著可以利用 JavaScript 来随机图片的位置顺便随机旋转的角度让他有种散落在整个 container 的感觉。
{images.map((src, index) (motion.imgkey{index}src{src}classNamedrag-img__imgalt{Image ${index 1}}style{{top: ${Math.random() * (window.innerHeight - 200)}px,left: ${Math.random() * (window.innerWidth - 150)}px,rotate: ${Math.random() * 40 - 20}deg,}}/
))} 实现拖拽效果
接下来重点来了——使用 Framer Motion 来实现拖拽效果。由于 Framer Motion 内置了 drag 属性整个过程非常简单只需要在 motion.img 上添加 drag 属性并指定拖拽范围。
{images.map((src, index) (motion.imgkey{index}src{src}classNamedrag-img__imgalt{Image ${index 1}}style{{top: ${Math.random() * (window.innerHeight - 200)}px,left: ${Math.random() * (window.innerWidth - 150)}px,rotate: ${Math.random() * 40 - 20}deg,}}dragdragConstraints{containerRef} // 限制拖拽范围whileDrag{{ scale: 1.1, rotate: 0 }} // 拖拽时的样式调整/
))}
这里我们添加了 dragConstraints使图片只能在容器内拖动不会超出边界。同时使用 whileDrag 来调整拖拽时图片的缩放和旋转效果。
完整代码示例
到此为止就完全搞定了其实非常简单以下附上全部的代码
import { useRef } from react;
import { motion } from framer-motion;const images [/drag-img/image-1.png,/drag-img/image-2.png,/drag-img/image-3.png,/drag-img/image-4.png,/drag-img/image-5.png,/drag-img/image-6.png,/drag-img/image-7.png,/drag-img/image-8.png,/drag-img/image-9.png,/drag-img/image-10.png,/drag-img/image-11.png,/drag-img/image-12.png,/drag-img/image-13.png,/drag-img/image-14.png,
];export default function DragImg() {const containerRef useRef(null);return (divref{containerRef}classNamedrag-img__container{images.map((src, index) (motion.imgkey{index}src{src}classNamedrag-img__imgalt{Image ${index 1}}style{{top: ${Math.random() * (window.innerHeight - 200)}px,left: ${Math.random() * (window.innerWidth - 150)}px,rotate: ${Math.random() * 40 - 20}deg,}}dragdragConstraints{containerRef}whileDrag{{ scale: 1.1, rotate: 0 }}/))}/div);
}
.drag-img__container {position: relative;width: 100vw;height: 100vh;overflow: hidden;background: #f0f0f0;
}.drag-img__img {width: 200px;aspect-ratio: 4/3;object-fit: contain;padding: 4px;position: absolute;background: rgba(255, 255, 255, 0.2);border-radius: 6px;box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);cursor: grab;
} 通过以上步骤就成功创建了一个可以拖拽的图片展示特效。操作非常简单而且效果十分酷炫快来试试看吧
