css3讓div隨鼠標(biāo)移動而抖動起來
發(fā)布時間:2014-02-10 16:13:25 作者:佚名
我要評論

一些背景圖片隨著鼠標(biāo)的移動的反向的移動,感覺跟不錯,下面為大家介紹喜愛使用css3讓div隨鼠標(biāo)移動而抖動起來,感興趣的朋友可以參考下
最近發(fā)現(xiàn)一個網(wǎng)站,感覺用戶體驗(yàn)不錯,特別是一些背景圖片隨著鼠標(biāo)的移動的反向的移動,感覺跟不錯,于是就試著寫了個小demo模仿一下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.layer {
width:400px;
height:400px;
background-color:#FF7373;
transa
}
.A {
position: absolute;
top: 23px;
left: 10px;
}
.B {
position: absolute;
top: 223px;
left: 516px;
}
.C {
position: absolute;
top: 384px;
left: 1000px;
}
</style>
</head>
<body>
<div class="layer A"></div>
<div class="layer B"></div>
<div class="layer C"></div>
</body>
<script type="text/javascript">
var items = document.getElementsByClassName("layer");
document.addEventListener('mousemove', function (evt){
var x = evt.clientX;
var y = evt.clientY;
//console.log(x);
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
var halfWidth = winWidth / 2;
var halfHeight = winHeight / 2;
var rx = x - halfWidth;
var ry = halfHeight - y;
var length = items.length;
var max = 30;
for (var i = 0 ; i < length ; i++) {
var dx = (items[i].getBoundingClientRect().width/max)*(rx / -halfWidth);
var dy = (items[i].getBoundingClientRect().height/max)*(ry / halfHeight);
items[i].style['transform'] = items[i].style['-webkit-transform'] = 'translate('+dx+'px,'+dy+'px)';
}
}, false);
</script>
</html>
說明一下分別拿到每個div的長度和寬度,通過比例算出相對于窗口的合適的偏移量,max是每個div左右偏移最多不超過的值
效果展示
復(fù)制代碼
代碼如下:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.layer {
width:400px;
height:400px;
background-color:#FF7373;
transa
}
.A {
position: absolute;
top: 23px;
left: 10px;
}
.B {
position: absolute;
top: 223px;
left: 516px;
}
.C {
position: absolute;
top: 384px;
left: 1000px;
}
</style>
</head>
<body>
<div class="layer A"></div>
<div class="layer B"></div>
<div class="layer C"></div>
</body>
<script type="text/javascript">
var items = document.getElementsByClassName("layer");
document.addEventListener('mousemove', function (evt){
var x = evt.clientX;
var y = evt.clientY;
//console.log(x);
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
var halfWidth = winWidth / 2;
var halfHeight = winHeight / 2;
var rx = x - halfWidth;
var ry = halfHeight - y;
var length = items.length;
var max = 30;
for (var i = 0 ; i < length ; i++) {
var dx = (items[i].getBoundingClientRect().width/max)*(rx / -halfWidth);
var dy = (items[i].getBoundingClientRect().height/max)*(ry / halfHeight);
items[i].style['transform'] = items[i].style['-webkit-transform'] = 'translate('+dx+'px,'+dy+'px)';
}
}, false);
</script>
</html>
說明一下分別拿到每個div的長度和寬度,通過比例算出相對于窗口的合適的偏移量,max是每個div左右偏移最多不超過的值
效果展示

相關(guān)文章
- 這篇文章主要介紹了css3 transform過渡抖動問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-10-23
- 這篇文章主要介紹了css3動畫效果抖動解決方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-03
- CSS 控制Html頁面高度導(dǎo)致抖動,這類由高度導(dǎo)致頁面抖動的問題,其實(shí)究其根本原因是滾動條是否顯示導(dǎo)致的2014-08-11
- 一款鼠標(biāo)懸停在圖片上,圖片搖晃抖動的CSS3特效代碼2014-03-06
CSS 控制因Html頁面高度導(dǎo)致抖動的問題解決方法
由高度導(dǎo)致頁面抖動的問題,其實(shí)究其根本原因是滾動條是否顯示導(dǎo)致的,具體解決方法如下,有類似情況的朋友可以參考下,希望對大家有所幫助2013-08-23- 這篇文章主要介紹了CSS3實(shí)現(xiàn)紅包抖動效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-23