单页设计视差模糊背景固定菜单

One Page Design + Parallax + Blur + Fixed menu。在页面向下滚动时，使用filter（滤镜）实现页面头部图片的模糊背景。

fixed menu

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2049
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

//Based on the Scroller function from @sallar
var $content = $('header .content'),
    $blur = $('header .overlay'),
    wHeight = $(window).height();

$(window).on('resize', function() {
    wHeight = $(window).height();
});

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

function Scroller() {
    this.latestKnownScrollY = 0;
    this.ticking = false;
}

Scroller.prototype = {

init: function() {
        window.addEventListener('scroll', this.onScroll.bind(this), false);
        $blur.css('background-image', $('header:first-of-type').css('background-image'));
    },

onScroll: function() {
        this.latestKnownScrollY = window.scrollY;
        this.requestTick();
    },

requestTick: function() {
        if (!this.ticking) {
            window.requestAnimFrame(this.update.bind(this));
        }
        this.ticking = true;
    },

update: function() {
        var currentScrollY = this.latestKnownScrollY;
        this.ticking = false;

var slowScroll = currentScrollY / 2,
            blurScroll = currentScrollY * 2,
            opaScroll = 1.4 - currentScrollY / 400;
        if (currentScrollY > wHeight)
            $('nav').css('position', 'fixed');
        else
            $('nav').css('position', 'absolute');

$content.css({
            'transform': 'translateY(' + slowScroll + 'px)',
            '-moz-transform': 'translateY(' + slowScroll + 'px)',
            '-webkit-transform': 'translateY(' + slowScroll + 'px)',
            'opacity': opaScroll
        });

$blur.css({
            'opacity': blurScroll / wHeight
        });
    }
};

var scroller = new Scroller();
scroller.init();

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Lato);
html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
}
html {
    font: 1em/1.5 "Lato", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
}
body {
    font-size: 1.3em;
}
header {
    height: 100%;
    /* Image Credit: Unsplash.me */
    
    position: relative;
    overflow: hidden;
    background: url(https://unsplash.imgix.net/45/ZLSw0SXxThSrkXRIiCdT_DSC_0345.jpg?q=75&w=1080&h=1080&fit=max&fm=jpg&auto=format&s=857f07b76abac23a7fb7161cc7b12a46) center no-repeat;
    background-size: cover;
}
header .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
header h1,
header h2 {
    margin: 0;
}
header h2 {
    text-transform: uppercase;
    margin-top: -0.5em;
}
header hgroup {
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    border: 5px solid #fff;
    padding: 0.5em 3em;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 2;
}
header .overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #333 center no-repeat;
    background-size: cover;
    z-index: 0;
    opacity: 0;
    -webkit-filter: blur(4px);
}
.site {
    padding: 20em 0;
    text-align: center;
    background-color: #efefef;
    font-size: 0.8em;
    color: #444;
    position: relative;
}
.site a {
    color: #666;
    text-decoration: none;
}
.site a:hover {
    color: #222;
}
.site nav {
    position: absolute;
    top: 0;
    left: 0;
    background: #222;
    width: 100%;
}
.site nav a {
    padding: 10px 30px;
    font-size: 1.3em;
    display: inline-block;
}
.site nav a:hover {
    background: #333;
    color: #fff;
}

HTML

One Page Design + Parallax + Blur + Fixed menu。在页面向下滚动时，使用filter（滤镜）实现页面头部图片的模糊背景。

fixed menu

编辑器支持Emmet

快捷键

One Page Design + Parallax + Blur + Fixed menu。在页面向下滚动时，使用filter（滤镜）实现页面头部图片的模糊背景。

fixed menu

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：