继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

CSS3背景 醒目而惊艳的滚动效果

纯情掉了一地
关注TA
已关注
手记 33
粉丝 30
获赞 84

https://img.mukewang.com/5b1ff46f000198c403200240.jpg

<!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 src="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>/


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP