Hướng dẫn Tạo Slider hình động bằng CSS3

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,629
Được Like
10,889
Tạo Slider hình động bằng CSS3

Như các bạn đã biết thì CSS3 là một công nghệ tuyệt vời nó giúp chúng ta tạo ra những hiệu ứng độc đáo cho website và hôm nay mình sẽ hướng dẫn các bạn cách tạo một slider ảnh với CSS3 mà không đụng chạm gì đến Jquery.

Slider này chạy tốt trên trình duyệt Google Chrome, nếu các bạn muốn test thì nên xem trên trình duyệt Google Chrome nhé. Bên FireFox vẫn chạy được, nhưng có một số cái vẫn chưa hoạt động được.

Bước 1 – SETUP HTML
Mã:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>CSS3 - Slider</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/style.css" media="all">
</head>
<body>
    <div id="wrapper">
        <div class="slider">
            <h3>CSS3 Slider</h3>
            <nav>
                <ul>
                    <li>
                        <a href="http://www.izwebz.com/uncategorized/dvd-psd2html-wordpress/" target="_blank">
                            <img src="images/dvd.jpg" alt="DVD PSD2HTML + WordPress">
                            <h5>DVD PSD2HTML + WordPress</h5>
                        </a>
                    </li>
 
                    <li>
                        <a href="http://www.izwebz.com/css/jquery-ajax-supper-form-php-mysql/" target="_blank">
                            <img src="images/form.jpg" alt="Jquery AJAX Supper Form + PHP & MYSQL">
                            <h5>Jquery AJAX Supper Form + PHP & MYSQL</h5>
                        </a>
                    </li>
 
                    <li>
                        <a href="http://www.izwebz.com/jquery/phan-trang-voi-jquery-ajax-php-mysql/" target="_blank">
                            <img src="images/pagination.jpg" alt="Phân trang với Jquery AJAX + PHP & MYSQL">
                            <h5>Pagination với Jquery AJAX + PHP</h5>
                        </a>
                    </li>
 
                    <li>
                        <a href="http://www.izwebz.com/css/contact-form-voi-jquery-ajax-php/" target="_blank">
                            <img src="images/contact.jpg" alt="Contact Form với Jquery AJAX + PHP">
                            <h5>Contact Form với Jquery AJAX + PHP</h5>
                        </a>
                    </li>
 
                    <li>
                        <a href="http://www.izwebz.com/css/css3-webkit-filters/" target="_blank">
                            <img src="images/webkit.jpg" alt="CSS3 Webkit Filters">
                            <h5>CSS3 Webkit Filters Effects 1.0</h5>
                        </a>
                    </li>
 
                    <li>
                        <a href="http://www.izwebz.com/css/cach-dung-jquery-scrollto/" target="_blank">
                            <img src="images/srollto.jpg" alt="Cách dùng jQuery.ScrollTo">
                            <h5>Cách dùng jQuery.ScrollTo</h5>
                        </a>
                    </li>
 
                    <li>
                        <a href="http://www.izwebz.com/video-tutorials/photoshop-video-tutorials/photoshop-cs6-pharagraph-character-style-panel/" target="_blank">
                            <img src="images/pts.jpg" alt="Pharagraph & Character Style Panel">
                            <h5>Pharagraph & Character Style Panel</h5>
                        </a>
                    </li>
 
                    <li>
                        <a href="http://www.izwebz.com/css/cung-bay-voi-jquery-spritely/" target="_blank">
                            <img src="images/spritely.jpg" alt="Cùng bay với Jquery Spritely">
                            <h5>Cùng bay với Jquery Spritely</h5>
                        </a>
                    </li>
 
                    <li>
                        <a href="http://www.izwebz.com/css/jquery-arctext-be-cong-van-ban/" target="_blank">
                            <img src="images/arc-text.jpg" alt="Jquery Arc Text – Bẻ cong văn bản">
                            <h5>Jquery Arc Text – Bẻ cong văn bản</h5>
                        </a>
                    </li>
 
                    <li>
                        <a href="http://www.izwebz.com/video-tutorials/ajax-thuan-javascript-phan-2-su-dung-phuong-thuc-post/" target="_blank">
                            <img src="images/ajax_basic.jpg" alt="[eBook] Phát triển Web">
                            <h5>Learning Basic Jquery AJAX</h5>
                        </a>
                    </li>
 
                </ul>
            </nav>
        </div><!-- End .slider -->
    </div><!-- End #wrapper -->
</body>
</html>

Bước 2 – CSS
Mã:
#wrapper {
    width: 1000px;
    margin: 0 auto; 
}
 
a {
    text-decoration: none;
}
 
.slider {
    width: 160px;
    overflow: hidden;
    margin: 50px auto;
}
 
.slider h3 {
    font-size: 1.4em;
    padding-bottom: 4px;
    text-align: center;
}
 
nav > ul {
    width: 2000px;
    position: relative;
    -webkit-animation: slider 20s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-out;
    -moz-animation: slider 20s;
    /* -moz-animation: slider 20s; For 5 images */
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-out;
}
 
nav > ul:hover,
nav > ul:hover h5{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
}
 
nav > ul li {
    float: left;
    position: relative; 
}
 
nav > ul li img {
    border: 1px solid #d4d4d4;
    background: #fff;
    padding: 4px;
}
 
nav > ul li:last-child {
    width: 161px;
}
 
nav > ul li h5 {
    position: absolute;
    bottom: 8px;
    left: 6px;
    right: 5px;
    background: rgba(0,0,0,.3);
    color: #fff;
    text-align: center;
    padding: 4px 8px 8px 8px;
    font-size: .8em;
    height: 20px;
    -webkit-animation: text 20s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-out;
 
}
 
/* Function CSS3 Webkit Slider & Text for 10 images */
 
@-webkit-keyframes slider {
 
    5% {
        left: 0px;
    }
    10%,15% {
        left: -161px;
    }
    20%,25% {
        left: -321px;
    }
    30%,35% {
        left: -481px;
    }
    40%,45% {
        left: -641px;
    }
    50%,55% {
        left: -801px;
    }
    60%,65% {
        left: -961px;
    }
    70%,75%{
        left: -1121px;
    }
    80%,85% {
        left: -1281px;
    }
    90%,95% {
        left: -1441px;
    }
    98% {
        left: 0px;
    }
}
 
@-webkit-keyframes text {
 
    5%,10%,15%,20%,25%,30%,35%,40%,45%,50%,55%,60%,65%,70%,75%,80%,85%,90%,95% {
        bottom: 8px;
    }
    8%,18%,28%,38%,48%,58%,68%,78%,88%,98% {
        bottom: -200px;
    }
 
}
 
/* Function CSS3 Webkit Slider & Text for 5 images
 
@-webkit-keyframes slider {
    10% {
        left: 0px;
    }
    15%,30% {
        left: -161px;
    }
    35%,50% {
        left: -321px;
    }
    55%,70% {
        left: -481px;
    }
    75%,90% {
        left: -641px;
    }
    93% {
        left: 0px;
    }
}
 
@-webkit-keyframes text {
    10%,15%,30%,35%,50%,55%,70%,75%,90% {
        bottom: 8px;
    }
    13%,33%,53%,73%,93% {
        bottom: -200px;
    }
}
 
*/
 
/* Function CSS3 Moz Slider & Text For 10 images */
 
@-moz-keyframes slider {
 
    0% {
        left: 0;
    }
 
    5%,10% {
        left: -160px;
    }
 
    15%,20% {
        left: -320px;
    }
 
    25%,30% {
        left: -480px;
    }
 
    35%,40% {
        left: -640px;
    }
 
    45%,50% {
        left: -800px;
    }
 
    55%,60% {
        left: -960px;
    }
 
    65%,70% {
        left: -1120px;
    }
 
    75%,80% {
        left: -1280px;
    }
 
    85%,100% {
        left: -1440px;
 
    }
 
}
 
/* Function CSS3 Moz Slider & Text For 5 images
 
@-moz-keyframes slider {
    0% {
        left: 0px;
    }
    10%,25% {
        left: -160px;
    }
    35%,50% {
        left: -320px;
    }
    60%,75% {
        left: -480px;
    }
    85%,100% {
        left: -640px;
    }
}
*/

Mình giải thích những phần quan trọng trong code CSS nhé.

Mã:
.slider {
    width: 160px;
    overflow: hidden;
    margin: 50px auto;
}
Slider của mình sẽ có width: 160px, trong này cái hình của mình 150×150, phần khung hình của mình là 10px nữa. Nên mình phải lấy chính xác kích thước để không bị lệch.

Mã:
nav > ul {
    width: 2000px;
    position: relative;
}
Thẻ ul của mình sẽ có width là 2000px, ở chỗ này chắc các bạn sẽ thắc mắc là tại sao ở trên slider của mình có width là 160px mà xuống đây thẻ ul lại 2000px chứ nhỉ ^^.

Lý do là mỗi tấm hình của mình là 160px, trong này mình sẽ có 10 tấm hình vậy là width của mình sẽ là 1600px, để khi mình float left nó để tạo một slider chạy ngang thì hình của mình nó sẽ ko bị tụt xuống hàng. Nếu tính ra thì nó chỉ có 1600px thôi nhưng mình cho luôn 2000px để mình có thêm hình thì không cần sửa.

Mình set position là relative cho nó để xuống phía dưới mình viết một function CSS3 để dịch chuyển các tấm này
Mã:
@-webkit-keyframes slider {
    5% {
        left: 0px;
    }
    10%,15% {
        left: -161px;
    }
    20%,25% {
        left: -321px;
    }
    30%,35% {
        left: -481px;
    }
    40%,45% {
        left: -641px;
    }
    50%,55% {
        left: -801px;
    }
    60%,65% {
        left: -961px;
    }
    70%,75%{
        left: -1121px;
    }
    80%,85% {
        left: -1281px;
    }
    90%,95% {
        left: -1441px;
    }
    98% {
        left: 0px;
    }
}

Cách viết một function trong CSS3 thì cấu trúc của nó cũng như một function trong PHP vậy, cũng có tên hàm, đóng ngoặc và mở ngoặc.
Mã:
@-webkit-keyframes /* Khai báo sử dụng function này cho trình duyệt Google Chrome */
Keyframes /* Nó cũng như từ khóa Function trong PHP vậy */
Slider /* Tên hàm */

Trong function này mình cần phải tính toán thật chính xác để slider chạy không bị lệch, trong lúc làm cái này thì ở bên FireFox nó không bị lệch nhưng qua Chrome nó bị lệch 1px nên mình phải thêm 1px trong function của Chrome là 161px, trong FireFox là 160px nhé, đây là điểm fix thứ 1.

Vậy mình sẽ có như sau: Hình của mình là 160px, vậy 10 cái là 1600px, khi mình set position là relative ở trên thì các tấm hình của mình nó sẽ không trải dài ra một hàng nữa mà sẽ dính lại và nằm thành các lớp xếp lên nhau theo thứ tự. Bây giờ mình muốn nó chạy sang trái từng tấm hình một thì mình sẽ set left của nó giảm dần theo tấm hình.

Một tấm hình của mình là 160px vậy mình sẽ có bước nhảy là 160px, điểm bắt đầu của mình sẽ là tấm hình thứ nhất có nghĩa left của nó sẽ là 0px. Khi mình dịch qua trái một tấm thì left của nó sẽ là -160px. Và cứ dịch tiếp tấm nữa là -320px, và cứ thế mình sẽ giảm dần cho tới khi nào đủ 10 tấm hình.

Slider này của mình sẽ chạy trong vòng 20s sẽ hết 10 tấm hình, mình sẽ tính thời gian để cho nó nhảy từng tấm hình. Mình sẽ tính được 2s/1 tấm hình vậy bước nhảy của mình sẽ là 10%.

Mình muốn là khi trình duyệt load lần đầu tiên thì thời gian chờ của nó sẽ là 5% cho tấm hình đầu tiên, nếu điểm bắt đầu của bạn là 0% thì khi bạn trình duyệt load xong là nó nhảy qua tấm hình thứ 2 ngay. Vậy tấm hình đầu tiên của mình nó sẽ có Left là 0px, trong khoảng thời gian 10% -> 15% thì nó sẽ dịch chuyển sang tấm thứ 2, ở trên mình có bước nhảy là 10%, vậy từ 5% nó sẽ nhảy lên tiếp tục là 15% và các bước tiếp theo của mình cứ tăng dần lên và Left của mình sẽ giảm dần xuống theo bước nhảy của tấm hình. Nhưng có một điều là các bạn sẽ thắc mắc tại sao ở trên một tấm hình của mình là 160×160 và 10 tấm sẽ là 1600px nhưng trong bước nhảy nó chỉ tới 1440 rồi nó dừng lại. Lý do là điểm bắt đầu của mình Left của mình nó chạy từ 0, mình chỉ muốn nó dịch chuyển tới tấm cuối cùng và nó sẽ quay về tấm đầu tiên rồi dịch chuyển tiếp.

Nếu mình cho nó chạy tới -1600px thì nó sẽ chạy ra một cái khung trắng tinh vì bước nhảy của mình nó nhảy từ 0 cho đến -1600px là 11 lần mà trong khi đó mình chỉ có 10 tấm hình nên mình muốn nó dịch tới tấm cuối sẽ quay lại.

Và một điểm nữa là các bạn chú ý sẽ thấy mình chỉ cho nó chạy tới 95% vậy còn 5% còn lại để làm gì ? Ah` nó sẽ là cái thời gian để mình dịch chuyển từ tấm hình cuối cùng trở về tấm đầu tiên đấy.

Mã:
@-moz-keyframes slider {
 
    0% {
        left: 0;
    }
 
    5%,10% {
        left: -160px;
    }
 
    15%,20% {
        left: -320px;
    }
 
    25%,30% {
        left: -480px;
    }
 
    35%,40% {
        left: -640px;
    }
 
    45%,50% {
        left: -800px;
    }
 
    55%,60% {
        left: -960px;
    }
 
    65%,70% {
        left: -1120px;
    }
 
    75%,80% {
        left: -1280px;
    }
 
    85%,100% {
        left: -1440px;
    }
 
}

Trong function của FireFox các bạn sẽ thấy mình cho nó chạy từ 0% và đến 100% và điều này đã gây cản trở cho slider chạy trong FireFox, mình không biết trong FireFox nó bắt buộc mình chạy từ 0% -> 100% hay là nó không hiểu hay sao ý.

Nếu bạn cho nó bắt đầu và kết thúc như bên Function Google Chrome thì nó sẽ đứng im và không chạy, nên mình chỉ cho nó chạy từ 0% -> 100% và khi chạy như thế này nó sẽ không có thời gian chờ cho tấm hình đầu tiên và không có thời gian chờ để khi chạy hết tấm hình cuối rồi quay về tấm hình đầu tiên. Khi các bạn test trên 2 trình duyệt FireFox và Google Chrome thì các bạn sẽ thấy rõ sự khác biệt này.

Các bạn lưu ý là 5% ở đây có nghĩa là thời gian chờ để thực hiện một công việc tiếp theo nhé.

Mã:
nav > ul {
    width: 2000px;
    position: relative;
    -webkit-animation: slider 20s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-out;
    -moz-animation: slider 20s;
    /* -moz-animation: slider 20s; For 5 images */
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-out;
}

Sau khi viết xong Function cho slider này thì gọi nó ra và sử dụng thôi ^^ các bạn có thấy nó giống như trong PHP không nào. Mình sẽ gọi cái hàm slider ra và cho nó chạy trong 20s, thêm một cái nữa là khi chạy xong lần đầu tiên nó sẽ dừng lại và không chạy nữa. Mình muốn là nó sẽ cứ lặp không bao giờ ngừng, vậy mình sẽ thêm vào thuộc tính tiếp theo.

Mã:
-webkit-animation-iteration-count: infinite; /* infinite có nghĩa là vô hạn */

Iteration-count nó tương tự như một vòng lặp trong PHP vậy, nó cũng sẽ đếm vì ở đây mình muốn nó lặp không bao giờ ngừng thì mình thêm giá trị là infinite, nếu mình muốn nó lặp chính xác là bao nhiêu lần thôi thì mình chỉ cần điền tham số vào cho nó là 20 hay 30 .. 50.. 100 gì đó tùy ý các bạn.

Mã:
-webkit-animation-timing-function: ease-out; /* Làm cho slider mình chạy mượt hơn */

Các dòng tiếp theo là dành cho trình duyệt FireFox nhé.

Tiếp theo mình muốn khi slider chạy tới tấm ảnh nào thì đoạn text của mình nó sẽ hiện lên, vậy mình sẽ viết thêm một Function nữa như sau:
Mã:
@-webkit-keyframes text {
    5%,10%,15%,20%,25%,30%,35%,40%,45%,50%,55%,60%,65%,70%,75%,80%,85%,90%,95% {
        bottom: 8px;
    }
    8%,18%,28%,38%,48%,58%,68%,78%,88%,98% {
        bottom: -200px;
    }
}

Mình sẽ liệt kê ra trong tất cả thời gian mà slider chạy thì đoạn text của mình vẫn xuất hiện như bình thường, mình muốn đoạn text mình xuất hiện 3% thời gian rồi ẩn đi. Vậy mình cũng tính theo bước nhảy là đầu tiên của mình là 5% và xuất hiện trong vòng 3% sẽ là 8% cho tấm đầu tiên, bước nhảy của mình là 10% thì sau đó cứ tăng dần lên thôi.

Mình không viết Function này cho FireFox vì bên FireFox nó không chạy được Function này, sau đó ngay đoạn có thẻ h5 của mình và thêm vào các thuộc tính như trong slider thôi.
Mã:
-webkit-animation: text 20s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;

Khi người dùng di chuột qua tấm hình thì mình muốn toàn bộ hoạt động này sẽ tạm dừng lại cho đến khi di chuột ra ngoài thì sẽ chạy tiếp thì mình sẽ làm như sau:
Mã:
nav > ul:hover,
nav > ul:hover h5{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
}

Một điểm fix bên trình duyệt Google Chrome nữa là khi slider chạy tới tấm cuối cùng nó sẽ bị lệch đi 1px nữa làm mất cái đường viền của ảnh đi thì mình fix như sau:
Mã:
nav > ul li:last-child {
    width: 161px;
}

Trong code CSS mình viết mỗi trình duyệt là 2 function, một function hiển thị cho 10 tấm hình và một function cho 5 tấm hình. Nếu các bạn có ít hơn hoặc nhiều hơn thì các bạn tự tính theo cách của mình đã hướng dẫn như ở trên nhé.

Chúc các bạn thành công.


Nguồn: izwebz.com​
 

Đính kèm

  • css3-slider.rar
    201.6 KB · Lượt xem: 3

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom