每天一個jquery外掛-B站的景深

B站的景深

歪比歪比？歪比巴卜？

覺得講的不好的可以去看看大佬的文章，真的受益匪淺，真的css能做到的東西真的多，我瞭解的感覺好少啊。圖片來源從B站扣或者從下面的別的大佬做的外掛中直接下載。

我做出來的效果(當然是縮水版，不過效果實現了，也是同一個配方)
在這裡插入圖片描述

程式碼，很少全部放html裡面了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" 
>
		<title>B站的景深</title>
		<script src="js/jquery-3.4.1.min.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#div{
				width:100%;
				height:160px;
				position: relative;
				overflow: hidden;
			}
			.img{
				background-repeat: no-repeat;
				width 
: 100%;
				height: 100%;
				position: absolute;	
			}
			.i1{
				background: url(img/1.png);
			}
			.i2{
				background: url(img/2.png);
				background-position: 40% 0%;
			}
			.i3{
				background: url(img/3.png)
			}
			.i4{
				background: url(img/4.png);
				background-position:50% 0%;
				background-size 
: 100% 150%;
			}
			.i5{
				background: url(img/5.png);
				background-position: 40% 0%;
			}
			.i6{
				background: url(img/6.png);
				background-position: 40% 0%;
			}
		</style>
	</head>
	<body>
		<div id="div">
			<div class="img i1"></div>
			<div class="img i2"></div>
			<div class="img i3"></div>
			<div class="img i4"></div>
			<div class="img i5"></div>
			<div class="img i6"></div>
		</div>
	</body>
</html>
<script>
	$(function(){
		$("#div").mousemove(function(e){
			var w = $(this).width();
			var x = e.offsetX;
			var temp1 = w/(w-x)<10?w/(w-x):10;
			var temp2 = w/(x)<10?w/(x):10;
			$(".i1,.i2,.i3").css({
				"filter":"blur("+temp1+"px)",
				"transform": "translate("+temp1+"px,0px)"
			})
			$(".i4,.i5,.i6").css({
				"filter":"blur("+temp2+"px)",
				"transform": "translate("+temp2+"px,0px)"
			})
		})
	})
</script>

來個直觀的分解動作，我們看到的景深到底是哪些部分組成的

會像ps的高斯模糊一樣有規律的逐個模糊
並且會有鏡頭感，就是圖片朝著不同方向移動

然後用js的語言就是這樣的

根據滑鼠移動作為驅動事件mousenove
然後裡面的深淺的感覺是多個png圖片疊加在一起的效果(看原始碼~)
控制模糊情況用filter:blur(0px),這個引數，越大越模糊
控制背景圖左右移動用transform: translate(x,y)，控制x來移動div達到背景圖左右挪動的效果
此外根據測試效果可知，裡面的三張圖片先清晰再模糊然後，以不同的步幅向左挪動，外面三張相反
所以我們要挨個寫控制的比例，不過我偷懶，就把前三張和後三張當成倆物件寫的，所以可能你就只有前後感，沒有層次感，因為即使模糊了前三張或者後三張也是一起模糊和移動，不過要實現效果，就設定給每個圖片比例都不一樣，然後根據滑鼠挪動比例的變化的效果引數就好了。
完事，洗澡，碎覺~

每天學一個jquery外掛-B站的景深

每天一個jquery外掛-B站的景深

B站的景深

每天學一個jquery外掛-B站的景深

每天學一個jquery外掛-仿樓梯滾動

每天學一個jquery外掛-彈出提示框2

每天學一個jquery外掛-圖示的動畫

每天學一個jquery外掛-記分牌效果

每天學一個jquery外掛-密碼的等級

每天學一個jquery外掛-滑鼠的特效

每天學一個jquery外掛-做個點名器

每天學一個jquery外掛-css實現電風扇2

每天學一個jquery外掛-五角星打分

每天學一個jquery外掛-五角星打分2

每天學一個jquery外掛-省市縣聯動

每天學一個jquery外掛-做拖動效果1

每天學一個jquery外掛-滑動的底邊

每天學一個jquery外掛-自定義標題

每天學一個jquery拆件-圖片的預覽

B站：過去一年讀書類視訊總播放量超 58 億次，74.3 萬人每天至少看一個

分享一個JQuery 圖片裁剪外掛，然後用C# 把裁剪的圖片儲存在本地

B 站 CEO 陳睿：5G 時代到來後，每一個網際網路使用者都是視訊使用者

b站路飛學城python課梨視訊專案程式碼

每天學一個jquery外掛-B站的景深

每天一個jquery外掛-B站的景深

B站的景深

相關推薦