CSS3背景 醒目而驚艷的滾動效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
height: 2000px;
}
#wrap {
width: 800px;
height: 400px;
background: url("bg.jpg") no-repeat center ;
background-size: cover;
}
.sircle {
position: absolute;
top: 20%;
left: 20%;
width: 0px;
height: 0px;
border-radius:50%;
background: url('circle.jpg') no-repeat fixed;
background-size: 800px 400px;
background-position-x: 0;
background-position-y: 400px;
border:1px solid #2b2b2b;
}
.box {
overflow: hidden;
float: left;
position: absolute;
top: 400px;
}
</style>
</head>
<body>
<div class="box">
<div id="wrap">
<div class="sircle"></div>
</div>
</div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(() => {
/**背景滚动自身高度时， */
var body = $('body')[0],
sircle = document.querySelector('.sircle');
// body.onscroll = function () ;
body.onscroll=function () {
console.log(this.scrollY);
sircle.style.width = this.scrollY * 4 + 'px';
sircle.style.height = this.scrollY * 4 + 'px';
sircle.style.left = 20 - this.scrollY + 'px';
sircle.style.top = 20 - this.scrollY + 'px';
sircle.style.backgroundPositionY =-this.scrollY+400 + 'px';
}
})
</script>
</body>
</html>/點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦