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

Bước 1 : HTML

Đoạn mã HTML trong ví dụ này sẽ như sau

<div class="wrapper">
	<h1>Marquee với CSS3 Animation</h1>
	<h3>Di chuyển chữ xuống phía dưới</h3>
	<div class="marquee down">
		<p><a href="#" target="_blank">Tạo hiệu ứng cuốn góc (Peel Away) cho trang WordPress</a></p>
		<p><a href="#" target="_blank">9 WordPress Plugins giúp bạn cải thiện tốc độ load ảnh</a></p>
	</div>

	<h3>Di chuyển chữ lên trên</h3>
	<div class="marquee up">
		<p><a href="#" target="_blank">5 thủ thuật sử dụng jQuery với WordPress</a></p>
		<p>
			<a href="#" target="_blank">Hướng dẫn update wordpress bằng tay</a>
		</p>
	</div>

	<h3>Di chuyển chữ sang trái</h3>
	<div class="marquee left">
		<p><a href="#" target="_blank">Tạo nút bấm với các Pseudo-elements trong CSS</a></p>
		<p>
			<a href="#" target="_blank">Tìm hiểu sơ lược về lựa chọn CSS3:First-Of-Type</a>
		</p>
	</div>

	<h3>Di chuyển chữ sang phải</h3>
	<div class="marquee right">
		<p><a href="#" target="_blank">Resizing images với PHP</a></p>
		<p>
			<a href="#" target="_blank">Tạo Multiple Files Upload bằng PHP</a>
		</p>
	</div>
	
</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.
    html {  
        background: url('images/skewed_print.png');  
    }  

    a {
    	color: #00B1DC;
    	text-decoration: none;
	}

	a:hover{ color: #0097bc; }

	.wrapper{ color:#fff; text-align: center;}

     .marquee {  
        width: 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;  
        width: 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);  
    }  

    /* Hieu ung chu chay len tren */
    .marquee.up p {   
        transform:translateY(100%);  
        -webkit-transform:translateY(100%);
        -moz-transform:translateY(100%);
    }  
    .marquee.up p:nth-child(1) {  
        animation: up-one 20s ease infinite;  
        -webkit-animation: up-one 20s ease infinite;
        -moz-animation: up-one 20s ease infinite;
    }  
    .marquee.up p:nth-child(2) {  
        animation: up-two 20s ease infinite; 
        -webkit-animation: up-two 20s ease infinite; 
        -moz-animation: up-two 20s ease infinite;  
    }  
    
    @keyframes up-one {  
        0%  {  
            transform:translateY(100%);  
        }  
        10% {  
            transform:translateY(0);  
        }  
        40% {  
            transform:translateY(0);  
        }  
        50% {  
            transform:translateY(-100%);  
        }  
        100%{  
            transform:translateY(-100%);  
        }  
    }  

    @-webkit-keyframes up-one {  
        0%  {  
            -webkit-transform:translateY(100%);  
        }  
        10% {  
            -webkit-transform:translateY(0);  
        }  
        40% {  
            -webkit-transform:translateY(0);  
        }  
        50% {  
            -webkit-transform:translateY(-100%);  
        }  
        100%{  
            -webkit-transform:translateY(-100%);  
        }  
    } 

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

    @-webkit-keyframes up-two {  
        0% {  
            -webkit-transform:translateY(100%);  
        }  
        50% {  
            -webkit-transform:translateY(100%);  
        }  
        60% {  
            -webkit-transform:translateY(0);          
        }  
        90% {  
            -webkit-transform:translateY(0);          
        }  
        100%{  
            -webkit-transform:translateY(-100%);  
        }  
    }

    @-moz-keyframes up-two {  
        0% {  
            -moz-transform:translateY(100%);  
        }  
        50% {  
            -moz-transform:translateY(100%);  
        }  
        60% {  
            -moz-transform:translateY(0);          
        }  
        90% {  
            -moz-transform:translateY(0);          
        }  
        100%{  
            -moz-transform:translateY(-100%);  
        }  
    }

    /* Hieu ung chu chay xuong duoi */

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

    .marquee.down p:nth-child(1) {  
        animation: down-one 20s ease infinite; 
        -webkit-animation: down-one 20s ease infinite; 
        -moz-animation: down-one 20s ease infinite;
    }  
    .marquee.down p:nth-child(2) {  
        animation: down-two 20s ease infinite;  
        -webkit-animation: down-two 20s ease infinite; 
        -moz-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%);  
        }  
    }  

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

    @-moz-keyframes down-one {  
        0%  {  
            -moz-transform:translateY(-100%);  
        }  
        10% {  
            -moz-transform:translateY(0);  
        }  
        40% {  
            -moz-transform:translateY(0);  
        }  
        50% {  
            -moz-transform:translateY(100%);  
        }  
        100%{  
            -moz-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%);  
        }  
    }    

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

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

    /* Hieu ung chu chay sang trai */

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


    @keyframes left-one {  
        0%  {  
            transform:translateX(100%);  
        }  
        10% {  
            transform:translateX(0);  
        }  
        40% {  
            transform:translateX(0);  
        }  
        50% {  
            transform:translateX(-100%);  
        }  
        100%{  
            transform:translateX(-100%);  
        }  
    }  

    @-webkit-keyframes left-one {  
        0%  {  
            -webkit-transform:translateX(100%);  
        }  
        10% {  
            -webkit-transform:translateX(0);  
        }  
        40% {  
            -webkit-transform:translateX(0);  
        }  
        50% {  
            -webkit-transform:translateX(-100%);  
        }  
        100%{  
            -webkit-transform:translateX(-100%);  
        }  
    }


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

    @-webkit-keyframes left-two {  
        0% {  
            -webkit-transform:translateX(100%);  
        }  
        50% {  
            -webkit-transform:translateX(100%);  
        }  
        60% {  
            -webkit-transform:translateX(0);          
        }  
        90% {  
            -webkit-transform:translateX(0);          
        }  
        100%{  
            -webkit-transform:translateX(-100%);  
        }  
    }  

    @-moz-keyframes left-two {  
        0% {  
            -moz-transform:translateX(100%);  
        }  
        50% {  
            -moz-transform:translateX(100%);  
        }  
        60% {  
            -moz-transform:translateX(0);          
        }  
        90% {  
            -moz-transform:translateX(0);          
        }  
        100%{  
            -moz-transform:translateX(-100%);  
        }  
    }  



    /* Hieu ung chu chay sang phải */
    @keyframes right-one {  
        0%  {  
            transform:translateX(-100%);  
        }  
        10% {  
            transform:translateX(0);  
        }  
        40% {  
            transform:translateX(0);  
        }  
        50% {  
            transform:translateX(100%);  
        }  
        100%{  
            transform:translateX(100%);  
        }  
    }  

    @-webkit-keyframes right-one {  
        0%  {  
            -webkit-transform:translateX(-100%);  
        }  
        10% {  
            -webkit-transform:translateX(0);  
        }  
        40% {  
            -webkit-transform:translateX(0);  
        }  
        50% {  
            -webkit-transform:translateX(100%);  
        }  
        100%{  
            -webkit-transform:translateX(100%);  
        }  
    } 

    @-moz-keyframes right-one {  
        0%  {  
            -moz-transform:translateX(-100%);  
        }  
        10% {  
            -moz-transform:translateX(0);  
        }  
        40% {  
            -moz-transform:translateX(0);  
        }  
        50% {  
            -moz-transform:translateX(100%);  
        }  
        100%{  
            -moz-transform:translateX(100%);  
        }  
    }   

    
    @keyframes right-two {  
        0% {  
            transform:translateX(-100%);  
        }  
        50% {  
            transform:translateX(-100%);  
        }  
        60% {  
            transform:translateX(0);          
        }  
        90% {  
            transform:translateX(0);          
        }  
        100%{  
            transform:translateX(100%);  
        }  
    }  


    @-webkit-keyframes right-two {  
        0% {  
            -webkit-transform:translateX(-100%);  
        }  
        50% {  
            -webkit-transform:translateX(-100%);  
        }  
        60% {  
            -webkit-transform:translateX(0);          
        }  
        90% {  
            -webkit-transform:translateX(0);          
        }  
        100%{  
            -webkit-transform:translateX(100%);  
        }  
    }  


    @-moz-keyframes right-two {  
        0% {  
            -moz-transform:translateX(-100%);  
        }  
        50% {  
            -moz-transform:translateX(-100%);  
        }  
        60% {  
            -moz-transform:translateX(0);          
        }  
        90% {  
            -moz-transform:translateX(0);          
        }  
        100%{  
            -moz-transform:translateX(100%);  
        }  
    }  

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

 

Hiện tại 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. Các bạn có thể download file đính kèm ở cuối bài viết để hiểu rõ hơn.

 

Download Source

Related Post


Sử dụng LESS để viết CSS
Thursday, September 26, 2013
Nếu là một web developer, chắc hẳn bạn đã quá quen thuộc với CSS, ngôn ngữ để định dạng hiển thị của trang web. CSS rất đơn giản, dễ học, nhất là với người mới bắt đầu. Tuy nhiên nó cũng có nhược điểm là khá “tĩnh”, điều này dẫn đến việc trong CSS rất khó để dùng lại các thuộc tính, khai báo của thành phần này vào thành phần khác. Đồng thời rất khó quản lý khi các đoạn mã CSS trở nên quá nhiều.
Giới thiệu và hướng dẫn cách sử dụng Bootstrap
Tuesday, September 24, 2013
Có bao giờ bạn phải viết HTML/CSS rùi ngồi suy nghỉ “Tại sao mình phải viết đi viết lại nhưng class giống nhau như thế này ?” hay “Mình sẽ làm 1 css framework để về sau sử dụng lại .Rồi chợt nhận ra là mọi chuyện không đơn giản như vậy class bạn viết ra ở web này rồi lại hì hục sửa ở web khác  nhiều lúc ngồi sửa còn lâu hơn là viết mới.
Search

Đăng ký nhận bài mới


Category

Blog Archive