下滑式头部+图片展览网格

全屏带背景图（hero image）和标题页面头部。点击右下角的网格图标，页面头部收缩上去，揭示一个图像网格的内容区域。点击关闭图标，页面头部下滑遮挡住内容区域。

模板，教程

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

第三方库
作品简介 1500
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">

<body>
    <div style="opacity: 0; width: 0; height:0; overflow:hidden;">
        <img src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/header01.jpg" /> <img src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/header02.jpg" />
    </div>
    <div id="container" class="container">
        <header class="intro">
            <img class="intro__image" src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/header03.jpg" alt="Iceland galcier" />
            <div class="intro__content">
                <h1 class="intro__title">Essential Feelings</h1>
                <div class="intro__subtitle">
                    <div class="intro__description">
                        A layout with a sliding header and an image grid. Photo courtesy of <a href="#">Dan Rubin</a>.
                    </div>
                    <button class="trigger">
                        <svg width="100%" height="100%" viewBox="0 0 60 60" preserveAspectRatio="none">
                            <g class="icon icon--grid">
                                <rect x="32.5" y="5.5" width="22" height="22" />
                                <rect x="4.5" y="5.5" width="22" height="22" />
                                <rect x="32.5" y="33.5" width="22" height="22" />
                                <rect x="4.5" y="33.5" width="22" height="22" />
                            </g>
                            <g class="icon icon--cross">
                                <line x1="4.5" y1="55.5" x2="54.953" y2="5.046" />
                                <line x1="54.953" y1="55.5" x2="4.5" y2="5.047" />
                            </g>
                        </svg>
                        <span>View content</span>
                    </button>
                </div>
            </div>
            
        </header>
        
        <section class="items-wrap">
            <a href="#" class="item">
                <img class="item__image" src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/item01.jpg" alt="item01" />
                <h2 class="item__title">Magnificence</h2>
            </a>
            <a href="#" class="item">
                <img class="item__image" src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/item02.jpg" alt="item02" />
                <h2 class="item__title">Electrifying</h2>
            </a>
            <a href="#" class="item">
                <img class="item__image" src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/item03.jpg" alt="item03" />
                <h2 class="item__title">Dynamic</h2>
            </a>
            <a href="#" class="item">
                <img class="item__image" src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/item04.jpg" alt="item04" />
                <h2 class="item__title">Crucial</h2>
            </a>
            <a href="#" class="item">
                <img class="item__image" src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/item05.jpg" alt="item05" />
                <h2 class="item__title">Awe-inspiring</h2>
            </a>
            <a href="#" class="item">
                <img class="item__image" src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/item06.jpg" alt="item06" />
                <h2 class="item__title">Serene</h2>
            </a>
            <a href="#" class="item">
                <img class="item__image" src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/item07.jpg" alt="item07" />
                <h2 class="item__title">Vulnerable</h2>
            </a>
            <a href="#" class="item">
                <img class="item__image" src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/item08.jpg" alt="item08" />
                <h2 class="item__title">Bountiful</h2>
            </a>
            <a href="#" class="item">
                <img class="item__image" src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/item09.jpg" alt="item09" />
                <h2 class="item__title">Endangered</h2>
            </a>
            <a href="#" class="item">
                <img class="item__image" src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/item10.jpg" alt="item10" />
                <h2 class="item__title">Beautiful</h2>
            </a>
            <a href="#" class="item">
                <img class="item__image" src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/item11.jpg" alt="item11" />
                <h2 class="item__title">Inspiring</h2>
            </a>
            <a href="#" class="item">
                <img class="item__image" src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/item12.jpg" alt="item12" />
                <h2 class="item__title">Refreshing</h2>
            </a>
        </section>
    </div>
    
    <script src="https://tympanus.net/Tutorials/SlidingHeaderLayout/js/classie.js"></script>
    <script>
        (function() {
            // For Demo purposes only
            var hasad = true;

var container = document.getElementById('container'),
                trigger = container.querySelector('button.trigger');

function toggleContent() {
                if (classie.has(container, 'container--open')) {
                    classie.remove(container, 'container--open');
                    classie.remove(trigger, 'trigger--active');
                    window.addEventListener('scroll', noscroll);
                } else {
                    classie.add(container, 'container--open');
                    classie.add(trigger, 'trigger--active');
                    window.removeEventListener('scroll', noscroll);

// For Demo purposes only
                    if (hasad) {
                        hasad = false;
                        var ad = document.getElementById('cdawrap');
                        if (ad) document.body.removeChild(ad);
                    }
                }
            }

function noscroll() {
                window.scrollTo(0, 0);
            }

// reset scrolling position
            document.body.scrollTop = document.documentElement.scrollTop = 0;

// disable scrolling
            window.addEventListener('scroll', noscroll);

trigger.addEventListener('click', toggleContent);

// For Demo purposes only (prevent jump on click)
            [].slice.call(document.querySelectorAll('.items-wrap a')).forEach(function(el) {
                el.onclick = function() {
                    return false;
                }
            });

})();
    </script>

</body>

</html>

全屏带背景图（hero image）和标题页面头部。点击右下角的网格图标，页面头部收缩上去，揭示一个图像网格的内容区域。点击关闭图标，页面头部下滑遮挡住内容区域。

模板，教程

编辑器支持Emmet

快捷键

全屏带背景图（hero image）和标题页面头部。点击右下角的网格图标，页面头部收缩上去，揭示一个图像网格的内容区域。点击关闭图标，页面头部下滑遮挡住内容区域。

模板，教程

使用jQuery实现图片网格浏览波浪式转场动效

平面风格随意散开的图片展览/相册

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：