Hiệu ứng Shakira?

Chào các bạn, “Coding is cool” là câu khẩu hiệu của Tạp Chí Lập Trình, tuy nhiên, tôi biết rằng việc Lập trình có đôi khi là nhàm chán, nhất là đối với những người vẫn còn khó khăn trong việc tiếp cận những dòng code mới. Nhằm tạo một chút vui vẻ và cũng để mang lại cho các bạn chút hứng thú để “play” với những dòng code của mình, hôm nay tôi giới thiệu tới các bạn cách dùng CSS để tạo một hiệu ứng có tên là “Hiệu ứng Shakira”.

Chắc chắn bạn đã gặp hiệu ứng này nhiều lần nhưng chỉ là bạn không biết đến cái tên mà tôi dùng để gọi nó mà thôi, (thú thực là cách đây khoảng 30 phút về trước nếu có ai hỏi tôi về cái hiệu ứng có tên như vậy thì tôi cũng chịu, đơn giản là vì tôi vừa mới nghĩ ra :)). Hiệu ứng của tôi được mô tả như sau: Chúng ta có một bức ảnh, trên bức ảnh đó có một tiêu đề của bài viết, khi ta di chuột lên trên bức ảnh thì một đoạn tóm tắt nội dung bài viết sẽ được hiện ra. Đơn giản là thế, nhưng chắc bạn vẫn chưa tưởng tượng ra được, hãy click vào đây và di chuột lên trên bức ảnh to nhất thì bạn sẽ hiểu ngay tôi đang nói đến cái gì.

Tóm lại, ban đầu ta có cái này:

khi di chuột lên bức ảnh ta nhận được kết quả sau:

HTML Code

Chúng ta bắt đầu nhé, mã HTML của chúng ta là như sau:

[sourcecode lang=”html”]
<div class="shakira-box">
<img src="shakira-1.jpg">
<div class="shakira-content">
<h2 class="shakira-header">Nhảy cùng Shakira</h2>;
<p class="shakira-body">Shakira sinh ngày 2 tháng 2 năm 1977, là một ca sĩ, nhạc sĩ, nhạc công người Colombia, một trong những ca sĩ nhạc Rock thành công nhất thế giới.</p>
</div>
</div>
[/sourcecode]

Nhìn vào đó bạn sẽ dễ dàng nhận thấy rằng tôi có một thẻ div ngoài cùng với class là “shakira-box”, đây chính là thẻ div chứa tất cả các thành phần con bên trong như là: một bức ảnh (thẻ <img>), một thẻ <div> với nội dung bên trong là một header (thẻ <h2>) và một đoạn tóm tắt bài viết (thẻ <p>). Để dễ bề điều khiển các thuộc tính của thẻ thì tôi đã thêm vào đó các class khác nhau. Bây giờ đến lượt thêm các dòng code css.

CSS Code

[sourcecode lang=”css”]
.shakira-box{
width:400px;
height:300px;
overflow:hidden;
}
[/sourcecode]

Đối với thẻ <div> ngoài cùng thì tôi sẽ gắn cho nó một chiều cao, chiều rộng nhất định; thêm nữa tôi gắn giá trị ‘hidden’ cho thuộc tính ‘overflow’, điều này khiến cho cái ‘box’ này chỉ hiển thị những nội dung nằm trong khoảng không gian của nó, những phần nằm ở ngoài thì sẽ bị ẩn đi.

[sourcecode lang=”css”]
.shakira-box img{
width:100%;
height:100%;
}
[/sourcecode]

Đoạn code ở trên thì quá đơn giản phải không nào, chắc không cần phải giải thích gì thêm.

[sourcecode lang=”css”]
.shakira-box .shakira-content{
width:100%;
height:120px;
top:-40px;
position:relative;
background-color:rgba(0,0,0,0.6);
color:#FFF;
}
[/sourcecode]

Đoạn code trên chính là nơi quan trọng nhất của hiệu ứng này, ta sẽ đi phân tích từng dòng một. Thuộc tính ‘width’ quy định rằng thẻ <div> này sẽ có độ rộng bằng chính thẻ bao ở ngoài (thẻ có class là shakira-box ); thuộc tính height quy định chiều cao của thẻ content (thẻ có class là shakira-content), trong trường hợp này thì thẻ content của tôi có chiều cao là 120px. Thuộc tính position có giá trị là ‘relative’, thuộc tính ‘top’ có giá trị là ‘-40px’, điều này làm cho thẻ <div> của chúng ta được dịch lên phía trên một đoạn là 40px so với vị trí bình thường của nó, tôi làm như vậy với mục đích là để phần header của chúng ta nằm gọn bên trong ‘box’ và sẽ được nhìn thấy, bạn nên xem để ý đoạn code dưới đây và bạn sẽ thấy là phần header sẽ có chiều cao là 40px:

[sourcecode lang=”css”]
.shakira-box .shakira-header{
height:40px;
margin:0;
font-size:24pt;
padding: 0 5px;
}
[/sourcecode]

Song song với việc quy định vị trí cho thẻ content, bây giờ chúng ta sẽ tạo một bộ chọn css khác để nếu khi ta di chuột lên trên ‘box‘ thì vị trí của thẻ content sẽ thay đổi:

[sourcecode lang=”css”]
.shakira-box:hover .shakira-content{
top: -120px;
}
[/sourcecode]

Bây giờ bạn thử dừng lại và quan sát kết quả của mình nào. Tất cả mọi thứ đã hoạt động tốt, trừ việc chúng ta vẫn chưa có được hiệu ứng di chuyển chậm lên phía trên. Để làm được điều này thì chúng ta nên sử dụng thuộc tính transition mà css3 cung cấp cho chúng ta, bộ chọn .shakira-box .shakira-content bây giờ được sửa lại như sau:

[sourcecode lang=”css”]
.shakira-box .shakira-content{
width:100%;
height:120px;
top:-40px;
position:relative;
background-color:rgba(0,0,0,0.6);
color:#FFF;
transition:top 0.5s;
-moz-transition:top 0.5s;
-webkit-transition:top 0.5s;
-o-transition:top 0.5s;
-ms-transition:top 0.5s;
}
[/sourcecode]

Các bạn nên nhớ rằng css3 vẫn đang trong quá trình phát triển, do đó có nhiều trình duyệt chưa hỗ trợ hết các thuộc tính transition, việc ta thêm các tiền tố như –moz-, –webkit-, –o– là cần thiết để thuộc tính này hoạt động tốt trên các loại trình duyệt khác nhau (ngoại trừ anh chàng Internet Explorer từ trước cho đến phiên bản 9). Thuộc tính transition trong trường hợp này quy định rằng thuộc tính top sẽ không thay đổi ngay tức thì khi chúng ta hover chuột lên ‘box’, mà nó sẽ thay đổi dần dần trong vòng 0.5 giây.

Tải ngay mã nguồn xuống và bạn sẽ thấy kết quả của chúng ta là như thế nào: download.

Lời kết

Để có được những hiệu ứng như trên thì ngoài việc sử dụng CSS chúng ta có thể dùng javascript, hoặc đơn giản hơn là dùng jQuery, nhưng nếu so về số lượng dòng code thì chắc chắn việc dùng css sẽ ít hơn nhiều, còn nếu so về performance thì việc dùng css cũng tối ưu hơn (sao thế nhỉ?), chúng ta cần phải cảm ơn css3 vì đã cung cấp nhiều thuộc tính mới và rất tiện lợi để chúng ta sử dụng.