twitter facebook google plus
sp
Ms. Thanh Huyền Ms. Ngọc Thơ Ms. Minh Trang
Loading...
Xem nhiều
18/03/2014
Trình diễn ảnh chỉ với CSS3
Trình diễn ảnh( Image Content Slider) giúp các nhà thiết kế web tạo các trang web Gallery hiển thị hình ảnh nhiều. Thông thường các bạn sử dụng code nhưng dưới đây Netmoon chia sẽ cùng các bạn cách không cần phải có đoạn script nào. Rất đơn giản thôi nhé!

Image Content Slider voi CSS3
Demo

Các bước thực hiện:

Bước 1 : HTML

Đầu tiên , chúng ta sẽ tạo danh sách các hình sẽ được hiển thị qua phần tử <li>, đồng thời chúng ta cũng tạo sẵn thumnail cho mỗi hình được gắn kết với nhau thông qua các id.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
<div class="slider-wrapper">
<ul class="s-thumbs">
<li><a href="#slide-1"><img src="img/thumb1.png" alt="" /></a></li>
<li><a href="#slide-2"><img src="img/thumb2.png" alt="" /></a></li>
<li><a href="#slide-3"><img src="img/thumb3.png" alt="" /></a></li>
<li><a href="#slide-4"><img src="img/thumb4.png" alt="" /></a></li>
<li><a href="#slide-5"><img src="img/thumb5.png" alt="" /></a></li>
<li><a href="#slide-6"><img src="img/thumb6.png" alt="" /></a></li>
<li><a href="#slide-7"><img src="img/thumb7.png" alt="" /></a></li>
</ul>

<ul class="s-slides">
<li id="slide-1"><img src="img/slide1.png" alt="" /></li>
<li id="slide-2"><img src="img/slide2.png" alt="" /></li>
<li id="slide-3"><img src="img/slide3.png" alt="" /></li>
<li id="slide-4"><img src="img/slide4.png" alt="" /></li>
<li id="slide-5"><img src="img/slide5.png" alt="" /></li>
<li id="slide-6"><img src="img/slide6.png" alt="" /></li>
<li id="slide-7"><img src="img/slide7.png" alt="" /></li>
</ul>
</div>

Bước 2 : Định dạng CSS cơ bản


Đầu tiên chúng ta sẽ dùng css để canh chỉnh các hình ảnh thumnail và các ảnh lớn cho đồng đều.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.slider-wrapper ul,
.slider-wrapper li,
.slider-wrapper div,
.slider-wrapper img,
.slider-wrapper a {
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
}

.slider-wrapper {
width: 508px;
overflow: hidden;
}

ul.s-thumbs li {
float: left;
}

ul.s-slides,
ul.s-slides li,
ul.s-slides a,
ul.s-slides img {
width: 500px;
height: 350px;
position: relative;
}

ul.s-slides {
overflow: hidden;
clear: both;
}

ul.s-slides li {
position: absolute;
z-index: 50;
}

Bước 3 : CSS3 Styling


Bây giờ chúng ta sẽ cùng thêm một số tính năng của CSS3 để làm cho hiệu ứng đẹp hơn. Chúng ta sẽ dử dụng thuộc tính bóng đổ (shadow), bo góc… Các bạn nhớ thêm tiền tố trước mỗi thuộc tính cho từng loại trình duyệt riêng biệt nhé.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
ul.s-thumbs li {
float: left;
margin-bottom: 10px;
margin-right: 11px;
}

ul.s-thumbs li:last-child {
margin-left: 1px;
margin-right: 0;
}

ul.s-thumbs a {
display: block;
position: relative;
width: 55px;
height: 55px;
border: 4px solid transparent;

-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;

font: bold 12px/25px Arial, sans-serif;
color: #515151;
text-decoration: none;
text-shadow: 1px 1px 0px rgba(255,255,255,.25), inset 1px 1px 0px rgba(0,0,0,.15);
}

ul.s-thumbs img {
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}

ul.s-thumbs a:hover,
ul.s-slides {
border: 4px solid #141517;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

-webkit-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
-moz-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
box-shadow: 0px 1px 0px rgba(255,255,255,.05);
}

Bước 4 : Thêm mô tả hình ảnh


Chúng ta sẽ thêm một dòng chữ mô tả ngắn gọn về hình ảnh khi chúng ta rê chuột vào các ảnh thumbnail. Đồng thời chúng ta sẽ sử dụng :before selector để tạo mũi tên cho hộp mô tả.

Quay trở lại đoạn html được tạo ở bước 1, chúng ta sẽ cần thêm một dòng mô tả nằm tại vị trí các hình thumnail như sau:

1
2
3
4
5
6
7
8
9
<ul class="s-thumbs">
<li><a href="#slide-1"><img src="img/thumb1.png" alt="" /><span>Image 1</span></a></li>
<li><a href="#slide-2"><img src="img/thumb2.png" alt="" /><span>Image 2</span></a></li>
<li><a href="#slide-3"><img src="img/thumb3.png" alt="" /><span>Image 3</span></a></li>
<li><a href="#slide-4"><img src="img/thumb4.png" alt="" /><span>Image 4</span></a></li>
<li><a href="#slide-5"><img src="img/thumb5.png" alt="" /><span>Image 5</span></a></li>
<li><a href="#slide-6"><img src="img/thumb6.png" alt="" /><span>Image 6</span></a></li>
<li><a href="#slide-7"><img src="img/thumb7.png" alt="" /><span>Image 7</span></a></li>
</ul>

Sau khi chèn thêm xong, chúng ta sẽ dùng đoạn css sau để hiển thị mô tả :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
ul.s-thumbs li a:hover span {
position: absolute;
z-index: 101;
bottom: -30px;
left: -22px;
display: block;
width: 100px;
height: 25px;
text-align: center;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
box-shadow: 0px 1px 0px rgba(0,0,0,.4);

-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;

background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #bcbcbc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#bcbcbc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#bcbcbc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#bcbcbc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#bcbcbc 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#bcbcbc 100%); /* W3C */
}

ul.s-thumbs li a:hover span:before {
width: 0;
height: 0;
border-bottom: 5px solid #ffffff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
content: '';
position: absolute;
top: -5px;
left: 44px;
}

ul.s-thumbs li:first-child a:hover span {
left: -3px;
}

ul.s-thumbs li:first-child a:hover span:before {
left: 25px;
}

ul.s-thumbs li:last-child a:hover span {
left: auto;
right: -3px;
}

ul.s-thumbs li:last-child a:hover span:before {
left: auto;
right: 26px;
}

Bước 5 : Slider Transitions


Bây giờ chúng ta sẽ tiến hành tạo các hiệu ứng chuyển ảnh khác nhau, mỗi khi các ảnh thumnail được click chuột. Bằng cách gán thêm tên class cho mỗi phần tử <li> như sau :

HTML
1
2
3
4
5
6
7
8
9
<ul class="s-slides">
<li id="slide-1" class="slideLeft"><img src="img/slide1.png" alt="" /></li>
<li id="slide-2" class="slideRight"><img src="img/slide2.png" alt="" /></li>
<li id="slide-3" class="slideTop"><img src="img/slide3.png" alt="" /></li>
<li id="slide-4" class="slideBottom"><img src="img/slide4.png" alt="" /></li>
<li id="slide-5" class="zoomIn"><img src="img/slide5.png" alt="" /></li>
<li id="slide-6" class="zoomOut"><img src="img/slide6.png" alt="" /></li>
<li id="slide-7" class="rotate"><img src="img/slide7.png" alt="" /></li>
</ul>

CSS


Chúng ta sẽ dùng @keyframes để tạo từng hiệu ứng chuyển ảnh như sau :

Slide from left
01
02
03
04
05
06
07
08
09
10
11
12
13
14
/* Slide Left */

@-webkit-keyframes 'slideLeft' {
0% { left: -500px; }
100% { left: 0; }
}

ul.s-slides li.slideLeft:target {
z-index: 100;

-webkit-animation-name: slideLeft;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}

Slide From Right

01
02
03
04
05
06
07
08
09
10
11
12
13
14
/* Slide Right */

@-webkit-keyframes 'slideRight' {
0% { left: 500px; }
100% { left: 0; }
}

ul.s-slides li.slideRight:target {
z-index: 100;

-webkit-animation-name: slideRight;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}

Slide From Top
01
02
03
04
05
06
07
08
09
10
11
12
13
14
/* Slide Top */

@-webkit-keyframes 'slideTop' {
0% { top: -350px; }
100% { top: 0; }
}

ul.s-slides li.slideTop:target {
z-index: 100;

-webkit-animation-name: slideTop;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}

Slide From Bottom
01
02
03
04
05
06
07
08
09
10
11
12
13
14
/* Slide Bottom */

@-webkit-keyframes 'slideBottom' {
0% { top: 350px; }
100% { top: 0; }
}

ul.s-slides li.slideBottom:target {
z-index: 100;

-webkit-animation-name: slideBottom;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}

Zoom Image From Inside
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
/* Zoom In */

@-webkit-keyframes 'zoomIn' {
0% { -webkit-transform: scale(0.1); }
100% { -webkit-transform: none; }
}

ul.s-slides li.zoomIn:target {
z-index: 100;
top: 4px;

-webkit-animation-name: zoomIn;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}

Zoom Image From Outside
01
02
03
04
05
06
07
08
09
10
11
12
13
14
/* Zoom Out */

@-webkit-keyframes 'zoomOut' {
0% { -webkit-transform: scale(2); }
100% { -webkit-transform: none; }
}

ul.s-slides li.zoomOut:target {
z-index: 100;

-webkit-animation-name: zoomOut;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}

Rotate and Zoom the Image
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
/* Rotate */

@-webkit-keyframes 'rotate' {
0% { -webkit-transform: rotate(-360deg) scale(0.1); }
100% { -webkit-transform: none; }
}

ul.s-slides li.rotate:target {
z-index: 100;
top: 4px;

-webkit-animation-name: rotate;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}

Bước 6 : “Not Target” Image


Do chúng ta sử dụng z-index để ấn định hình ảnh xuất hiện trên top, và chúng ta sẽ nhận lỗi khi click để hiển thị hình ảnh mới.Để giải quyết việc này, chúng ta sẽ sử dụng “notTarget”

01
02
03
04
05
06
07
08
09
10
11
12
/* Not Target */

@-webkit-keyframes 'notTarget' {
0% { z-index: 75; }
100% { z-index: 75; }
}

ul.s-slides li:not(:target) {
-webkit-animation-name: notTarget;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}

Bước 7 : Ấn định hình ảnh đầu tiên sẽ xuất hiện


Khi slider được load thì ảnh cuối sẽ hiển thị đầu tiên, để ảnh đầu tiên được load ngay lần đầu thì chúng ta sử dụng đoạn css sau :

1
2
3
4
5
/* First Slide */

ul.s-slides li.first {
z-index: 60;
}

Bước 8 : Slider Load


Trong bước này, chúng ta sẽ tạo một hiệu ứng fade ngay lần đầu tiên slider được load.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
/* Slider Load */

@-webkit-keyframes 'load' {
0% { opacity: 0; }
50% { opacity: 0; }
100% { opacity: 1; }
}

.slider-wrapper {
-webkit-animation-name: load;
-webkit-animation-duration: 2s;
-webkit-transition-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
}

Dưới đây Netmoon kính cung cấp thêm các 100+ free jquery Image Content Slider Gallery plugins các bạn có thể tham khảo và dowload  tại đây

Nguồn: Thuthuatweb.net / Hongvt
Netmoon.vn 5/5 . 121 dnh gi.
Gặp NetMoon trên twitter
Chia sẻ bài viết
Bình luận
Thư viện kiến thức Marketing