纯html css实现动态高斯模糊效果(第二弹),实现导航条动态模糊内容

还是先看效果图:


静态效果图.png

GIF.gif

页面布局:

  • 顶部高斯模糊导航条
  • 页面主体

在线demo:https://lucienyang.github.io/blur_nav/
建议使用chrome浏览器,其他浏览器我没测过

导航条动态高斯模糊实现原理

第一步,将页面主体内容clone到navbar中,然后使用css3 -webkit-filter滤镜对内容做高斯模糊
第二部,监听页面滚动事件,计算出scrollTop,将navbar中的内容做同步滚动,同步滚动使用的方法是transform下面的translateY样式,对Y轴做同步偏移

代码片段如下:

    var duplicate = $(".mainContent").clone();
    var contentBlurred = $("<div></div>");
    $(contentBlurred).append(duplicate);
    $(contentBlurred).addClass('content-blurred');
    $("#header").append(contentBlurred);
    var translation;
    $(window).bind("scroll", function(){
        var top = $(this).scrollTop(); // 当前窗口的滚动距离
        translation = 'translateY(' + (-top + 'px') + ')';
        $(duplicate).css({"-webkit-transform":translation,"-moz-transform":translation,"transform":translation});
    });

内容图片动态高斯模糊实现原理

鼠标mouseover时候,对img标签加上 -webkit-filter滤镜样式,mouseleave时候再移除掉


有兴趣的盆友,可以去我的github上下载源码,喜欢的话给个star~https://github.com/LucienYang/blur_nav

以上只是从技术上验证了一种可能性,目前并未考虑性能,以及浏览器兼容性,我用的是Chrome浏览器测试

推荐阅读更多精彩内容