前端实战小案例--根据鼠标位置而变化的卡片3D视差效果

最新推荐文章于 2022-09-22 15:42:39 发布

朽木自雕xmzd

最新推荐文章于 2022-09-22 15:42:39 发布

阅读量1.1k

点赞数

分类专栏：前端实战案例

本文链接：https://blog.csdn.net/qq_16687863/article/details/104392012

版权

前端实战案例专栏收录该内容

20 篇文章 52 订阅

订阅专栏

前端实战小案例--根据鼠标位置而变化的卡片3D视差效果

想练习更多前端案例，请进个人主页，点击前端实战案例->传送门

觉得不错的记得点个赞?支持一下我0.0！谢谢了！

不积跬步无以至千里，不积小流无以成江海。

效果图如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.main{
				width: 400px;
				height: 500px;
				perspective: 1000px;
				transform-style: preserve-3d;
				transform-origin: 0 0;
			}
			.container{
				/* css定义变量的方式 */
				--X: 0;
				--Y: 0;
				position: relative;
				width: 400px;
				height: 500px;
				background-color: hsl(180, 20%, 90%);
				border-radius: 10px;
				transform-style: preserve-3d;
				box-shadow: 0 0 25px 10px hsla(0, 0%, 0%, .2);
				cursor: pointer;
				transform: rotateX(var(--X)) rotateY(var(--Y));
				transition: all 0.5s ease;
			}
		</style>
	</head>
	<body>
		<section class="main">
		    <div class="container container--1">
		    </div>
		</section>
		<script>
			class ParallaxTiltEffect{
				constructor(element) {
					// 最大旋转角度
					this.maxRotateDeg = 20
					// 获取到元素
				    this.element = document.querySelectorAll(element)[0]
					// 获取宽高的一半
					this.halfW = this.element.clientWidth / 2
					this.halfH = this.element.clientHeight /2 
					this.init()
				}
				init(){
					// 绑定鼠标事件
					this.element.addEventListener("mouseenter", this.handleMouseEnter.bind(this))
					this.element.addEventListener("mousemove", this.handleMouseMove.bind(this))
					this.element.addEventListener("mouseleave", this.handleMouseLeave.bind(this))

				}
				computed(offsetX, offsetY){
					// 获取鼠标位置距离元素中心点的距离, 然后除以 this.halfW，得到百分比
					let dxPercent = (offsetX - this.halfW) / this.halfW
					let dyPercent = -(offsetY - this.halfH) / this.halfH
					console.log(dxPercent,dyPercent,'11')
					let rotateX = this.maxRotateDeg * dxPercent
					let rotateY = this.maxRotateDeg * dyPercent
					console.log(rotateX,rotateY,'22')
					this.setElementRotate(rotateY,rotateX)
				}
				handleMouseEnter(e){
					let {offsetX, offsetY} = e
					// requestAnimationFrame设置刷新帧率随浏览器画面刷新而刷新
					requestAnimationFrame(() => {
						return this.computed(offsetX, offsetY)
					})
				}
				handleMouseMove(e){
					let {offsetX, offsetY} = e
					requestAnimationFrame(() => {
						return this.computed(offsetX, offsetY)
					})
				}
				handleMouseLeave(e){
					this.setElementRotate(0, 0)
				}
				setElementRotate(rotateX, rotateY){
					// js设置css变量的方式
					this.element.style.setProperty('--X', rotateX + "deg");
					this.element.style.setProperty('--Y', rotateY + "deg");
				}
			}
			let element1 = new ParallaxTiltEffect(".container")
		</script>
	</body>
</html>

朽木自雕xmzd

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
前端实战小案例--根据鼠标位置而变化的卡片3D视差效果

前端实战案例--根据鼠标位置而变化的卡片3D视差效果想练习更多前端案例，请进个人主页，点击前端实战案例->传送门觉得不错的记得点个赞?支持一下我0.0！谢谢了！不积跬步无以至千里，不积小流无以成江海。效果图如下：代码如下：<!DOCTYPE html><html> <head> <meta charset="ut...
复制链接

扫一扫

专栏目录