<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Photography Website Concept</title>
<meta name="description" content="A photography-inspired website layout with an expanding stack slider and a background image tilt effect" />
<meta name="keywords" content="photography, template, layout, effect, expand, image stack, animation, flickity, tilt" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/flickity.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<div class="hero">
<div class="hero__back hero__back--static"></div>
<div class="hero__back hero__back--mover"></div>
<div class="hero__front"></div>
</div>
<header class="codrops-header">
<div class="codrops-links">
<a class="codrops-icon codrops-icon--prev" href="http://tympanus.net/Development/InteractiveColoringConcept/" title="Previous Demo"><span>Previous Demo</span></a>
<a class="codrops-icon codrops-icon--drop" href="http://tympanus.net/codrops/2015/05/06/photography-website-concept/" title="Back to the article"><span>Back to the Codrops article</span></a>
</div>
<h1 class="codrops-title">Christian Zana <span>Photography</span></h1>
<nav class="menu">
<a class="menu__item" href="#"><span>About</span></a>
<a class="menu__item menu__item--current" href="#"><span>Work</span></a>
<a class="menu__item" href="#"><span>Contact</span></a>
</nav>
</header>
<div class="stack-slider">
<div class="stacks-wrapper">
<div class="stack">
<h2 class="stack-title"><a href="#" data-text="Portraits"><span>Portraits</span></a></h2>
<div class="item">
<div class="item__content">
<img src="img/type1/1.jpg" alt="img01" />
<h3 class="item__title">Hoodie stumptown kitsch <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="item__content">
<img src="img/type1/2.jpg" alt="img02" />
<h3 class="item__title">Retro irony sartorial <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="item__content">
<img src="img/type1/3.jpg" alt="img03" />
<h3 class="item__title">Stumptown Brooklyn <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="item__content">
<img src="img/type1/4.jpg" alt="img04" />
<h3 class="item__title">Blog dreamcatcher squid <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="item__content">
<img src="img/type1/5.jpg" alt="img05" />
<h3 class="item__title">Meditation pickled mumblecore <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
<p>Images by <a href="https://www.flickr.com/photos/martinaphotography/">martinak15</a></p>
</div>
</div>
<div class="item">
<!-- Related demos -->
<div class="item__content item__content--related">
<p>If you enjoyed this demo you might also like:</p>
<a class="media-item" href="http://tympanus.net/Tutorials/SlidingHeaderLayout/">
<img class="media-item__img" src="img/related/SlidingHeaderLayout.jpg" />
<h3 class="media-item__title">Sliding Header Layout</h3>
</a>
<a class="media-item" href="http://tympanus.net/Development/ScatteredPolaroidsGallery/">
<img class="media-item__img" src="img/related/ScatteredPolaroidGallery.jpg" />
<h3 class="media-item__title">Scattered Polaroid Gallery</h3>
</a>
</div>
</div>
</div>
<div class="stack">
<h2 class="stack-title"><a href="#" data-text="Landscape"><span>Landscape</span></a></h2>
<div class="item">
<div class="item__content">
<img src="img/type3/1.jpg" alt="img01" />
<h3 class="item__title">Austin flannel salvia <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="item__content">
<img src="img/type3/2.jpg" alt="img02" />
<h3 class="item__title">Brunch vegan pickled cred <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="item__content">
<img src="img/type3/3.jpg" alt="img03" />
<h3 class="item__title">Blog dreamcatcher squid <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="item__content">
<img src="img/type3/4.jpg" alt="img04" />
<h3 class="item__title">Migas intelligentsia meh <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="item__content">
<img src="img/type3/5.jpg" alt="img05" />
<h3 class="item__title">Authentic locavore meditation <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
<p>Images by <a href="https://www.flickr.com/photos/56218409@N03/">Matthias Ripp</a></p>
</div>
</div>
<div class="item">
<!-- Related demos -->
<div class="item__content item__content--related">
<p>If you enjoyed this demo you might also like:</p>
<a class="media-item" href="http://tympanus.net/Tutorials/SlidingHeaderLayout/">
<img class="media-item__img" src="img/related/SlidingHeaderLayout.jpg" />
<h3 class="media-item__title">Sliding Header Layout</h3>
</a>
<a class="media-item" href="http://tympanus.net/Development/ScatteredPolaroidsGallery/">
<img class="media-item__img" src="img/related/ScatteredPolaroidGallery.jpg" />
<h3 class="media-item__title">Scattered Polaroid Gallery</h3>
</a>
</div>
</div>
</div>
<div class="stack">
<h2 class="stack-title"><a href="#" data-text="Miscellaneous"><span>Miscellaneous</span></a></h2>
<div class="item">
<div class="item__content">
<img src="img/type2/1.jpg" alt="img01" />
<h3 class="item__title">Chambray fingerstache <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="item__content">
<img src="img/type2/2.jpg" alt="img02" />
<h3 class="item__title">Chia pop-up meh <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="item__content">
<img src="img/type2/3.jpg" alt="img03" />
<h3 class="item__title">Butcher organic ennui <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="item__content">
<img src="img/type2/4.jpg" alt="img04" />
<h3 class="item__title">Four loko slow-carb Austin <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="item__content">
<img src="img/type2/5.jpg" alt="img05" />
<h3 class="item__title">Biodiesel freegan cardigan <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
<p>Images by <a href="https://www.flickr.com/photos/deanhochman/">Dean Hochman</a></p>
</div>
</div>
<div class="item">
<!-- Related demos -->
<div class="item__content item__content--related">
<p>If you enjoyed this demo you might also like:</p>
<a class="media-item" href="http://tympanus.net/Tutorials/SlidingHeaderLayout/">
<img class="media-item__img" src="img/related/SlidingHeaderLayout.jpg" />
<h3 class="media-item__title">Sliding Header Layout</h3>
</a>
<a class="media-item" href="http://tympanus.net/Development/ScatteredPolaroidsGallery/">
<img class="media-item__img" src="img/related/ScatteredPolaroidGallery.jpg" />
<h3 class="media-item__title">Scattered Polaroid Gallery</h3>
</a>
</div>
</div>
</div>
<div class="stack">
<h2 class="stack-title"><a href="#" data-text="Wildlife"><span>Wildlife</span></a></h2>
<div class="item">
<div class="item__content">
<img src="img/type4/1.jpg" alt="img01" />
<h3 class="item__title">Kickstarter keffiyeh <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="item__content">
<img src="img/type4/2.jpg" alt="img02" />
<h3 class="item__title">Heirloom commodo migas <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="item__content">
<img src="img/type4/3.jpg" alt="img03" />
<h3 class="item__title">Austin banjo swag <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="item__content">
<img src="img/type4/4.jpg" alt="img04" />
<h3 class="item__title">Small batch farm-to-table <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="item__content">
<img src="img/type4/5.jpg" alt="img05" />
<h3 class="item__title">Ethical leggings semiotics <span class="item__date">05/05/2015</span></h3>
<div class="item__details">
<ul>
<li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>
<li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>
<li><i class="icon icon-aperture"></i><span>ƒ/5.6</span></li>
<li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>
<li><i class="icon icon-iso"></i><span>80</span></li>
</ul>
</div>
<p>Images by <a href="https://www.flickr.com/photos/usfwsendsp/">USFWS Endangered Species</a></p>
</div>
</div>
<div class="item">
<!-- Related demos -->
<div class="item__content item__content--related">
<p>If you enjoyed this demo you might also like:</p>
<a class="media-item" href="http://tympanus.net/Tutorials/SlidingHeaderLayout/">
<img class="media-item__img" src="img/related/SlidingHeaderLayout.jpg" />
<h3 class="media-item__title">Sliding Header Layout</h3>
</a>
<a class="media-item" href="http://tympanus.net/Development/ScatteredPolaroidsGallery/">
<img class="media-item__img" src="img/related/ScatteredPolaroidGallery.jpg" />
<h3 class="media-item__title">Scattered Polaroid Gallery</h3>
</a>
</div>
</div>
</div>
</div>
<!-- /stacks-wrapper -->
</div>
<!-- /stacks -->
<img class="loader" src="img/three-dots.svg" width="60" alt="Loader image" />
</div>
<!-- /container -->
<!-- Flickity v1.0.0 http://flickity.metafizzy.co/ -->
<script src="js/flickity.pkgd.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/main.js"></script>
</body>
</html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h15802.shtml
