Image Accordion CSS3 Slider – Ảnh cuộn xếp

Hôm nay mình đưa đến các bạn một bài hướng dẫn làm hiệu ứng ảnh cuộn xếp (image accordion) bằng CSS3 – không có sử dụng JavaScript nhé.

CSS3 Image Accordion Slider - Ảnh cuộn xếp

CSS3 Image Accordion Slider – Ảnh cuộn xếp

[button name=”Demo” url=”http://cosmospham.com/demo/css3-images-accordion/” /]
[button name=”Source” url=”https://www.dropbox.com/s/0ipbltx5hsnxhdw/CSS3ImageAccordion.zip” /]

Chú ý: Hiệu ứng hoạt động tốt trên trình duyệt Chrome và FireFox.

Thẻ HTML để tạo Image Accordion

Ý tưởng chính để thực hiện hiệu ứng này là dùng cấu trúc lồng các thẻ HTML. Nhờ đó mà khi một anh chuyển động thì nó sẽ đẩy các hình ảnh đi theo. Bạn có thể thêm thắt các thành phần khác như chữ, liên kết… Nhưng có hai thứ quan trọng nhất cần có đó là cấu trúc lồng (như bên dưới) và radio button để điều khiển hình nào được mở hay đóng.

<section class="main">
<div class="ia-container"><figure><img src="images/1.jpg" alt="image01" /> <input type="radio" name="radio-set" checked="checked" /><figcaption><span>Cosmos Pham's Blog</span></figcaption><figure><img src="images/2.jpg" alt="image02" /> <input type="radio" name="radio-set" /><figcaption><span>Honest Light</span></figcaption><figure><img src="images/3.jpg" alt="image03" /> <input type="radio" name="radio-set" /><figcaption><span>Silent Serenity</span></figcaption><figure><img src="images/4.jpg" alt="image04" /> <input type="radio" name="radio-set" /><figcaption><span>Warm Welcome</span></figcaption><figure><img src="images/5.jpg" alt="image05" /> <input type="radio" name="radio-set" /><figcaption><span>Sensible Magic</span></figcaption><figure><img src="images/6.jpg" alt="image06" /> <input type="radio" name="radio-set" /><figcaption><span>Lovely Midnight</span></figcaption></figure></figure></figure></figure></figure></figure></div>
<!-- ia-container --></section>

Định dạng với CSS

Ta thiết lập cho slider chiều ngang và ẩn những thứ tràn ra ngoài.

.ia-container {
	width: 735px;
	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);
}

Chiều ngang tính theo công thức sau:

( [số hình] – 1 ) * [phần hiển thị ở mỗi hình bị che] + [phần hiển thị của hình hiện đầy đủ]

Cụ thể, trong ví dụ này, mình có 6 hình – chiều ngang mỗi hình là 235px = chiều ngang lúc hiện đầy đủ; mỗi hình bị che hiện ra 100px.

Vậy chiều ngang slider là 5 * 100 + 235 = 735 (px)

Ta thiết lập thêm hiệu ứng chuyển động chậm dần lúc bắt đầu và kết thúc.

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

Figure tiên ta cho nó nằm sát cạnh trái, và thiết lập thuộc tính !important để lúc dùng truy vấn media thì vẫn đảm bảo hình không bị chạy lung tung:

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

Hình ảnh có chiều ngang 100% để nó điền đầy figure:

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

Mỗi radio button bao phủ nguyên phần nhìn thấy của slide. Ta thiết lập độ trong suốt cho nó bằng 0 (zero) để khỏi nhìn thấy nó mà vẫn có thể click được. Cho z-index cao để đảm bảo nó không bị đè.

.ia-container input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px; /* just cover visible part */
	height: 100%;
	cursor: pointer;
	border: 0;
	padding: 0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	z-index: 100;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

Khi một input được chọn hoặc click chuột, chúng ta muốn nó biến mất (để khỏi bị click lần nữa). Dĩ nhiên, ta có thể cho width = 0px nhưng điều này không nên vì có thể gây ra các hệ quả không mong muốn trên trình duyệt Chrome. Giải pháp là cho chiều ngang bằng 5px, và cho nó nằm sát bên phải figure. Thêm thiết lập để các figure bên trong dồn sang trái cùng với chuyển động:

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

Ta tạo hai chuyển động khác nhau trong quá trình di chuyển, một cái “mặc định” và cái còn lại khi ta check vào input. Cả hai hợp thành hiệu ứng gọi là “shuffle”. Thay đổi các giá trị này sẽ cho các hiệu ứng khác nhau.

Caption của figure bao phủ tất cả các thành phần với màu tối trong suốt, và span thì nằm ở giữa cái figure:

.ia-container figcaption {
	width: 100%;
	height: 100%;
	background: rgba(87, 73, 81, 0.1);
	position: absolute;
	top: 0px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	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;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	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);
}

Khi một slide được chọn, ta bỏ lớp phủ bằng cách cho độ trong suốt của nó bằng 0 (zero):

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

Cái span sẽ “hiện ra dần” (fade) và di chuyển từ trên xuống với độ trễ – để slide mở ra trước:

.ia-container input:checked + figcaption span {
	-webkit-transition: all 0.4s ease-in-out 0.5s;
	-moz-transition: all 0.4s ease-in-out 0.5s;
	-o-transition: all 0.4s ease-in-out 0.5s;
	-ms-transition: all 0.4s ease-in-out 0.5s;
	transition: all 0.4s ease-in-out 0.5s;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
	filter: alpha(opacity=99);
	opacity: 1;
	top: 50%;
}

Vì slide cuối cùng không có slide nào chạy tiếp theo nó từ bên phải nên ta cho độ trễ giảm xuống (phần trên đã cho nó id ia-selector-last):

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

Khi rà chuột lên phần nhìn thấy của các slide đang bị che, ta cho nó hiệu ứng chuyển màu. Vì radio button nằm trên cùng nên ta thiết lập lên phần này (yêu cầu thẻ input đặt ngay sau thẻ figure):

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

Các thành phần theo sau của checked input nên để z-index thấp để tránh các hệ quả không mong muốn trên Chrome:

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

[button name=”Demo” url=”http://cosmospham.com/demo/css3-images-accordion/&#8221; /]

[button name=”Source” url=”https://www.dropbox.com/s/0ipbltx5hsnxhdw/CSS3ImageAccordion.zip&#8221; /]

Nguồn bài viết: http://tympanus.net/codrops/2012/06/06/image-accordion-with-css3/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s