月份：2012年12月

Gemma Booth – 英国女摄影师

Camilla Akrans – 瑞典女摄影师

原文：STACKSLIDER: A FUN 3D IMAGE SLIDER

StackSlider是一个高度实验性的、使用CSS 3D变换和透视来探索与众不同的和有趣的缩略图视觉概念的jQuery图像幻灯片插件。我们的想法是通过2个成堆的图片间的迁移，一个项目被从堆栈顶部升起并且移动旋转到容器中央可视的位置，先前的图片被转移到另一个堆栈上。

演示所使用的插画来自于Isaac Montemayor，可以在Dribbble或者他自己的网站上看到他的作品。

演示demo ｜ 源码下载

请注意这是高度实验性的且未经过充分测试，显而易见的问题是3D效果仅工作于支持它的浏览器上，回退的办法是当导航时简单的显示或隐藏图片，而在Webkit浏览器上效果最平滑。

要使用该插件需要如下结构的无序列表：

<ul id="st-stack" class="st-stack-raw">
    <li>
        <div class="st-item">
            <a href="http://drbl.in/fgQV">
                <img src="images/1.jpg" />
            </a>
        </div>
        <div class="st-title">
            <h2>Graverobber</h2><h3>by Isaac Montemayor</h3>
        </div>
    </li>
    <li> <!-- ... --> </li>
    <li> <!-- ... --> </li>
    <li> <!-- ... --> </li>
    <!-- ... -->
</ul>

当js可用时，类名为st-stack-raw的class仅用于隐藏列表，它也可以当不支持js时作为回退方式用来定义列表样式。

该插件可以被这样调用：

$( '#st-stack' ).stackslider();

这将声称一个新的结构：一个含有项目的列表，两个堆栈，标题容器和一个导航。

参数设置

以下默认设置可用：

// default transition speed
speed : 700,
 
// default transition easing
easing : 'ease-in-out',
 
// render both piles
piles : true

所有样式在style.css中定义，我们使用媒体查询来调整缩略图的尺寸和标题及导航的位置。如果你想尝试，确保改变媒体查询以满足你的容器和图像尺寸。

原创译文 转载请注明出处
英文原文：STACKSLIDER: A FUN 3D IMAGE SLIDER

原文：ANIMATED RESPONSIVE IMAGE GRID

今天，我们想要跟你分享一个用来创建响应式图片网格效果的jQuery插件，想法是将一系列的图片根据定义好的行数和列数来组成一个图片网格，剩下的图片将会有不同的动画和延迟效果。我们可以通过尺寸设置来定义在不同屏幕宽度下的网格布局。

因为我们可以随机的安排新图片及它们的转场效果，所以该组件可以很好的作为网站的背景或是装饰元素。

演示demo ｜ 源码下载

图片来自于Sherman Geronimo-Tan，并且由Creative Commons Attribution-NonCommercial 3.0 Unported License授权许可。

HTML结构是一个简单的包含锚点和图片的无序列表：

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
	<ul>
		<li><a href="#"><img src="images/medium/1.jpg" alt="Whatever works"/></a></li>
		<li><a href="#"><img src="images/medium/2.jpg" alt="Anything else"/></a></li>
		<!-- ... -->
	</ul>
</div>

要调用该插件 只需要：

$(function() {
             
    $( '#ri-grid' ).gridrotator();
 
});

别忘了包含其它必须的脚本。

参数设置

以下可选参数：

// number of rows
rows            : 4,
 
// number of columns 
columns         : 10,
 
// rows/columns for different screen widths
// i.e. w768 is for screens smaller than 768 pixels
w1024           : {
    rows    : 3,
    columns : 8
},
 
w768            : {
    rows    : 3,
    columns : 7
},
 
w480            : {
    rows    : 3,
    columns : 5
},
 
w320            : {
    rows    : 2,
    columns : 4
},
 
w240            : {
    rows    : 2,
    columns : 3
},
 
// step: number of items that are replaced at the same time
// random || [some number]
// note: for performance issues, the number should not be > options.maxStep
step            : 'random',
maxStep         : 3,
 
// prevent user to click the items
preventClick    : true,
 
// animation type
// showHide || fadeInOut || slideLeft || 
// slideRight || slideTop || slideBottom || 
// rotateLeft || rotateRight || rotateTop || 
// rotateBottom || scale || rotate3d || 
// rotateLeftScale || rotateRightScale || 
// rotateTopScale || rotateBottomScale || random
animType        : 'random',
 
// animation speed
animSpeed       : 500,
 
// animation easings
animEasingOut   : 'linear',
animEasingIn    : 'linear',
 
// the item(s) will be replaced every 3 seconds
// note: for performance issues, the time "can't" be < 300 ms
interval        : 3000,
// if false the animations will not start
// use false if onhover is true for example
slideshow       : true,
// if true the items will switch when hovered
onhover     : false,
// ids of elements that shouldn't change
nochange        : []

当定义网格的尺寸时，你必须记住你将要放置在网格中的图片要少于实际列表中的图片数量。比如说你有50张图片，就可以定义成4行5列，这将创建一个20张图片网格并且剩下的30张用于切换。

查看五种不同配置下的Demo演示：

Demo1：随机动画 ／ 55%容器宽度 ／ 间隔3秒切换

Demo2：淡出动画 ／ 100%容器宽度 ／ 每次单张图片切换 ／ 间隔600毫秒切换

Demo3：随机动画 ／ 100%容器宽度 ／ 每次最多2张图片切换 ／ 间隔2秒切换

Demo4：随机动画 ／ 55%容器宽度 ／ 间隔3秒切换 ／ 元素1、2、3和4不切换 ／ 元素可点击

Demo5：旋转底部动画 ／ 55%容器宽度 ／无幻灯片效果 ／ 鼠标悬停响应

感谢Jesse Chase给了我们类似的想法并启发了我们。

希望你会喜欢！

原创译文 转载请注明出处
英文原文：ANIMATED RESPONSIVE IMAGE GRID

原文：IMAGE ACCORDION WITH CSS3

今天，我们要创建一个仅靠CSS来实现的图片手风琴效果。我们将使用一个嵌套的结构，以及单选按钮和兄弟选择器来控制幻灯片。我们的想法是使幻灯片的每一项，通过覆盖在整个幻灯片的单选按钮“可点击”，并且通过点击它来改变子元素的位置。

演示demo ｜ 源码下载

演示demo中使用的图片来源于Andrey & Lili的项目“L’aquarelle”：L’aquarelle on Behance，并且是在Creative Commons Attribution-NonCommercial 3.0 Unported License授权许可下的。

标记

其主要思想是创建一个嵌套结构，这将允许我们简单地将各自的手风琴幻灯片移到一边。例如，移动一张幻灯片将移动它所有的内部幻灯片（嵌套元素）。每一个figure将包含一张图片、一个用来控制幻灯片打开的单选按钮和一个标题。

<div class="ia-container">
				
	<figure>
		<img src="images/1.jpg" alt="image01" />
		<input type="radio" name="radio-set" checked="checked" />
		<figcaption><span>True Colors</span></figcaption>
		
		<figure>
			<img src="images/2.jpg" alt="image02" />
			<input type="radio" name="radio-set" />
			<figcaption><span>Honest Light</span></figcaption>
			
			<figure>
				<!-- ... -->
				
				<figure>
					<!-- ... -->
					
					<figure>
						<!-- ... -->
						
						<figure>
							<!-- ... -->
				
							<figure>
								<!-- ... -->										

								<figure>
									<!-- ... -->
								</figure>
								
							</figure>
				
						</figure>	
							
					</figure>	
						
				</figure>
					
			</figure>
			
		</figure>
		
	</figure>
	
</div>

你也可以在这里使用不同的内容，但重要的是整个嵌套结构和单选按钮。

CSS

我们将给幻灯片一个宽度值并且隐藏其溢出部分：

.ia-container {
	width: 685px;
	margin: 20px auto;
	overflow: hidden;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.08);
	border: 7px solid rgba(255,255,255,0.6);
}

宽度的计算方式如下：

( (Number of images – 1) * 50px ) + 335px

其中，图片可见区域的宽度是50px，图片的宽度是335px。在我们的例子中： ( (8 – 1) * 50px ) + 335px = 350px + 335px = 685px。

每一个figure的left值设为50px(可见区域)，这应该是相对它们父级的位置。这使得幻灯片看起来像是手风琴效果。figure的宽度是335px，和它内部的图片宽度一致，它还将有一个transition用于平滑移动：

.ia-container figure {
    position: absolute;
	top: 0;
	left: 50px; /* width of visible piece */
	width: 335px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
    transition: all 0.3s ease-in-out;
}

我们通过给第一个figure设置!important来将其彻底定位到左边，因为之后将使用media queries并且我们想要使这个figure的左边始终为0。为了给幻灯片设置一个高度我们将position设置为relative:

.ia-container > figure {
    position: relative;
	left: 0 !important;
}

图片将有一个100%的宽度来填满整个figure：

.ia-container img {
	display: block;
	width: 100%;
}

每个单选按钮将覆盖幻灯片的可见部分，我们将不透明度设置为0，因此我们不能看到它，但仍然可以点击它。z-index应该设的高以致于可以覆盖所有的一切：

.ia-container input {
	position: absolute;
	top: 0;
	left: 0;
	width: 50px; /* just cover visible part */
	height: 100%;
	cursor: pointer;
	border: 0;
	padding: 0;
    opacity: 0;
	z-index: 100;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

当input被选中或点击，我们希望它立即消失。实际上我们可以将宽度设为0，但因为chrome浏览器一些奇怪的行为我们仍然需要它在右边（如果我们没有在当前input上悬停过，下一个项目将不会被触发）。我们也希望其余的figure通过一个transition来移动到左边：

.ia-container input:checked{
	width: 5px;
	left: auto;
	right: 0px;
}
.ia-container input:checked ~ figure {
    left: 335px;
    transition: all 0.7s ease-in-out;
}

设置两个不同的过渡时长（一个默认状态，另一个当我们输入时）会产生拖曳效果，通过改变这些值将产生不同的效果。

figure的标题将通过一个透明的深色背景来覆盖所有的元素，span将被放置在最初的figure的上半部分：

.ia-container figcaption {
	width: 100%;
	height: 100%;
	background: rgba(87, 73, 81, 0.1);
	position: absolute;
	top: 0px;
    transition: all 0.2s linear;
}

.ia-container figcaption span {
	position: absolute;
	top: 40%;
	margin-top: -30px;
	right: 20px;
	left: 20px;
	overflow: hidden;
	text-align: center;
	background: rgba(87, 73, 81, 0.3);
	line-height: 20px;
	font-size: 18px;
    opacity: 0;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-weight: 700;
	padding: 20px;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
} 

当一个幻灯片被选中，我们将通过设置不透明度值的RGBA为0来删除叠加。

.ia-container input:checked + figcaption,
.ia-container input:checked:hover + figcaption{
	background: rgba(87, 73, 81, 0);
}

span会淡入并且伴随延迟从顶部滑入（幻灯片首先打开）：

.ia-container input:checked + figcaption span {
    transition: all 0.4s ease-in-out 0.5s;
	opacity: 1;
	top: 50%;
}

由于最后一张幻灯片在当我们选中时没有任何其他幻灯片来自右边，延迟不需要那么高（我们给最后一个单选按钮一个名为ia-selector-last的id）：

.ia-container #ia-selector-last:checked + figcaption span {
	transition-delay: 0.3s;
}

当我们将鼠标悬停在一个已关闭幻灯片的可见区域，我们希望有一个轻微的悬停效果。由于单选按钮覆盖这一部分（它在所有其他元素的顶部），我们将使用相邻兄弟选择器（这要求input后面直接跟着figcaption元素）：

.ia-container input:hover + figcaption {
	background: rgba(87, 73, 81, 0.03);
}

选中的input之后的所有的兄弟元素应该得到一个低的z-index，再次在Chrome浏览器中，以防止一些不必要的行为：

.ia-container input:checked ~ figure input{
    z-index: 1;
}

最后，我们将添加一些media queries使幻灯片得到响应：

@media screen and (max-width: 720px) {
    .ia-container { 
		width: 540px; 
	}
	
	.ia-container figure { 
		left: 40px; 
		width: 260px; 
	}
	
	.ia-container input { 
		width: 40px; 
	}
	
	.ia-container input:checked ~ figure { 
		left: 260px; 
	}
	
	.ia-container figcaption span { 
		font-size: 16px; 
	}
}

@media screen and (max-width: 520px) {
    .ia-container { 
		width: 320px; 
	}
	
	.ia-container figure { 
		left: 20px; 
		width: 180px; 
	}
	
	.ia-container input { 
		width: 20px; 
	}
	
	.ia-container input:checked ~ figure { 
		left: 180px; 
	}
	
	.ia-container figcaption span { 
		font-size: 12px; 
		letter-spacing: 2px; 
		padding: 10px; 
		margin-top: -20px; 
	} 

}

原创译文 转载请注明出处
英文原文：IMAGE ACCORDION WITH CSS3

原文：FULLSCREEN BACKGROUND IMAGE SLIDESHOW WITH CSS3

今天我们将创建一个仅依靠CSS3实现的全屏背景图幻灯片播放效果。我们将创建不同的图片转换效果以及使用CSS动画来使标题出现。

演示demo ｜ 源码下载

请注意，这仅适用于支持CSS动画的浏览器。

标记

我们将给幻灯片使用一个无序列表，并且给每张图片添加一个span和一个含有标题元素的div：

<ul class="cb-slideshow">
    <li>
        <span>Image 01</span>
        <div>
            <h3>re·lax·a·tion</h3>
        </div>
    </li>
    <li><!--...--></li>
    <li><!--...--></li>
</ul>

其中，span元素将用来包含幻灯片的背景图片。

CSS

让我们先来定义无序列表的样式，它将是固定定位，并且在视口中自动延展。为了在图片顶部放置一个图案，我们将使用:after伪元素：

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
}

我们将使用一个重复的圆点图案，但你也可以使用一个含有一些透明度的CSS渐变。

该span元素将包含一个绝对定位的、宽度和高度都为100%的幻灯片图片。既然里面含有一些文本，我们需要将颜色设为透明来隐藏它。background-size属性值cover使得背景图片覆盖元素的所有区域即屏幕的尺寸，覆盖所有可见视口。不透明度设置为0。然后，我们将在我们的动画里改变它：

.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 36s linear infinite 0s; 
}

每个span的动画将持续36秒并且无限次运行，让我们等一下来看细节，首先我们来含标题元素定义div的样式：

.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    animation: titleAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px; 
}

标题块的动画也持续36秒。

现在，我们将定义所有span的背景图片和动画延迟，每一个幻灯片的图片和标题将紧随前一个6秒之后出现。

.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/1.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/2.jpg);
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/3.jpg);
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/4.jpg);
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(../images/5.jpg);
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(../images/6.jpg);
    animation-delay: 30s; 
}
 
.cb-slideshow li:nth-child(2) div { 
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) div { 
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) div { 
    animation-delay: 30s; 
}

现在，让我们来看看幻灯片的动画。每个span的动画将持续36秒，在这36秒中，我们将在动画效果达到8％时，改变它的不透明度从0到1。这个透明度将一直保持到动画进行到17%时，当达到25％时将变回0并且一直保持到最后。

接下来，为什么是这些值？我们希望保持每一张图片6秒可见，在一个循环结束时，我们希望再次显示首张图片。我们有6个图像，所以总共需要36秒来完成一整个循环。现在，我们需要确定各不透明度值相应的“时间”。我们知道第2张图片将在6秒之后开始动画，需要知道第一个图片像淡出的动画所在的百分比值。由6除以36得出0.166…所以的第一个关键帧的值将为16%，接下来因为不想让图片一直淡出，我们将定义一个中间步骤，将设置在我们计算的一半，即8％。想要完整显示图片接下来是关键，我们只需要在17％时开始淡出，然后到25％完全消失。

@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

有相同的理由针对标题，只是我们希望它消失的快一点，因此19%的时候不透明度为0。

@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

对于那些不支持动画的浏览器，我们只需将 span的不透明度设为1来显示幻灯片最后的图片：

.no-cssanimations .cb-slideshow li span{
    opacity: 1;
}

no-cssanimations 类是由Modernizr添加的。

让我们也来关注当视窗缩小时标题字体的大小，我们将使用media queries在特定的宽度下设置字体的大小：

@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 80px }
}

这就是针对简单版本的全部，让我们来看如何为过渡效果锦上添花。

可供选择的动画实例

现在，我们可以添加一些动画效果用来显示图片和标题。

下面的动画将使得图片按比例放大并且稍微旋转：

@keyframes imageAnimation { 
    0% {
        opacity: 0;
        animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        transform: scale(1.05);
        animation-timing-function: ease-out;
    }
    17% {
        opacity: 1;
        transform: scale(1.1) rotate(3deg);
    }
    25% {
        opacity: 0;
        transform: scale(1.1) rotate(3deg);
    }
    100% { opacity: 0 }
}

标题会从右边滑入（我们将不得不改变标题块的text-align值为right），并且从左边滑出淡出消失：

@keyframes titleAnimation { 
    0% {
        opacity: 0;
        transform: translateX(200px);
    }
    8% {
        opacity: 1;
        transform: translateX(0px);
    }
    17% {
        opacity: 1;
        transform: translateX(0px);
    }
    19% {
        opacity: 0;
        transform: translateX(-400px);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

有很多的图像和标题转换的可能性，这只是个实验！

Demo

下面是一些动画的演示demo:

Demo1：简单的淡入、淡出；

Demo2：轻微旋转、标题从右边滑入；

Demo3：图片上移、标题下移；

Demo4：图片放大，标题上移、放大并淡出。

目前 ，动画在webkit浏览器比如chrome和safari中效果最平滑。

希望你会喜欢这个教程，并发现它非常有用，且启发灵感！

原创译文 转载请注明出处
英文原文：FULLSCREEN BACKGROUND IMAGE SLIDESHOW WITH CSS3

Marina Stenko – 乌克兰女摄影师

Aleksandra V. – 俄罗斯女摄影师

原文：ADAPTIVE THUMBNAIL PILE EFFECT WITH AUTOMATIC GROUPING

该实验性的jQuery插件允许用户通过一个堆叠效果来自动分组缩略图。根据共有的data-pile属性进行分组，一旦用户点击，堆叠的缩略图会分散开来并且移动到各自相应的位置。缩略图可以有一个延迟的稍微旋转或定位。

演示demo ｜ 源码下载

网格本身是自适应的，这意味着，如果没有足够的水平空间，考虑到项目的宽度和间隔，列数将会减少，该网格将重新排序。

请注意，CSS transform和transition仅工作于支持的浏览器上。

有一个简单的jQuery动画回退办法针对不支持transition的浏览器。

要使用该插件，需要预期使用一个class名为tp-grid的无序列表，例如在我们的demo中：

<ul id="tp-grid" class="tp-grid">
 
    <li data-pile="Group 1">
        <a href="#">
            <span class="tp-info">
                <span>Some title</span>
            </span>
            <img src="images/1.jpg" />
        </a>
    </li>
 
    <li data-pile="Group 2">
        <!-- ... -->
    </li>
 
    <li data-pile="Group 1,Group 2">
        <!-- ... -->
    </li>
 
    <!-- ... -->
 
</ul>

data-pile属性将包含该项目所从属的组名。请注意，一个项目可以属于多个组。

插件可以被这样调用：

$( '#tp-grid' ).stapel();

设置

以下默认设置可用：

$.Stapel.defaults = {
 
    // space between the items
    gutter : 40,
 
    // the rotations degree for the 2nd and 3rd item 
    // (to give a more realistic pile effect)
    pileAngles : 2,
 
    // animation settings for the items of the clicked pile
    pileAnimation : { 
        openSpeed : 400,
        openEasing : 'ease-in-out',
        closeSpeed : 400,
        closeEasing : 'ease-in-out'
    },
 
    // animation settings for the other piles
    otherPileAnimation : { 
        openSpeed : 400,
        openEasing : 'ease-in-out',
        closeSpeed : 350,
        closeEasing : 'ease-in-out'
    },
 
    // delay for each item of the pile
    delay : 0,
 
    // random rotation for single items
    randomAngle : false,
 
    // callback functions
    onLoad : function() { return false; },
    onBeforeOpen : function( pileName ) { return false; },
    onAfterOpen : function( pileName, totalItems ) { return false; },
    onBeforeClose : function( pileName ) { return false; },
    onAfterClose : function( pileName, totalItems ) { return false; }
 
};

基本的样式在stapel.css文件中定义，你可以看到一些额外的样式定义在custom.css的例子。

Demo

查看一些实际不同设置的演示demo：

Demo1：默认设置

Demo2：对单个项目的延误

Demo3：延迟，旋转和更大的间隔

原创译文 转载请注明出处
英文原文：ADAPTIVE THUMBNAIL PILE EFFECT WITH AUTOMATIC GROUPING

Anastasia Volkova – 俄罗斯女摄影师