Slider đơn giản sử dụng HTML và CSS3

Việc sử dụng slider, với nội dung có thể là ảnh, bài viết ngắn…, để làm tăng thêm tính sinh động cho trang web đang được ứng dụng rất nhiều trong hầu hết các thể loại website hiện nay. Có rất nhiều cách để chúng ta có thể tạo được một slider đẹp, nhiều hiệu ứng, đầy đủ chức năng. Bạn chỉ việc lên google và tìm kiếm với từ khóa “jQuery slider” chẳng hạn, thì ngay lập tức “Khoảng 7.770.000 kết quả” hiện ra. Nhưng việc sử dụng các plugin khác nhiều khi vô tình làm tăng dung lượng của trang web, hơn nữa nếu chúng ta muốn tùy chỉnh các chức năng thì cũng khá là khó khăn, vì phải dựa vào API đã có sẵn. Với sự ra đời của nhiều thuộc tính mới trong CSS3 thì việc tạo ra những hiệu ứng cũng như chuyển động trong các trang web đã trở nên dễ dàng hơn bao giờ hết, vậy tại sao ta không thử sử dụng CSS3 để làm một slider như ý muốn? Bài viết này sẽ hướng dẫn bạn cách sử dụng HTML và CSS3 để tạo 1 slider đơn giản và tất nhiên là “from scratch” J

Chú ý: Để hoàn thành project nhỏ này, bạn nên chuẩn bị 3 bức ảnh kích thước bằng nhau (400x200px), nếu không muốn mất công thì bạn có thể tải về file mã nguồn đính kèm bên dưới.

Sau khi hoàn thành nó trông như thế này:

Trông có đẹp ko nào? JĐể có thể quan sát được các hiệu ứng thì bạn hãy tải file mã nguồn về nhé.

Code HTML:

<div id="slider">
    <ul>
        <li>
            <img src="img1.jpg"/>
            <h2 class="top">Hello</h2>
            <h2 class="bottom">World</h2>
        </li>
        <li>
            <img src="img2.jpg"/>
            <h2 class="top">Xin chao</h2>
            <h2 class="bottom">Cac ban</h2>
        </li>
        <li>
            <img src="img3.jpg"/>
            <h2 class="top">Hom nay</h2>
            <h2 class="bottom">la thu 7</h2>
        </li>
    </ul>
</div>

Để loại bỏ râu ria, ta thêm code CSS sau:

     body {
        font-family: arial, sans-serif;
        font-size: 12px;
        color: #FFF;
    }
    li {
        width: 400px;
        height: 200px;
        position: relative;
    }
    #slider {
        width: 400px;
        height: 200px;
        overflow: hidden;
    }
    ul {
        padding: 0;
        margin-top: 0px;
    }
    h2 {
        position: absolute;
        font-weight: bold;
        font-size: 20px;
        text-shadow: 0px 0px 3px #000;
        padding: 5px;
        background: url(bg.png) repeat transparent;
    }
    h2.top {
        top: 10px;
        left: -400px;
    }
    h2.bottom {
        bottom: 10px;
        right: -400px;
    }

Sau khi thêm CSS, 3 tấm ảnh sẽ được xếp theo hàng dọc, nối đuôi nhau. Khung ảnh chỉ cho hiển thị 1 tấm duy nhất (thẻ li ở trên cùng sẽ hiển thị, 2 thẻ li còn lại bị ẩn nằm dưới).

Chú ý: Nếu bạn muốn hiển thị hình ảnh thứ 2 thì chỉ việc thay đổi thuộc tính margin-top của thẻ ul thành -200px; tấm ảnh thứ 3 thì -400px.

Ở đây, tôi dùng hai thẻ h2 cho hai đoạn text với class là top và bottom. “h2.top” sẽ được cố định so với thẻ li của nó bằng position: absolute và lùi ra ngoài lề trái 400px, tương tự “h2.top” lùi sang bên phải.

Chú ý: do ta fix cố định vị trí theo element cha (thẻ li), nên li phải có position: relative Công việc đến đây coi như đã gần xong. Việc cuối cùng chúng ta cần làm đó là tạo chuyển động cho các thẻ khung ảnh và các thẻ h2 nằm trong mỗi khung ảnh đó.

Trước tiên là chuyển động của khung ảnh. Ở đây, tôi sẽ tạo hiệu ứng cho khung ảnh trượt lên, sau khi trượt đến cuối thì quay trở lại vị trí ban đầu.

    @-webkit-keyframes slide {
        0% {margin-top:  0px;}
        28% {margin-top: 0px;}
        33% {margin-top: -200px;}

        61% {margin-top: -200px;}
        66% {margin-top: -400px;}

        95% {margin-top: -400px;}
        100% {margin-top: 0px}
    }

Add thêm dòng sau vào trong thẻ ul:

    -webkit-animation: slide 10s ease-in-out 0s infinite normal;

Code này dành cho trình duyệt Chrome và Safari, bạn có thể copy rồi sửa webkit thành o hoặc moz để slide có thể hoạt động trên Opera và Firefox (hiện IE chưa hỗ trợ CSS3 animation).

Hãy cùng phân tích đoạn code trên

• Trong 28% của 10s (tương đương 2.8s) đầu tiên, hiển thị tấm hình 1
• Trong 0.5s tiếp theo, thời gian chuyển giao từ hình 1 sang hình 2
• Trong 2.8s tiếp theo, chỉ hiển thị hình 2
• Trong 0.5s tiếp theo, chuyển từ hình 2 sang hình 3
• Trong 2.9s tiếp theo, giữ nguyên hình 3
• Trong 0.5s cuối, quay trở lại hình 1
• Lặp lại chuyển động trên vô hạn lần (infinite)
• Hiệu ứng cho mỗi chuyển động là “ease-in-out” bạn có thể hiểu nôm na là bắt đầu chuyển động thì tốc độ chậm, sau đó tăng tốc đạt max ở giữa khoảng thời gian của chuyển động, rồi lại giảm tốc độ.
• 10s là thời gian để thực hiện animation “slide” (animation-duration)
• 0s là giá trị của animation-delay, có nghĩa là thực hiện chuyển động ngay mà ko có thời gian chờ

Sau khi đã xong chuyển động của khung ảnh, ta làm nốt phần chuyển động của text

    @-webkit-keyframes top {
        0% {left:  10px;}
        28% {left: 10px;}
        30% {left: -400px;}
        33% {left: 10px;}

        61% {left: 10px;}
        63% {left: -400px;}
        66% {left: 10px;}

        95% {left: 10px;}
        97% {left: -400px}
        100% {left: 10px}
    }
    @-webkit-keyframes bottom {
        0% {right:  10px;}
        28% {right: 10px;}
        30% {right: -400px;}
        33% {right: 10px;}

        61% {right: 10px;}
        63% {right: -400px;}
        66% {right: 10px;}

        95% {right: 10px;}
        97% {right: -400px}
        100% {right: 10px}
    }

Thêm vào h2.top

    -webkit-animation: top 10s ease-in-out 0s infinite normal;

Thêm vào h2.bottom

    -webkit-animation: bottom 10s ease-in-out 0s infinite normal;

Vậy là chúng ta đã hoàn thành xong một slider đơn giản sử dụng HTML và CSS3. Thật thú vị phải không nào. Hãy thử tự mình xây dựng một slider với đầy đủ tính năng như play, pause, navigation với nhiều hiệu ứng khác nhau, bạn sẽ thấy công sức mình bỏ ra không lãng phí chút nào! J

Mã nguồn: tải về

Phạm Văn Thịnh – Sinh viên FPT Aptech Hà Nội