Tạo Image Content Slider với chỉ CSS3

Image Content Slider là một chức năng trình diễn ảnh, rất thích hợp cho việc tạo các trang web Gallery vốn dĩ hiển thị hình ảnh nhiều. Có rất nhiều plugin cũng như đoạn code giúp chúng ta tạo chức năng này. Nhưng trong bài viết ngày hôm nay, mình và các bạn sẽ chỉ cần dùng CSS3 để tạo chức năng trình diễn ảnh này mà không cần phải sử dụng bất kì đoạn script nào cả.

Xem Demo | Download

Vì một số tính năng của CSS3 vẫn chưa được hỗ trợ nhiều trên các trình duyệt, vì thế mà để có thể xem demo của chức năng này, các bạn nên xem ở trình duyệt Chrome và Safari để có được kết quả tốt nhất.

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.

<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.

.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 {
    awidth: 508px;
    overflow: hidden;
}

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

ul.s-slides,
ul.s-slides li,
ul.s-slides a,
ul.s-slides img {
    awidth: 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é.

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;
    awidth: 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:

<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ả :

ul.s-thumbs li a:hover span {
    position: absolute;
    z-index: 101;
    bottom: -30px;
    left: -22px;
    display: block;
    awidth: 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 {
    awidth: 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

<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

/* 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

/* 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

/* 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

/* 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

/* 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

/* 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

/* 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”

/* 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 :

/* 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.

/* 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;
}

Vậy là chúng ta đã tạo slide thành công, nếu có thắc mắc gì thì đừng ngần ngại để lại lời nhắn dưới dạng comments.

Chuyên Mục: Css

Bài viết được đăng bởi webmaster