JS+CSS实现页面滚动切换图片（从边角扩散）的效果

最新推荐文章于 2023-08-24 08:01:33 发布

我爱吃豆芽呀

最新推荐文章于 2023-08-24 08:01:33 发布

阅读量1.7w

点赞数 2

分类专栏：前端学习文章标签： JS CSS 图片滚动切换

本文链接：https://blog.csdn.net/woaidouya123/article/details/103588888

版权

前端学习专栏收录该内容

26 篇文章 1 订阅

订阅专栏

先上效果图：

效果图

实现思路：

两个绝对定位的div重合，通过监听页面滚动位置信息，动态的改变上面的div宽高、背景定位、边角半径

div样式设计:

.bgTrans {
        height: 400px;
        position: relative;
    }

    .bgTrans div {
        position: absolute;

    }

    .bgTrans div.back {
        background-image: url(../images/3.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 100%;
        width: 100%;
        z-index: 90;
    }

    .bgTrans div.front {
        background-image: url(../images/4.jpg);
        background-position: -100% -100%;
        background-repeat: no-repeat;
        left: 100%;
        top: 400px;
        border-top-left-radius: 100%;
        z-index: 100;
    }

页面滚动监听方法：

window.onscroll = function(event) {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            var percents;
            if ((div.offsetTop - scrollTop - seeHeight + div.offsetHeight) < 0) {
                if ((div.offsetTop - scrollTop - seeHeight + div.offsetHeight) >= -1 * (seeHeight - div.offsetHeight)) {
                    percents = (div.offsetTop - scrollTop - seeHeight + div.offsetHeight) / (seeHeight - div.offsetHeight) * (-1) * 100;
                } else {
                    percents = 100;
                }
            } else {
                percents = 0;
            }

            // 重置front宽高和位置
            front.style.left = 100 - percents + "%";
            front.style.top = div.offsetHeight - div.offsetWidth * percents / 100 + "px";
            front.style.width = percents + "%";
            front.style.height = div.offsetWidth * percents / 100 + "px";

            // 计算角度，使动画效果更圆滑连贯
            front.style["border-top-left-radius"] = div.offsetWidth * percents / 100 < 
            			div.offsetWidth - div.offsetHeight ? 100+"%":div.offsetWidth - div.offsetHeight+"px";
            front.style["background-position"] = (div.offsetLeft - front.offsetLeft - 8) + "px " +
             (div.offsetLeft - front.offsetTop - 8) + "px";
        }

完整代码持续更新地址：github地址