bilibili网页图片动态效果实现
前一段时间在b站刷视频的时候看到了一个关于如何实现bilibili顶部导航的动画效果的视频。在看到这个视频之前，我也挺喜欢bilibili导航的动画效果，心里默默赞叹（b站nb）。由于刚自学不久，学习时间也较忙所以一直没有尝试去实现这个效果。所以当我看到这个视频的时候，我就决定要跟着视频里的思路搞明白这效果是怎么实现。
提示：代码里有ES6的语法，刚开始看代码时我也很懵，去补了一下ES6语法的相关内容才知道那些箭头函数等相关的知识。
要实现的内容
- 实现一个多图层组合的静态界面
- 实现不同图层不同清晰度的配置
- 实现鼠标左右移动导致的清晰度变化
- 实现鼠标左右移动导致的跟随位移
- 实现小女孩的眨眼效果
- 实现鼠标离开时整个效果的还原
。
提示：以下是完整的代码，有比较详细的备注说明，实现的原理也比较简单。设置图片初始位置，添加鼠标移动事件，事件处理等。搜索输入框用的是bootstrap
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bilibili.css">
<link rel="stylesheet" href="bootstrap.min.css">
<style>
</style>
</head>
<body>
<div id="math">
<div class="image"><img width="3000" height="250" src="images/bg.png"></div>
<div class="image"><img width="1800" height="160" src="images/girl1.png"></div>
<div class="image"><img width="3000" height="250" src="images/grassland.png"></div>
<div class="image"><img width="1800" height="160" src="images/leaf.png"></div>
<div class="image"><img width="1800" height="165" src="images/mushroom.png"></div>
<div class="image"><img width="1950" height="178" src="images/spirit.png"></div>
<div class="daohan">
<div class="head" style="width: 450px;">
<span class="spana"><a>主站</a></span>
<span class="spana"><a>番剧</a></span>
<span class="spana"><a>游戏中心</a></span>
<span class="spana"><a>直播</a></span>
<span class="spana"><a>会员购</a></span>
<span class="spana"><a>漫画</a></span>
<span class="spana"><a>赛事</a></span>
</div>
<div class="row" style="width:500px;">
<div class="col-lg-6" style="width: 500px;">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="dl">
<div class="right">
<span class="touxian"></span>
<span><a>登录</a></span>
<span><a>注册</a></span>
<button class="tg">投稿</button>
</div>
</div>
</div>
</div>
<script>
var math=document.getElementById("math");
var image=document.getElementsByTagName("img");//选择器，匹配选择器的所有元素
var window_width=document.documentElement.clientWidth;//获取整个窗口的宽度
var change=window_width/2/5;//获取鼠标移动2份1屏幕宽度，模糊度发生5px变化的值是多少
console.log(change);
var data_image=[
{x:0,b:4},
{x:0,b:0},
{x:0,b:1},
{x:0,b:4},
{x:0,b:5},
{x:0,b:6},
]
function vague(){
//image[0].style='transform:translate(0px);filter:blur(4px);'; 使不同图片模糊。换用for实现
//image[1].style='transform:translate(0px);filter:blur(0px);';
//image[2].style='transform:translate(0px);filter:blur(1px);';
//image[3].style='transform:translate(0px);filter:blur(4px);';
//image[4].style='transform:translate(0px);filter:blur(5px);';
//image[5].style='transform:translate(0px);filter:blur(4px);';
for(var i in image){
if(image.hasOwnProperty(i)){
var imagearry=image[i];
var data=data_image[i];
imagearry.style='transition: 0.5s linear; transform:translate('+data.x+'px);filter:blur('+data.b+'px);'; //熟记('+data.x+'px)格式。
}
}
}
var x=0;//x坐标本来的位置
var x_new=0;//x坐标新的位置
var x_x=0;//新坐标和原来坐标的差值
math.onmouseover=function(e){ //设置一个值接收鼠标初始位置的值
x=e.clientX;
//console.log(x);
}
math.onmousemove=function(e){ //设置一个值接收鼠标移动位置的值，鼠标移动时执行效果
x_new=e.clientX;
//console.log(x_new);
x_x=x-x_new;
//console.log(x_x);
for(var i in image){
if(image.hasOwnProperty(i)){
var mover_new=(6-parseInt(i))*10;
var imagearry=image[i];
var data=data_image[i];
var new_b=Math.abs(data.b+(x_x/change));
var new_data=x_x/mover_new;
imagearry.style='transform:translate('+new_data+'px);filter:blur('+new_b+'px);'; //熟记('+data.x+'px)格式。
}
}
}
math.onmouseout=function(e){//鼠标移出恢复初始化
vague();
}
var eye=1;
timeout=4000;
function eye_e(){
if(eye==4){
eye=1;
timeout=4000;
}
else{
eye+=1;
timeout=35;
}
image[1].src='images/girl'+eye+'.png';
setTimeout(()=>{
eye_e();
},timeout);
}
window.onload=function(){
vague();
eye_e();
}
</script>
</body>
</html>
css代码
*{ margin: 0;padding: 0;} /*初始化*/
#math{
position: relative;
width: 100%;
height: 155px;
overflow: hidden;
background-color: aquamarine;
}
.image{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.touxian{
width:40px;
height:40px;
border-radius:20px;
background: url(images/kkk.jpg);
background-size:40px 40px;
display: inline-block;
}
.tg{
border: none;
background-color: #FB7299;
width: 100px;
height: 40px;
border-radius:6px;
color: white;
}
.right span{
display: inline-block;
margin-right: 10px;
}
.right{
margin-top: 10px;
width: 100%;
display: flex;
justify-content: space-between;
}
.right span a{
line-height: 40px;
color: white;
}
div .spana a{
color: rgb(19, 123, 241);
font-size: 16px;
margin-right: 10px;
}
div.row{
margin-right: 10px;
display: inline-block;
}
div.head{
display: inline-block;
margin-left: 30px;
z-index: 100;
}
div.head a{
color: white;
}
div.dl{
z-index: 100;
display: inline-block;
margin-right: 30px;
}
div.daohan{
width: 100%;
height: 40px;
display: inline-flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
div.math{
float: inline-start;
}
效果图
总结
以上就是文章的主要内容，本文仅仅简单写了bilibili导航效果的实现。也算是我前端三件套的基础学习告一段落了。目前在学Vue，希望自己能坚持下去，万事顺利，谢谢谢谢谢谢。
版权声明：本文为weixin_48681975原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。