悬停相册菜单项时显示图像的快速预览

悬停在Photography菜单上，呈现一种全屏循环幻灯播放效果。点击该菜单，呈现图文瀑布流页面布局。

slider, preview

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

{
    // Check if an element is inside the viewport.
    const inViewport = (el) => {
        const scroll = window.scrollY || window.pageYOffset
        const boundsTop = el.getBoundingClientRect().top + scroll

const viewport = {
            top: scroll,
            bottom: scroll + winsize.height
        }

const bounds = {
            top: boundsTop,
            bottom: boundsTop + el.clientHeight
        }

return (
            (bounds.bottom >= viewport.top && bounds.bottom <= viewport.bottom) ||
            (bounds.top <= viewport.bottom && bounds.top >= viewport.top)
        );
    };

// Generates a random number.
    const randNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

// Line equation.
    const lineEq = (y2, y1, x2, x1, currentVal) => {
        // y = mx + b 
        var m = (y2 - y1) / (x2 - x1),
            b = y1 - m * x1;
        return m * currentVal + b;
    };

// The grid item obj.
    class GridItem {
        constructor(el) {
            this.DOM = {
                el: el
            };
            // Image wrap.
            this.DOM.wrap = this.DOM.el.querySelector('.grid__item-wrap');
            // Item´s title and year.
            this.DOM.title = this.DOM.el.querySelector('.grid__item-title');
            this.DOM.year = this.DOM.el.querySelector('.grid__item-year');
            // Get the size and position of both the main item and the wrap elements.
            this.calcDimentions();
            this.initEvents();
        }
        calcDimentions() {
            this.rects = {
                el: this.DOM.el.getBoundingClientRect(),
                wrap: this.DOM.wrap.getBoundingClientRect()
            };
        }
        initEvents() {
            this.layoutFn = () => this.calcDimentions();
            window.addEventListener('resize', () => this.layoutFn());
        }
    }

// The grid obj.
    class GridFx {
        constructor(el) {
            this.DOM = {
                el: el
            };
            // The grid items instances.
            this.items = [];
            Array.from(this.DOM.el.querySelectorAll('.grid__item')).forEach(item => this.items.push(new GridItem(item)));
            // The nav link that will trigger the loop effect.
            this.DOM.showPhotosCtrl = document.querySelector('nav.menu > .menu__item[href="#content-photography"]');
            // The content elements.
            this.DOM.content = {
                main: document.querySelector('.content--main'),
                photography: document.querySelector('.content--photography'),
                category: document.querySelector('.category'),
                backCtrl: document.querySelector('.backbutton'),
                home: document.querySelector('h2.title')
            };
            // Bind events.
            this.initEvents();
        }
        initEvents() {
                // Mouse events for the "photography" link.

// Mouseenter: Start looping through the photos that are inside the viewport.
                // We only loop through these so that we can see the whole animation (photo scaling down to its grid position)
                this.DOM.showPhotosCtrl.addEventListener('mouseenter', () => {
                    clearTimeout(this.mousetime);
                    this.currentItem = null;
                    this.mousetime = setTimeout(() => this.loopThroughPhotos(), 40);
                });
                // Mouseleave: stop the photo looping animation.
                this.DOM.showPhotosCtrl.addEventListener('mouseleave', () => {
                    clearTimeout(this.mousetime);
                    this.stopLoop();
                });
                // Click: stop the loop and show the grid. 
                this.DOM.showPhotosCtrl.addEventListener('click', (ev) => {
                    ev.preventDefault();
                    this.DOM.showPhotosCtrl.classList.add('menu__item--current');
                    this.showGrid();
                });

// Back from grid.
                this.backFn = () => {
                    this.DOM.showPhotosCtrl.classList.remove('menu__item--current');
                    if (this.isGridVisible) {
                        this.hideGrid();
                    }
                };
                this.DOM.content.backCtrl.addEventListener('click', () => this.backFn());
                this.DOM.content.home.addEventListener('click', (ev) => {
                    ev.preventDefault();
                    this.backFn();
                });
            }
            // Looping the grid photos.
        loopThroughPhotos() {
            if (this.isGridVisible) return;
            const loopInterval = 350;
            // Hide main content and show grid content.
            this.toggleContent();
            // Get the items that are in the viewport.
            // Also, set the transform so that the photos are centered.
            let inViewportItems = [];
            for (let item of this.items) {
                if (inViewport(item.DOM.wrap)) {
                    item.calcDimentions();
                    const itemRect = item.rects.wrap;
                    const ratioWrap = itemRect.height / itemRect.width;
                    const ratioWindow = winsize.height / winsize.width;
                    const scaleVal = ratioWrap > ratioWindow ? winsize.width / itemRect.width : (winsize.height) / itemRect.height;
                    TweenMax.set(item.DOM.wrap, {
                        x: winsize.width / 2 - (itemRect.left + itemRect.width / 2),
                        y: winsize.height / 2 - (itemRect.top + itemRect.height / 2),
                        scale: scaleVal
                    });
                    inViewportItems.push(item);
                }
            }

if (inViewportItems.length > 1) {
                let oldpos = -1;
                const loop = (pos = 0) => {
                    // Cache the previous item.
                    if (oldpos >= 0) {
                        const oldel = inViewportItems[oldpos];
                        // Reset.
                        TweenMax.set(oldel.DOM.wrap, {
                            opacity: 0,
                            zIndex: 1
                        });
                    }
                    this.currentItem = inViewportItems[pos];
                    // Fade in current visible item for the first iteration in the loop.
                    if (oldpos === -1) {
                        TweenMax.set(this.currentItem.DOM.wrap, {
                            zIndex: 998
                        });
                        TweenMax.to(this.currentItem.DOM.wrap, 0.2, {
                            opacity: 1
                        });
                    } else {
                        TweenMax.set(this.currentItem.DOM.wrap, {
                            opacity: 1,
                            zIndex: 998
                        });
                    }
                    oldpos = pos;
                    pos = pos < inViewportItems.length - 1 ? pos + 1 : 0;
                    this.looptimeout = setTimeout(() => loop(pos), loopInterval);
                };
                loop();
            }
        }
        stopLoop() {
            if (this.isGridVisible) return;
            // Hide grid content and show main content.
            this.toggleContent(false);
            // Stop the loop.
            clearTimeout(this.looptimeout);

for (let item of this.items) {
                if (item == this.currentItem) {
                    // Fade out current visible item.
                    TweenMax.to(item.DOM.wrap, 0.2, {
                        opacity: 0,
                        // Reset.
                        onComplete: () => TweenMax.set(item.DOM.wrap, {
                            x: 0,
                            y: 0,
                            scale: 1
                        })
                    });
                } else {
                    // Reset.
                    TweenMax.set(item.DOM.wrap, {
                        opacity: 0,
                        x: 0,
                        y: 0,
                        scale: 1
                    });
                }
            }
        }
        showGrid() {
            if (this.isGridVisible) return;
            this.isGridVisible = true;
            clearTimeout(this.looptimeout);
            // Hide main content and show grid content.
            this.toggleContent();

// Calculate if the current item is on the left or right side. This will determine the movement for the other items.
            let side = 'left';
            if (this.currentItem) {
                const itemRect = this.currentItem.rects.el;
                // Check if the item is on the left or right side of the viewport. This will determine the direction for the animations of the grid items.
                side = itemRect.left + itemRect.width / 2 < winsize.width / 2 ? 'left' : 'right';
            }

for (let item of this.items) {
                let duration;
                let ease = new Ease(BezierEasing(0.2, 1, 0.3, 1));

// Scale down to its grid position.
                if (this.currentItem == item) {
                    duration = .8;
                    // Animate the current visible item to its grid position.
                    TweenMax.to(item.DOM.wrap, duration, {
                        ease: ease,
                        x: 0,
                        y: 0,
                        scale: 1,
                        onComplete: () => TweenMax.set(item.DOM.wrap, {
                            zIndex: 1
                        })
                    });
                } else {
                    // Animate all the other grid items.
                    // The duration and initial positions will depend on the distance from their center to the boundaries of the viewport.
                    const itemRect = item.rects.el;
                    duration = lineEq(side === 'right' ? 7 : 14, side === 'right' ? 14 : 7, winsize.width, 0, itemRect.left + itemRect.width / 2) / 10;
                    TweenMax.to(item.DOM.wrap, duration, {
                        ease: ease,
                        startAt: {
                            x: (side === 'left' ? 1 : -1) * (lineEq(side === 'right' ? 100 : winsize.width, side === 'right' ? winsize.width : 100, winsize.width, 0, itemRect.left + itemRect.width / 2)),
                            y: itemRect.top + itemRect.height / 2 < winsize.height / 2 ? randNumber(-400, -200) : randNumber(200, 400),
                            scale: 1,
                            opacity: 1
                        },
                        x: 0,
                        y: 0,
                        opacity: 1
                    });
                }

// Animate title and year.
                TweenMax.to(item.DOM.title, duration, {
                    ease: ease,
                    startAt: {
                        x: side === 'left' ? 500 : -500,
                        opacity: 0
                    },
                    x: 0,
                    opacity: 1
                });
                TweenMax.to(item.DOM.year, duration, {
                    ease: ease,
                    startAt: {
                        x: side === 'left' ? 100 : -100,
                        opacity: 0
                    },
                    x: 0,
                    opacity: 1
                });
            };

// Animate the left panel (categories) in.
            TweenMax.to(this.DOM.content.category, 1, {
                ease: new Ease(BezierEasing(0.2, 1, 0.3, 1)),
                startAt: {
                    x: -50,
                    opacity: 0
                },
                x: 0,
                opacity: 1
            });
        }
        hideGrid() {
            const duration = 0.5;
            const ease = new Ease(BezierEasing(0.2, 1, 0.3, 1));

// Animate the left panel (categories) out.
            TweenMax.to(this.DOM.content.category, duration, {
                ease: ease,
                x: -50,
                opacity: 0
            });
            // Animate the grid items out.
            for (let item of this.items) {
                TweenMax.to([item.DOM.wrap, item.DOM.title, item.DOM.year], duration, {
                    ease: ease,
                    x: -50,
                    opacity: 0,
                    // Reset transform.
                    onComplete: () => TweenMax.set(item.DOM.wrap, {
                        x: 0
                    })
                });
            }
            // Show main/home.
            TweenMax.to(this.DOM.content.main, duration, {
                ease: ease,
                startAt: {
                    x: 50,
                    opacity: 0
                },
                x: 0,
                opacity: 1,
                // Hide grid content and show main content.
                onComplete: () => {
                    this.isGridVisible = false;
                    this.toggleContent(false);
                }
            });
        }
        toggleContent(isGrid = true) {
            TweenMax.set(this.DOM.content.main, {
                opacity: isGrid ? 0 : 1
            });
            this.DOM.content.main.classList[isGrid ? 'remove' : 'add']('content--current');
            this.DOM.content.photography.classList[isGrid ? 'add' : 'remove']('content--current');
        }
    }

// Window sizes.
    let winsize;
    const calcWinsize = () => winsize = {
        width: window.innerWidth,
        height: window.innerHeight
    };
    calcWinsize();
    window.addEventListener('resize', calcWinsize);

// Initialize the grid instance.
    new GridFx(document.querySelector('.grid'));

// Preload all the images in the page..
    imagesLoaded(document.querySelectorAll('.grid__item-img'), {
        background: true
    }, () => document.body.classList.remove('loading'));
}

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Anton|Buenard:400,700');
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}
audio,
canvas,
video {
    display: inline-block;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
[hidden] {
    display: none;
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
}
a:focus {
    outline: thin dotted;
}
a:active,
a:hover {
    outline: 0;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
abbr[title] {
    border-bottom: 1px dotted;
}
b,
strong {
    font-weight: bold;
}
dfn {
    font-style: italic;
}
hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}
mark {
    background: #ff0;
    color: #000;
}
code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}
pre {
    white-space: pre-wrap;
}
q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
img {
    border: 0;
}
svg:not(:root) {
    overflow: hidden;
}
figure {
    margin: 0;
}
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
legend {
    border: 0;
    padding: 0;
}
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}
button,
input {
    line-height: normal;
}
button,
select {
    text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
button[disabled],
html input[disabled] {
    cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
textarea {
    overflow: auto;
    vertical-align: top;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
*,
*::after,
*::before {
    box-sizing: border-box;
}
body {
    --color-text: #000;
    --color-alt: #ccc;
    --color-bg: #fff;
    --color-link: #000;
    --color-link-hover: #000;
    --color-info: #000;
    --color-textlink: #f73378;
    font-family: Futura, "futura-pt", sans-serif;
    min-height: 100vh;
    color: #57585c;
    color: var(--color-text);
    background-color: #fff;
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.preview-open {
    overflow: hidden;
}
/* Page Loader */

.js .loading::before {
    content: '';
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
}
.js .loading::after {
    content: '';
    position: fixed;
    z-index: 100000;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0.4;
    background: var(--color-link);
    animation: loaderAnim 0.7s linear infinite alternate forwards;
}
@keyframes loaderAnim {
    to {
        opacity: 1;
        transform: scale3d(0.5, 0.5, 1);
    }
}
a {
    text-decoration: none;
    color: var(--color-link);
    outline: none;
}
a:hover,
a:focus {
    color: var(--color-link-hover);
    outline: none;
}
.hidden {
    position: absolute;
    overflow: hidden;
    width: 0;
    height: 0;
    pointer-events: none;
}
/* Icons */

.icon {
    display: block;
    width: 1.5em;
    height: 1.5em;
    margin: 0 auto;
    fill: currentColor;
}
main {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: 'title' 'menu' 'content-main' 'content-photography' 'footer';
}
.js main {
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 'title' 'menu' 'content' 'footer';
}
.title {
    position: relative;
    padding: 2rem 0 0 2rem;
    margin: 0;
    font-size: 1.15rem;
    z-index: 1000;
    grid-area: title;
}
.menu {
    position: relative;
    text-transform: lowercase;
    padding: 1rem 2rem;
    font-size: 1.15rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    z-index: 1000;
    max-width: 23rem;
    grid-area: menu;
}
.menu__item {
    position: relative;
}
.menu__item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 3px;
    background: var(--color-textlink);
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
    transform-origin: 0 0;
}
.menu__item:hover::after,
.menu__item--current::after {
    transform: scale3d(1, 1, 1);
}
.content {
    position: relative;
    padding: 0 2rem;
}
.js .content {
    pointer-events: none;
}
.content--main {
    grid-area: content-main;
}
.js .content--main {
    opacity: 0;
    grid-area: content;
}
.content--photography {
    grid-area: content-photography;
}
.js .content--photography {
    grid-area: content;
}
.js .content--current {
    pointer-events: auto;
    opacity: 1;
}
/* Header */

.info {
    margin: 0.25rem 0 0 0;
}
/* Top Navigation Style */

.quote {
    margin: 0 0 7vh 0;
}
.quote__author {
    margin: 0;
    font-weight: normal;
}
.content__paragraph {
    font-size: 1.15rem;
}
.content__paragraph a {
    color: var(--color-textlink);
    font-weight: bold;
}
.quote__text {
    color: var(--color-alt);
}
.social__title {
    display: block;
    font-weight: bold;
}
.social__link {
    color: var(--color-alt);
    margin-bottom: 1rem;
    display: inline-block;
}
.social__link:hover {
    color: var(--color-textlink);
}
.grid {
    position: relative;
    --gap: 3vw;
    width: 90vw;
    display: grid;
    grid-gap: var(--gap);
    grid-auto-rows: calc((1700px / 20) - var(--gap));
    grid-auto-columns: calc((90vw / 15) - var(--gap));
}
.grid__item:nth-child(1) {
    grid-area: 1 / 1 / 4 / 10;
}
.grid__item:nth-child(2) {
    grid-area: 1 / 10 / 4 / 16;
}
.grid__item:nth-child(3) {
    grid-area: 4 / 1 / 7 / 10;
}
.grid__item:nth-child(4) {
    grid-area: 4 / 10 / 8 / 16;
}
.grid__item:nth-child(5) {
    grid-area: 7 / 1 / 11 / 8;
}
.grid__item:nth-child(6) {
    grid-area: 8 / 8 / 13 / 16;
}
.grid__item:nth-child(7) {
    grid-area: 11 / 1 / 16 / 8;
}
.grid__item:nth-child(8) {
    grid-area: 13 / 8 / 17 / 16;
}
.grid__item {
    position: relative;
    display: flex;
    flex-direction: column;
}
.grid__item-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
}
.js .grid__item-wrap {
    opacity: 0;
}
.grid__item-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    transition: transform 1s cubic-bezier(0.2, 1, 0.8, 1);
}
.grid__item-wrap:hover .grid__item-img {
    transform: scale3d(1.1, 1.1, 1);
}
.grid__item-year {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 0 0 2rem;
    transform: rotate3d(0, 0, 1, -90deg) translateX(-100%);
    transform-origin: 0 0;
    margin: 0.75rem 0.5rem;
    z-index: 999;
}
.js .grid__item-year {
    opacity: 0;
}
.grid__item-year::before {
    content: '';
    position: absolute;
    height: 2px;
    width: 1.6rem;
    background: #000;
    left: 0;
    top: 45%;
}
.grid__item-title {
    margin: 0;
    padding: 0.5rem 0 0 0;
    font-size: 1rem;
    color: #aaa;
    font-weight: 400;
    z-index: 999;
}
.js .grid__item-title {
    opacity: 0;
}
.grid__item-title strong {
    color: #000;
}
.backbutton {
    border: 0;
    padding: 0;
    margin: 0 0 2rem -0.15rem;
    background: none;
}
.backbutton:focus {
    outline: none;
}
.backbutton:hover {
    color: var(--color-textlink);
}
.category {
    position: relative;
}
.js .category {
    opacity: 0;
}
.category__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.category__list-item {
    display: inline-block;
    text-transform: uppercase;
    margin: 0.5rem 0.5rem 0 0;
    color: var(--color-textlink);
    cursor: default;
}
.category__list-item--current {
    font-weight: bold;
    color: var(--color-text);
}
.category__years {
    margin: 1rem 0;
    font-size: 0.75rem;
    display: block;
    color: var(--color-alt);
}
.footer {
    grid-area: footer;
}
.footer__left {
    padding: 2rem;
    color: var(--color-alt);
}
.footer__right {
    color: #fff;
    background: #000;
    padding: 5vw;
}
.footer__right a {
    color: #fff;
}
.footer__right a:hover {
    color: var(--color-textlink);
}
.footer__column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 1rem 0;
}
@media screen and (min-width: 45em) {
    .content--main {
        /* display: grid; */
        /* grid-template-columns: 50vw 30vw; */
        /* grid-gap: 10vw; */
    }
    .grid__item:nth-child(1) {
        grid-area: 1 / 1 / 5 / 9;
    }
    .grid__item:nth-child(2) {
        grid-area: 2 / 9 / 5 / 15;
    }
    .grid__item:nth-child(3) {
        grid-area: 5 / 1 / 8 / 6;
    }
    .grid__item:nth-child(4) {
        grid-area: 5 / 6 / 9 / 14;
    }
    .grid__item:nth-child(5) {
        grid-area: 8 / 2 / 10 / 6;
    }
    .grid__item:nth-child(6) {
        grid-area: 9 / 6 / 14 / 16;
    }
    .grid__item:nth-child(7) {
        grid-area: 10 / 1 / 16 / 6;
    }
    .grid__item:nth-child(8) {
        grid-area: 14 / 6 / 19 / 15;
    }
}
@media screen and (min-width: 60em) {
    .js main {
        grid-template-columns: 10vw 60vw 30vw;
        grid-template-rows: auto auto auto;
        grid-template-areas: 'title title menu' '... content content' '... footer footer';
    }
    .info {
        order: 3;
        margin: 0;
    }
    .menu {
        padding: 2rem 1rem 2rem 0;
    }
    .content {
        padding: 0;
        margin-top: 5rem;
    }
    .content--main {
        /* grid-template-columns: 50vw 20vw; */
    }
    .content--photography {
        display: grid;
        grid-template-columns: 20vw 70vw;
    }
    .content__paragraph {
        font-size: 2.4vw;
    }
    .category__list-item {
        display: block;
        margin: 0.5rem 0;
    }
    .category__years {
        margin-top: 5rem;
    }
    .grid {
        width: 63vw;
        grid-auto-rows: calc((1700px / 20) - var(--gap));
        grid-auto-columns: calc((63vw / 15) - var(--gap));
    }
    .footer {
        display: grid;
        align-items: center;
        grid-template-columns: 20vw 70vw;
        margin-top: 20vh;
    }
    .footer__left {
        padding: 0;
    }
    .footer__right {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 100%;
    }
    .footer__column {
        margin: 0;
    }
}

HTML

<main>
    <h2 class="title"><a href="#content-main">Alexandra Sokolov</a></h2>
    <nav class="menu">
        <a href="#content-photography" class="menu__item">Photography</a>
        <a href="#content-exhibitions" class="menu__item">Exhibitions</a>
        <a href="#content-contact" class="menu__item">Contact</a>
    </nav>
    <div class="content content--main content--current" id="content-main">
        <div class="content__text">
            <p class="content__paragraph">They were four men living all together yet they were all alone. Sunny Days sweepin' the clouds away. On my way to where the air is sweet. Can you tell me how to get how to get to Sesame Street! Come and dance on our floor. Take a step that
                is new. We've a loveable space that needs your face threes company too.</p>
            <p class="content__paragraph">Come and knock on our door. We've been waiting for you. Where the kisses are hers and hers and his. Three's company too. Their house is a museum where people come to see ‘em. They really are a scream the Addams Family. </p>
            <p class="content__paragraph">Till the one day when the lady met this fellow and they knew it was much more than a hunch. A man is born he's a man of means. Then along come two they got nothin' but their jeans. So lets make the most of this beautiful day. Since we're together.</p>
        </div>
        <aside class="content__sidebar">
            <blockquote class="quote">
                <h4 class="quote__author">Susan Sontag</h4>
                <p class="quote__text">
                    “All photographs are memento mori. To take a photograph is to participate in another person’s (or thing’s) mortality, vulnerability, mutability. Precisely by slicing out this moment and freezing it, all photographs testify to time’s relentless melt.”
                </p>
            </blockquote>
            <blockquote class="quote">
                <h4 class="quote__author">Elliott Erwitt</h4>
                <p class="quote__text">
                    “To me, photography is an art of observation. It’s about finding something interesting in an ordinary place… I’ve found it has little to do with the things you see and everything to do with the way you see them.”
                </p>
            </blockquote>
            <blockquote class="quote">
                <h4 class="quote__author">Henri Cartier-Bresson</h4>
                <p class="quote__text">
                    “To photograph is to hold one's breath, when all faculties converge to capture fleeting reality. It's at that precise moment that mastering an image becomes a great physical and intellectual joy.”
                </p>
            </blockquote>
            <div class="social">
                <span class="social__title">Email</span>
                <a href="#" class="social__link">asokolov@mail.com</a>
            </div>
            <div class="social">
                <span class="social__title">Twitter</span>
                <a href="#" class="social__link">@asokolov</a>
            </div>
            <div class="social">
                <span class="social__title">Flickr</span>
                <a href="#" class="social__link">Alexsokolov</a>
            </div>
        </aside>
    </div>

<div class="content content--photography" id="content-photography">
        <aside class="category">
            <button class="backbutton">
                <svg class="icon icon--arrow">
                    <use xlink:href="#icon-arrow"></use>
                </svg>
            </button>
            <ul class="category__list">
                <li class="category__list-item category__list-item--current">Portraits (8)</li>
                <li class="category__list-item">Landscape (12)</li>
                <li class="category__list-item">Architecture (9)</li>
                <li class="category__list-item">Sports (10)</li>
                <li class="category__list-item">Weddings (19)</li>
            </ul>
            <span class="category__years">2001 &mdash; 2018</span>
        </aside>
        <div class="grid">
            <a class="grid__item">
                <div class="grid__item-wrap">
                    <div class="grid__item-img" style="background-image: url(/uploads/161001/normal1.jpg);"></div>
                </div>
                <span class="grid__item-year">2018</span>
                <h3 class="grid__item-title"><strong>Look at me</strong> An exploration of the mind</h3>
            </a>
            <a class="grid__item">
                <div class="grid__item-wrap">
                    <div class="grid__item-img" style="background-image: url(/uploads/161001/normal2.jpg);"></div>
                </div>
                <span class="grid__item-year">2017</span>
                <h3 class="grid__item-title"><strong>Versatile</strong> Introspection and psyche</h3>
            </a>
            <a class="grid__item">
                <div class="grid__item-wrap">
                    <div class="grid__item-img" style="background-image: url(/uploads/161001/normal3.jpg);"></div>
                </div>
                <span class="grid__item-year">2017</span>
                <h3 class="grid__item-title"><strong>Profile</strong> Faces and stories</h3>
            </a>
            <a class="grid__item">
                <div class="grid__item-wrap">
                    <div class="grid__item-img" style="background-image: url(/uploads/161001/normal4.jpg);"></div>
                </div>
                <span class="grid__item-year">2016</span>
                <h3 class="grid__item-title"><strong>Somewhere</strong> Finding inspiration in the rare places</h3>
            </a>
        </div>
        
    </div>

<footer class="footer">
        <div class="footer__left">©Alexandra Sokolov
            <br>2018</div>
        <div class="footer__right">
            <div class="footer__column">
                <a href="#">Stories &amp; Awards</a>
                <a href="#">Exhibitions</a>
                <a href="#">Contact</a>
            </div>
            <div class="footer__column">
                <a href="#">Case Studies</a>
                <a href="#">Advertisement</a>
                <a href="#">Friends &amp; Clients</a>
            </div>
            <div class="footer__column">
                <span class="address">
                    Ulitsa Lva Tolstogo 46<br>
                    Moscow, Russia<br>
                    +7 495 119-27-77
                </span>
            </div>
        </div>
    </footer>
</main>

悬停在Photography菜单上，呈现一种全屏循环幻灯播放效果。点击该菜单，呈现图文瀑布流页面布局。

slider, preview

编辑器支持Emmet

快捷键

悬停在Photography菜单上，呈现一种全屏循环幻灯播放效果。点击该菜单，呈现图文瀑布流页面布局。

slider, preview

一款靠鼠标悬停来快速切换的幻灯片

带快速运动过渡效果的图像幻灯片

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：