导航条动态模糊效果实现原理实战

最新推荐文章于 2023-06-22 18:19:53 发布

爱吃糖的小明

最新推荐文章于 2023-06-22 18:19:53 发布

阅读量906

点赞数 1

分类专栏：笔记文章标签： js html css

本文链接：https://blog.csdn.net/weixin_45785873/article/details/105827224

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jquery.clone()方法实现视口滚动导航栏菜单模糊效果

上微博时发现，在我向下看内容的时候，发现内容滚动到顶部的导航栏就变模糊了，觉得很有趣，就自己尝试的去写一个试试

参考微博的实例：

具体步骤：

1、设置一个div【#header】来接收拷贝内容

2、把中间要模糊的内容放到nav

3、编写js代码，实现模糊效果

4、设置下面的样式

.con-blur

#header

#svg-image-blur

5、用svg来制定内容模糊（svg模糊效果比css模糊效果丰富，svg也可以定制模糊效果，当然，具体的我也不懂，略略略样式

一、搭建基本的HTML布局界面

<body>
<header></header>
<!--设置一个div，用于接收拷贝的内容-->
<div id="header"></div>
<nav>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
</nav>
<footer></footer>
<!--svg模糊-->
<svg id="svg-image-blur">
    <filter id="blur-effect">
        <feGaussianBlur stdDeviation="20" />
    </filter>
</svg>
</body>

二、css样式

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body,html{
            width: 100%;
            height: 100%;
        }
        header{
            width: 100%;
            height: 80px;
            margin: 0 auto;
            position: fixed;
            top: 0;
            background: #000;
        }
        nav{
            width: 100%;
            height: auto;
        }
        section{
            width: 100%;
            height: 400px;
            background: red;
            margin-bottom: 10px;
        }
        section:nth-of-type(2){
            background: green;
        }
        section:nth-of-type(3){
            background: skyblue;
        }
        section:nth-of-type(4){
            background:darkolivegreen;
        }
        footer{
            width: 100%;
            height: 80px;
            background: #000;
            position: fixed;
            bottom: 0;
        }
        .con-blur {
            position:relative;
            top:0;
            left:0;
            right:0;
            /*链接到svg模糊*/
            filter:url(#blur-effect);
            opacity:.55;
            z-index: 1;
        }
        #header{
            width: 100%;
            height: 80px;
            overflow:hidden;
            position: fixed;
            left: 0;
            top: 0;
            background: #f8f8f8;
            z-index:99;
            box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);
        }
        #svg-image-blur{
            display: none;
        }

    </style>

三、jquery

<script src="js/jquery-1.11.0.min.js"></script>
<script>
    //把nav里面的内容拷贝一份，即要模糊的内容
    let nav = $("nav").clone();
    //创建一个代码片段，存储nav的内容
    let conBlur = $("<div></div>");
    $(conBlur).append(nav);
    //给代码片段设置一个类"con-blur",并设置样式
    $(conBlur).addClass('con-blur');
    //给代码片段一个id：header，header需要设置样式
    $("#header").append(conBlur);
    let translation;
    //监听滚动事件
    $(window).bind("scroll", function(){
        let top = $(this).scrollTop(); // 当前窗口的滚动距离
        console.log(top);
        translation = 'translateY(' + (-top + 'px') + ')';
        //用获取到的滚动高度，在#header范围内，模糊nav的内容
        $(nav).css({"-webkit-transform":translation,"-moz-transform":translation,"transform":translation});
    });
</script>