Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Bilibili [冬] banner 早中晚切换效果

Bilibili [冬] banner 早中晚切换效果

原创
作者头像
Krry
修改于 2021-01-11 06:20:10
修改于 2021-01-11 06:20:10
2.8K0
举报
文章被收录于专栏:KrryblogKrryblog

博客地址:https://ainyi.com/101

Bilibili 官网冬季的 banner 图吸引了我,一开始是中午图,鼠标左移浮现早上图,右移浮现晚上图,挺有意思

WechatIMG455.png
WechatIMG455.png

来实现一波

做之前先不要调试看 b 站的代码,自己先想想怎么实现,这样知识记得比较深

我们尽量使用 css 解决,js 弥补

分析层级、实现方法

比较明显的可以看到==早中晚三张22 33娘玩耍的图片==,浏览器调试可以发现还有==三张早中晚的树木图片,一张雪球图片、窗口积雪图片==

一共有 8 张图片资源,其中晚上图片是一段 webm 视频,因为有个小火炉在燃烧

把这些资源文件直接保存到本地

所有图片资源,都在头部位置,用==绝对定位==

默认展示是中午,早晚是鼠标经过才会出现,那么它们的层级关系可以这样定位:

  • 早:不设置 z-index
  • 中(包括雪球):z-index: 10
  • 晚(包括窗口积雪):z-index: 20

对应早中晚的树木也应该是如此

重点:切换

鼠标移动过程中图片切换的效果,实质对应的是切换每张图片的==透明度 opacity==

设置了如上早中晚的层级关系后,我们来定一下左移和右移三个时间段的 opacity

  1. 左移:中午 -> 早上,由于==层级中午 > 早上==,那么这个过程的早上 opacity >= 1,中午的 opacity 逐渐变为 0(因为中午的层级高,会覆盖中午)
  2. 右移:中午 -> 晚上,由于==层级中午 < 晚上==,这个过程晚上 opacity 逐渐变为 1,中午的 opacity >= 1(因为晚上的层级高,会覆盖中午)

上面两个过程可以知道,早上的 opacity 可以不用管,而中午和晚上的 opacity 都涉及到变化

切换的过程也涉及到图片的移动,可以使用==transform: translatex()==

鼠标移开 banner 图时,恢复成中午,有个过渡动画,可以使用==transition==

关键点:根据鼠标移动的距离计算 opacity

计算

在包裹 banner 的 div 容器样式表设置 --percentage 属性,默认为 0.5

而鼠标移动的距离,需要通过 js 计算

mouseenter、mousemove、mouseout 三个监听函数,动态计算出移动百分比,赋值到 --percentage 属性

图片的 ==transform、opacity== 属性需要应用到 --percentage 来计算数值

需要注意的是:

  1. 中午的雪球、早中晚的树木 移动的速度大于图片,这块的 transform 要单独处理
  2. 晚上的窗口的积雪是晚上图片完全显示出来后,才开始慢慢浮现,这个 opacity 也要单独处理

基本该说的点都在上面了,下面来展示一波代码

注:还有一个下雪的动画,需要用 canvas 实现,这里就没做了

代码

html:

代码语言:txt
AI代码解释
复制
<div class="banner">
  <div class="view">
    <img
      src="../../assets/bilibili/bilibili-winter-view-1.jpg"
      class="morning"
    />
    <img
      src="../../assets/bilibili/bilibili-winter-view-2.jpg"
      class="afternoon"
    />
    <img
      src="../../assets/bilibili/bilibili-winter-ball.png"
      class="ball"
    />
    <video autoplay loop muted class="evening">
      <source
        src="../../assets/bilibili/bilibili-winter-view-3.webm"
        type="video/webm"
      />
    </video>
    <img
      src="../../assets/bilibili/bilibili-winter-view-3-snow.png"
      class="window-cover"
    />
  </div>
  <div class="tree">
    <img
      src="../../assets/bilibili/bilibili-winter-tree-1.png"
      class="morning"
    />
    <img
      src="../../assets/bilibili/bilibili-winter-tree-2.png"
      class="afternoon"
    />
    <img
      src="../../assets/bilibili/bilibili-winter-tree-3.png"
      class="evening"
    />
  </div>
</div>

css:

代码语言:txt
AI代码解释
复制
.banner {
  min-height: 155px;
  height: 9.375vw;
  position: relative;
  overflow: hidden;
  --percentage: 0.5;

  .view,
  .tree {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s all ease-in;
  }

  .view {
    transform: translatex(calc(var(--percentage) * 100px));
  }
  .tree {
    transform: translatex(calc(var(--percentage) * 150px - 25px));
    filter: blur(3px);
  }

  img,
  video {
    position: absolute;
    height: 100%;
  }
  .evening {
    transition: 0.2s all ease-in;
    z-index: 20;
    opacity: calc((0.5 - var(--percentage)) / 0.5);
  }
  .afternoon {
    transition: 0.2s all ease-in;
    z-index: 10;
    opacity: calc(1 - (var(--percentage) - 0.5) / 0.5);
  }

  &.moving {
    .afternoon,
    .evening,
    .ball,
    .view,
    .tree {
      transition: none;
    }
  }

  .ball {
    transition: 0.2s all ease-in;
    z-index: 10;
    opacity: calc(1.5 - (var(--percentage) - 0.5) / 0.5);
    transform: translate(calc(100px * var(--percentage)), 22px) rotate(calc(10deg * var(--percentage) + 5deg));
  }

  .window-cover {
    z-index: 20;
    opacity: calc(var(--percentage) * (-2));
  }
}

js:

代码语言:txt
AI代码解释
复制
let startingPoint = 0
const header = document.querySelector('.banner')

header.addEventListener('mouseenter', (e) => {
  startingPoint = e.clientX
  header.classList.add('moving')
})

header.addEventListener('mouseout', (e) => {
  header.classList.remove('moving')
  header.style.setProperty('--percentage', 0.5)
})

header.addEventListener('mousemove', (e) => {
  let percentage = ((startingPoint - e.clientX) / window.outerWidth) * 2 + 0.5

  header.style.setProperty('--percentage', percentage)
})

demo

http://ele.ainyi.com/my-transfer

博客地址:https://ainyi.com/101

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【持续更新】Handsome主题美化
你是否曾在深夜翻遍搜索引擎,只为拼凑出一个理想中的博客界面?是否在尝试美化「Handsome」主题时,被零散的教程、失效的代码和版本兼容问题反复劝退?
九笙
2025/06/28
780
【持续更新】Handsome主题美化
Hexo-Butterfly主题魔改
本文章首发于语雀! 通过各种高科技功能同步到Hajeekn 的博客 由于每个人的博客目录都不相同,这里博客目录使用%brt%代替 本文章除 Pace wowjs 普通引入法以外,其他魔改都不适合 Butterfly3.6.0 及以上
FloatSheep
2022/04/25
2.6K0
Hexo-Butterfly主题魔改
Bilibili Dynamic Banner
由于本教程涉及的所有修改对缩进格式等有严格要求,担心自己控制不好的可以直接下载静态资源。参照教程进行修改。本帖基于Butterfly_v3.5.1版本进行配置,低版本可能需要对index.pug稍加修改。精力有限没时间做全版本适配。读者如果有困难可以考虑群内交流或者直接升级最新版本主题。
Akilar
2021/06/11
2.7K0
10个超酷的H5特效设计+1个仿最新苹果UI设计(压轴)
1.抽屉式(动态)选择 button(纯css实现) html代码:  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="s
淼学派对
2022/11/20
1.6K0
10个超酷的H5特效设计+1个仿最新苹果UI设计(压轴)
灵动岛前端Ui
当用户收到信息后,iPhone 14 Pro显示屏上方的灵动岛可以展开显示信息。此外灵动岛还可以显示音乐播放、Siri等组件,让用户在首页直接完成各种功能控制和信息阅读。iPhone 14 Pro 拥有6.1英寸屏幕,还将推出6.7英寸的iPhone 14 Pro MAX [2]
天天Lotay
2022/12/27
9300
灵动岛前端Ui
纯css实现117个Loading效果(中)
这是我这几十年间从世界各地寻觅到的 Loading特效,合计117个(本文贴出第40-78个),而且是 纯CSS 制作的。
德育处主任
2022/04/17
1.5K0
纯css实现117个Loading效果(中)
原生HTML+CSS+JS制作自己的导航主页(前端大作业,源码+步骤详解)
咕咕了好久啦,今天使用原生HTML+CSS+JS做一个很简单的个人定制的导航主页吧!
全栈程序员站长
2022/09/15
7.3K2
原生HTML+CSS+JS制作自己的导航主页(前端大作业,源码+步骤详解)
魔改笔记四:友链页重构及友链朋友圈适配
4月08日,店长久违的更新了方舟系列的友链卡片,作为店长铁粉,当然要第一时间买店长的火柴啦,于是我将店长所有的友链卡片稍微整合了一下,结合安知鱼的教程,最终实现了“五世同堂”友链页面,大家可以在下面链接卡片或者友链页面查看教程,五种友链可以随便混合搭配,大家按照自己的butterfly主题风格稍作修改即可,并且针对鱼的友链美化后无法适配友链朋友圈,这里提供了一个相对可行解决方案,我也试验过,可以正常自行部署以及vercel无服务器部署,于是在此分享给大家!
柳神
2024/05/30
2530
魔改笔记四:友链页重构及友链朋友圈适配
Angular2 之 Animations
Angular2的动画系统赋予了制作各种动画效果的能力,致力于构建出与原生CSS动画性能相同的动画。 Angular2的动画主要是和@Component结合在了一起。 animations元数据属性在定义@Component装饰。就像template元数据属性!这样就可以让动画逻辑与其应用代码紧紧集成在一起,这让动画可以更容易的出发与控制。 使用要点 Angular2的动画是使用<u>模型驱动</u>的方式在两个状态之间进行转换,是由状态和状态之间的转场效果所定义的。 动画被定义在@Compone
贺贺V5
2018/08/21
2.2K0
Angular2 之 Animations
【Html.js——页面布局】个人博客(蓝桥杯真题-1766)【合集】
通过以上步骤,HTML 和 CSS 代码协同工作,实现了一个具有导航栏、首页 banner、文章列表和右侧栏的个人博客页面布局。
Rossy Yan
2025/01/24
1360
【Html.js——页面布局】个人博客(蓝桥杯真题-1766)【合集】
帅帅的导航代码
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href
小小鱼儿小小林
2020/06/23
1.3K0
基于html+css+jquery+bootstrap响应式网页制作模板——红色中国文化主题:大美中国
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的代码量也很足、很细致,使用hover来完成过渡效果、鼠标滑过效果等,使用表格、表单补充模块,为方便新手学习页面中没有使用js有需要的可以自行添加。 <font color='#b44846' size='4px'> ❤</font> 【作者主页——🔥获取更多优质
IT司马青衫
2022/08/16
8460
基于html+css+jquery+bootstrap响应式网页制作模板——红色中国文化主题:大美中国
wordpress优化经历(四)——一把伞的时间轴归档页模板
一把伞的时间轴归档页模板文件 链接一:https://download.csdn.net/download/qq_42038623/21072565
不愿意做鱼的小鲸鱼
2022/09/26
2850
wordpress优化经历(四)——一把伞的时间轴归档页模板
疯狂操作 CSS3 实现 60 FPS 动画效果,CodeReview 时同事直呼:细节!
通常来讲,当动画的每秒帧数低于 12 (即 12 FPS 以下)时,我们的大脑就能快速从动画中区分出一些静止的图片,所以此时的动画并不是无缝动画。
掘金安东尼
2022/09/22
5520
css实现动态效果
在线显示地址:https://gethtml.cn/project/2020/03/17/index.html
Dreamy.TZK
2020/04/09
6.8K0
【UI界面设计】简洁的纯CSS3红色分页样式源码
代码是一款红色主题的CSS3分页样式。该分页样式在bootstrap分页代码的基础上,添加一些自定义CSS样式,制作出在鼠标hover时,带幻影动画效果的红色分页主题。
用户5997198
2019/11/10
1.2K0
每日分享html之1个卡片选择、2个加载、1个背景、1个开关
1.前端工程师主要利用HMTL与CSS建构页面(其中html构建骨架,css构建样式),用JavaScript获取后端数据以及完善交互以及用户体验。 2.通俗来讲,前端在一个项目里,拿到UI设计师设计的设计稿,然后实现UI设计师设计稿,调用后端程序员给的数据接口以获取数据,然后测试,最后部署上线。 3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。 4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。
淼学派对
2022/11/20
5480
每日分享html之1个卡片选择、2个加载、1个背景、1个开关
动手练一练,做一个现代化、响应式的后台管理首页
大家好,今天我们将一起从零开始纯手工建一个后台管理首页。关于后台管理模板,每个公司的要求都不一样,有的能用就行也丑不丑无所谓,或者用个开源模板凑合下就行啦。如果接到这样后台管理需求,我也是从网上下载改改而已,从没想过自己动手建一个。因为从零开始建一个漂亮完善的后台管理模板实在太费功夫了,交互样式的代码量不亚于业务代码的工作量。
前端达人
2020/02/29
1.1K0
动手练一练,做一个现代化、响应式的后台管理首页
大转盘设置漂浮物
大转盘.jpg 选择漂浮物.jpg <!--大转盘--> <div class="shareLeft"> <div class="sharePosition"> <div class="shareBigTitle"> 幸运大转盘 </div> </div> <div class="shareBg"> </div> <div class="shareInside"> <div class="
lyudev
2022/08/04
2.3K0
大转盘设置漂浮物
从青铜到王者10个css3伪类使用技巧和运用
伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。伪类与伪元素的本质区别就是是否抽象创造了新元素。具体的伪类和伪元素相关知识本文就不深入,下面介绍一下从青铜到王者10个css3伪类使用技巧和运用。直击案例代码
Nealyang
2019/09/29
9300
从青铜到王者10个css3伪类使用技巧和运用
推荐阅读
相关推荐
【持续更新】Handsome主题美化
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档