[ Bài viết mới · Thành viên · Nội quy diễn đàn · Tìm kiếm · RSS ]
  • Page 1 of 1
  • 1
Diễn đàn Share Info » Công Nghệ Phần mềm - Máy tính » HTML & CSS » Kwick slider với CSS3 (Kwick slider với CSS3)
Kwick slider với CSS3
chugatrongchoaiDate: Chủ Nhật, 2013/08/04, 8:21 PM | Message # 1
Tân Binh đạt Huy chương
Nhóm: Sáng lập viên
Bài viết: 220
Huy chương: 9
Bài viết này tôi hướng dẫn các bạn tạo kwick slider bằng css3 với hiệu ứng không kém gì jquery kwick plugin.
Demo
Download

Mã HTML

Code
<ul class="kwick">
     <li>
         <a href="#">
         <img src="img/1.jpg" alt="image"/>
         <p>Lorem ipsum dolor sit amet</p>
         </a>
     </li>
     <li>
         <a href="#">
         <img src="img/2.jpg" alt="image"/>
         <p>Consectetur adipiscing elit</p>
         </a>
     </li>
     <li>
         <a href="#">
         <img src="img/3.jpg" alt="image"/>
         <p>Pellentesque habitant morbi tristique </p>
         </a>
     </li>
     <li>
         <a href="#">
         <img src="img/4.jpg" alt="image"/>
         <p>Senectus et netus</p>
         </a>
     </li>
     <li>
         <a href="#">
         <img src="img/5.jpg" alt="image"/>
         <p>Vestibulum sollicitudin ipsum</p>
         </a>
     </li>
</ul>


Thẻ p ở đây chứa tiêu đề của mỗi bức ảnh.
Mã CSS

Ta có mã CSS để tạo giao diện giống trên như sau:

Code
.kwick{
     width:960px;
     height:400px;
     overflow:hidden!important;
     position:relative;
     border-radius:5px;
     box-shadow:0 0 5px rgba(0,0,0,0.4);
}
   
.kwick li{
     position:absolute;
     top:0;
}
   
.kwick li:nth-child(1){
     left:0;
}
   
.kwick li:nth-child(2){
     left:192px;
}
   
.kwick li:nth-child(3){
     left:384px;
}
   
.kwick li:nth-child(4){
     left:576px;
}
   
.kwick li:nth-child(5){
     left:768px;
}
   
.kwick a{
     position:relative;
     display:block;
     box-shadow:0 0 7px rgba(0,0,0,1)
}
   
.kwick img{
     display:block;
}
   
.kwick p{
     position:absolute;
     left:0;
     bottom:-50px;
     width:728px;
     padding:0 20px;
     height:50px;
     line-height:50px;
     font-family:helvetica,arial,sans-serif;
     color:#fff;
     background-color:rgba(0,0,0,0.9);
     text-shadow:0 1px 0 #000;
     font-size:12px;
     text-transform:uppercase;
     letter-spacing:1px;
}


Tạo slide với CSS3
Đầu tiên thêm cho thẻ li và thẻ p thuộc tính css3-transition.

Code
.kwick li,.kwick p{
    /*---code trước---*/
     -moz-transition:all 0.5s ease-in-out;
     -webkit-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
     -ms-transition:all 0.5s ease-in-out;
     transition:all 0.5s ease-in-out;
}


Bây giờ ta sử dụng ~ css-selector để khi hover vào thẻ li đứng trước sẽ đẩy các thẻ li còn lại đứng sau về bên phải màn hình:


Code
.kwick li:nth-child(1):hover ~ li:nth-child(5),
.kwick li:nth-child(2):hover ~ li:nth-child(5),
.kwick li:nth-child(3):hover ~ li:nth-child(5),
.kwick li:nth-child(4):hover ~ li:nth-child(5)
{
     left:912px;
}
   
.kwick li:nth-child(1):hover ~ li:nth-child(4),
.kwick li:nth-child(2):hover ~ li:nth-child(4),
.kwick li:nth-child(3):hover ~ li:nth-child(4)
{
     left:864px;
}
   
.kwick li:nth-child(1):hover ~ li:nth-child(3),
.kwick li:nth-child(2):hover ~ li:nth-child(3)
{
     left:816px;
}
   
.kwick li:nth-child(1):hover ~ li:nth-child(2){
     left:768px;
}


Tuy nhiên chỉ có thẻ li:nth-child(1) là giữ nguyên vị trí còn khi hover vào các thẻ còn lại thì nó sẽ phải đẩy sang bên trái màn hình:

Code
.kwick li:nth-child(2):hover{
     left:48px;
}
   
.kwick li:nth-child(3):hover{
     left:96px;
}
   
.kwick li:nth-child(4):hover{
     left:144px;
}
   
.kwick li:nth-child(5):hover{
     left:192px;
}


Bây giờ lại sinh ra vấn đề là khi hover vào thẻ li thứ 3 trở đi làm sao để các thẻ đứng trước nó kéo về bên trái màn hình. Ta có đoạn code sau sẽ giải quyết vấn đề đó, tuy nhiên chú ý ta phải để đoạn code này nằm trước 2 đoạn code trên.


Code
.kwick:hover li:nth-child(2){
     left:48px;
}
   
.kwick:hover li:nth-child(3){
     left:96px;
}
   
.kwick:hover li:nth-child(4){
     left:144px;
}


Tóm lại toàn bộ code khi hover sẽ tạo slide như sau:

Code
.kwick:hover li:nth-child(2){
     left:48px;
}
   
.kwick:hover li:nth-child(3){
     left:96px;
}
   
.kwick:hover li:nth-child(4){
     left:144px;
}
   
.kwick li:nth-child(1):hover ~ li:nth-child(5),
.kwick li:nth-child(2):hover ~ li:nth-child(5),
.kwick li:nth-child(3):hover ~ li:nth-child(5),
.kwick li:nth-child(4):hover ~ li:nth-child(5)
{
     left:912px;
}
   
.kwick li:nth-child(1):hover ~ li:nth-child(4),
.kwick li:nth-child(2):hover ~ li:nth-child(4),
.kwick li:nth-child(3):hover ~ li:nth-child(4)
{
     left:864px;
}
   
.kwick li:nth-child(1):hover ~ li:nth-child(3),
.kwick li:nth-child(2):hover ~ li:nth-child(3)
{
     left:816px;
}
   
.kwick li:nth-child(1):hover ~ li:nth-child(2){
     left:768px;
}
   
.kwick li:nth-child(2):hover{
     left:48px;
}
   
.kwick li:nth-child(3):hover{
     left:96px;
}
   
.kwick li:nth-child(4):hover{
     left:144px;
}
   
.kwick li:nth-child(5):hover{
     left:192px;
}
   
.kwick li:hover p{
     bottom:0;
}


Chữ ký: http://windowsworld.ucoz.com/
http://shareinfo.ucoz.org/
https://www.facebook.com/hdoantrannam
 
Diễn đàn Share Info » Công Nghệ Phần mềm - Máy tính » HTML & CSS » Kwick slider với CSS3 (Kwick slider với CSS3)
  • Page 1 of 1
  • 1
Search:

Chat ()