【功能实现】bilibili顶部鼠标跟随效果怎么实现?

我们在电脑端打开b站首页时,总会被顶部【鼠标跟随】的效果所吸引,那他是如何实现的,来研究一下。

b站效果:

分析:

1.监听鼠标的位置,当悬浮到该模块时,图片会随鼠标移动

2.引入图片的样式是动态的,会随鼠标移动而改变

实验:

1.准备好基本图片

背景也添加一个图片

javascript 复制代码
<div class="banner" >
        <img src="../assets/images/nav/castalia.png" alt="Background">
      <img  src="../assets/images/cat.png" alt="Background">
</div>
javascript 复制代码
.banner {
     margin: auto;
      width: 120%;
      height: 400px;
      border-radius: 8px;
      background: url(@/assets/images/backimage4.jpeg) no-repeat;
      background-size: cover;
    }

2.实现监听鼠标位置

引入三个方法,分别监听鼠标移动时的状态

javascript 复制代码
<div class="banner" 
 @mousemove="onMouseMove">

</div>

3.鼠标移动时改变样式

分别为背景和两张图片添加绑定样式

javascript 复制代码
<div class="banner" :style="textStyle" 
 @mousemove="onMouseMove" >
 <img :style="pngStyle1" src="../assets/images/nav/castalia.png" alt="Background">
 <img :style="textStyle" src="../assets/images/cat.png" alt="Background">
 
 </div>

设定样式初始值

javascript 复制代码
const startX = ref(0);
const currentX = ref(0);
const pngStyle = ref({
  transition: 'transform 0.3s',
  transform: 'translate(0px, 0px)',
});
const pngStyle1 = ref({
  transition: 'transform 0.2s',
  transform: 'translate(0px, 0px)',
});
const textStyle = ref({
  transition: 'transform 0.1s',
  transform: 'translate(0px, 0px)',
});

设定方法:

javascript 复制代码
 
const onMouseMove = (event) => {
   currentX.value = event.clientX;//鼠标事件发生时,鼠标指针相对于浏览器窗口的 X 坐标
  const disx = currentX.value - startX.value;//计算鼠标从开始位置到当前位置的水平距离。
  const move = disx / 18;//设定图片应该移动的距离
  const move1 = -disx / 18;
  const move2 = -disx / 14;
  pngStyle.value.transform = `translate(${move}px, 0px)`;
  pngStyle1.value.transform = `translate(${move}px, 0px)`;
  textStyle.value.transform = `translate(${move1}px, 0px)`;
};
 

这样一个基本效果就完成了,可以根据自己想要的效果增加图片,调解移动的距离,移动的方向等。

大家加油!!!

相关推荐
JinSo7 分钟前
pnpm monorepo 联调:告别 --global 参数
前端·github·代码规范
程序员码歌14 分钟前
豆包Seedream4.0深度体验:p图美化与文生图创作
android·前端·后端
urhero18 分钟前
工作事项管理小工具——HTML版
前端·html·实用工具·工作事项跟踪·任务跟踪小工具·本地小程序
二十雨辰20 分钟前
eduAi-智能体创意平台
前端·vue.js
golang学习记28 分钟前
从0死磕全栈之Next.js connection() 函数详解:强制动态渲染的正确姿势(附实战案例)
前端
郝学胜-神的一滴35 分钟前
Three.js光照技术详解:为3D场景注入灵魂
开发语言·前端·javascript·3d·web3·webgl
m0dw39 分钟前
vue懒加载
前端·javascript·vue.js·typescript
国家不保护废物1 小时前
手写 Vue Router,揭秘路由背后的魔法!🔮
前端·vue.js
菜鸟‍1 小时前
【前端学习】仿Deepseek官网AI聊天网站React
前端·学习·react.js
小光学长2 小时前
基于Vue的保护动物信息管理系统r7zl6b88 (程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js