Tạo Marquee nâng cao với CSS3 Animation

Thông thường hiệu ứng Marquee mang lại cho chúng ta cảm giác khá nhàm chán, với dòng chữ chạy từ phải sang trái hoặc ngược lại. Còn nữa , khi chạy thường thì rất khó đọc chữ  mà còn hay bị giật.

Hôm nay mình sẽ chia sẻ với các bạn cách nâng cao cho hiệu ứng marquee vốn dĩ nhàm chán này trở nên sinh động và hấp dẫn hơn. Các bạn có thể xem demo bài viết để hiểu rõ hơn những điều mình nói.

 Xem Demo | Download

Chỉ cần kết hợp với CSS3 Animation,và với vài bước cơ bản như sau:

Bước 1 : HTML

<div class="marquee down">
<p><a href="http://www.thuthuatweb.net/wordpress/tao-hieu-ung-cuon-goc-peel-away-cho-trang-wordpress.html" target="_blank" >Tạo hiệu ứng cuốn góc (Peel Away) cho trang WordPress</a></p>
<p><a href="http://www.thuthuatweb.net/wordpress/9-wordpress-plugins-giup-ban-cai-thien-toc-do-load-anh.html" target="_blank" >9 WordPress Plugins giúp bạn cải thiện tốc độ load ảnh</a></p>
</div>

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

Chúng ta sẽ cần đoạn css cơ bản như sau cho hiệu ứng marquee.

.marquee {
        awidth: 500px;
        height: 50px;
        margin: 25px auto;
        overflow: hidden;
        position: relative;
        border: 1px solid #000;
        margin: 25px auto;

       	background-color: #222;

      	-webkit-border-radius: 5px;
      	border-radius: 5px;

      	-webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
      	box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
    }

    .marquee p {
        position: absolute;
        font-family: Tahoma, Arial, sans-serif;
        awidth: 100%;
        height: 100%;
        margin: 0;
        color:#fff;
        line-height: 50px;
        text-align: center;
        text-shadow: 1px 1px 0px #000000;
        filter: dropshadow(color=#000000, offx=1, offy=1);
    }

Bước 3 : Tạo hiệu ứng

Trong bài viết này, mình sẽ chia sẻ với các bạn cách làm hiệu ứng chữ chạy từ trên xuống dưới. các bạn có thể xem toàn bộ hiệu ứng khác bằng cách download demo về máy của mình để tham khảo.

Và sau đây là đoạn css giúp bạn tạo hiệu ứng :

.marquee.down p {
        transform:translateY(-100%);
    }

    .marquee.down p:nth-child(1) {
        animation: down-one 20s ease infinite;
    }
    .marquee.down p:nth-child(2) {
        animation: down-two 20s ease infinite;
    }

    @keyframes down-one {
        0%  {
            transform:translateY(-100%);
        }
        10% {
            transform:translateY(0);
        }
        40% {
            transform:translateY(0);
        }
        50% {
            transform:translateY(100%);
        }
        100%{
            transform:translateY(100%);
        }
    }
    @keyframes down-two {
        0% {
            transform:translateY(-100%);
        }
        50% {
            transform:translateY(-100%);
        }
        60% {
            transform:translateY(0);
        }
        90% {
            transform:translateY(0);
        }
        100%{
            transform:translateY(100%);
        }
    }

Bây giờ các bạn chỉ cần việc lưu lại và kiểm tra kết quả ở trình duyệt. Và cũng như mọi khi , chỉ có các trình duyệt là Firefox 8+, Chrome 12+ và Safari 5.0+ là có thể xem được hiệu ứng này. Tuy nhiên các bạn nên nhớ thêm vào tiền tố (-moz- và -webkit-) nhé.

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

Chuyên Mục: Css

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