网络营销理论工具与方法,简单建优化网站无需技术,百度热搜广告位,单位网站备案最近#xff0c;有同学找到我#xff0c;说#xff1a;老师#xff0c;我想模仿米哈游官网。
我说#xff1a;可以#xff0c;很不错的。
她说#xff1a;有些效果有点难#xff0c;能不能帮我看下。
于是#xff0c;我就简单大概粗糙的讲解了下大致的原理#xf…最近有同学找到我说老师我想模仿米哈游官网。
我说可以很不错的。
她说有些效果有点难能不能帮我看下。
于是我就简单大概粗糙的讲解了下大致的原理毕竟米哈游官网不是那么好仿的。
今天太累了就突然想到这个就模仿其中一个效果来做做。 代码已经挂在gitee 上了。话说我让大家把作业挂上gitee但是总有那么几个同学不做哎
源码地址my-practice: 我自己的练习仓库仅供学习使用。 - Gitee.com
预览地址仿米哈游官网人物跟随鼠标位移效果 一、HTML div classwrapper idwrapperdiv classimgs idimgsimg srcimages/1.png altimg srcimages/2.png altimg srcimages/3.png alt/divdiv classtextLorem ipsum dolor sit amet consectetur adipisicing elit. Sequi reiciendis nesciunt minus, vel quibusdam quidem numquam pariatur, obcaecati voluptatem, nostrum quaerat eum sint omnis amet. Soluta quam explicabo nemo harum eveniet aperiam reiciendis beatae quia, ipsum dignissimos. Porro eaque velit delectus, in atque, ullam sequi itaque molestiae enim ab laudantium quis quo aliquid beatae omnis distinctio. Nobis amet eveniet assumenda accusamus totam voluptate praesentium. Sunt ducimus voluptates, nam, sit dolore corrupti obcaecati saepe consectetur voluptate corporis fugiat? Excepturi aperiam tempore dicta odit ratione accusamus suscipit ut quam odio, ducimus facilis aspernatur nisi laboriosam dolor reiciendis nulla assumenda, qui dolores. Sequi?/div/div
一个大 wrapper 把整个内容套起来。
这个 wrapper 会跟鼠标联动基于鼠标在其中的位置控制图片的位移。
div.imgs 放三方图片图片均来自mihoyo官网。
div.text 则是凑数的模拟mihoyo官网文本内容。
二、CSS
写的 SCSS
html{font-size: 100px;
}
body{font-size: 0.16rem;
}.wrapper{width: 100vw;min-width: 1400px;height: 90vh;margin-top: 10vh;background: #eee;display: flex;justify-content: center;align-items: center;
}
.imgs{width: 10rem;height: 6.14rem;background: #ccc;position: relative;overflow: hidden;img{position: absolute;bottom:0;transform: translateX(0);transition:all 0.4s linear;:nth-child(1){margin-left: 60%;}:nth-child(2){margin-left: -10%;}:nth-child(3){margin-left: 30%;}}
}
.text{width: 4rem;height: 6rem;margin-left: 0.4rem;
}
关键点就在于让图片绝对定位div.imgs 相对定位。
考虑到图片要产生位移动画就给图片添加了过渡动画 transition 。
三、JS
关键点
1. 要通过JS 获取 鼠标在 div.wrapper 里的位置。利用了 DOM 的 getBoundingClientRect() 方法。
具体可以参考博主这篇文章100%经典文章JS如何获取鼠标在一个标签中的坐标_获取标签的坐标-CSDN博客
2. 鼠标位移的距离是以 div.wrapper 的中线为参考。鼠标在左图片右移鼠标在右图片左移。
3. 每张图片都移动每张图移动到距离还不一样。简化操作就让图片位移 translateX 一定的百分比这个百分比是以图片宽度为参考。利用循环让每个图片都位移百分比有偏差。这样每个图片位移的距离就不同产生了视觉差。
完整代码模仿跟官网原版效果还是有出入
// 获取图片元素wrapper元素
let imgs document.getElementById(imgs).querySelectorAll(img);
let wrapper document.getElementById(wrapper);
// 获取鼠标位置
function getMousePos(e) {let rect wrapper.getBoundingClientRect();return {x: e.clientX - rect.left,y: e.clientY - rect.top};
}
// 鼠标移动事件
function moveImg(e) {let mousePos getMousePos(e); // 获取鼠标在wrapper里的坐标let x (mousePos.x / wrapper.offsetWidth) * 100; // 计算图片移动距离百分比let xP (x - 50)/50; // 50%为图片宽度的一半计算图片移动距离百分比imgs.forEach((img,index) { // 每张图片都移动移动距离为 5 索引数据% 图片宽度img.style.transform translateX(${-xP*(5index*2)}%);});
}
wrapper.addEventListener(mousemove, moveImg);
完毕~
