Gowebz

Khi lang thang vào những website chuyên giới thiệu các sản phẩm công nghệ, phong cách giao diện metro. Chúng ta thấy đôi khi họ sử dụng hiệu ứng trượt theo chiều ngang hoặc chiều dọc khá đẹp mắt.

Để làm được hiệu ứng đó, nhiều bạn cứ nghĩ phải đụng đến jquery hay đại loại là cần đến javascript. Và hầu hết các website giải quyết vấn đề theo cách này.
Với tôi thì nghĩ khác, tại sao chúng ta lại phải dùng js, nếu trinh duyệt tắt js thì sao. Trong khi vấn đề đó có thể được giải quyết đơn giản.

Bài viết này là một demo mẫu viết bằng HTML + CSS, rất dễ tùy biết, nhanh gọn đẹp.

<style>
#bendoi{width:500px; height:300px; border:0px solid #ccc; float:left;overflow:hidden;}
.ngang, .doc {float:left; margin:5px; padding:5px; border:1px solid #ccc;display: block;overflow:hidden;box-align:center;text-align:center; min-width:50px; min-height:100px; position: relative;
display: table-cell;vertical-align: middle;
}
/*ngang*/
.ngang .trai {float: left;position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; -o-transition-duration: 1s;
padding-top:35px}

.ngang .phai { float: right;width: ;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; -o-transition-duration: 1s; padding-top:35px}

.ngang:hover .trai {margin-left: 120px;}
.ngang:hover .phai {margin-right: 120px;}
/*doc*/
.doc .tren {position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; -o-transition-duration: 1s; top:10px}

.doc .duoi {position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s; -o-transition-duration: 1s;
bottom:10px;}

.doc:hover .tren {margin-top: 70px;}
.doc:hover .duoi {margin-bottom: 70px;}

</style>

<div id="bendoi">
<div class="ngang" style="width:150px; ">
<div class="trai"> trai </div>
<div class="phai"> phai </div>
</div>

<div class="doc" style="width:; height:;">
<div class="tren"> tren </div>
<div class="duoi"> duoi </div>
</div>

<div class="doc" style="width:; height:;">
<div class="tren"> tren </div>
<div class="duoi"> duoi </div>
</div>

<div class="ngang" style="width:150px; height:;">
<div class="trai"> trai </div>
<div class="phai"> phai </div>
</div>

<div class="ngang" style="width:150px; height:;">
<div class="trai"> trai </div>
<div class="phai"> phai </div>
</div>

<div class="doc" style="width:; height:;">
<div class="tren"> tren </div>
<div class="duoi"> duoi </div>
</div>

<div class="ngang" style="width:150px; height:;">
<div class="trai"> trai </div>
<div class="phai"> phai </div>
</div>

<div class="doc" style="width:; height:;">
<div class="tren"> tren </div>
<div class="duoi"> duoi </div>
</div>

</div>

trai

phai

tren

duoi

tren

duoi

trai

phai

trai

phai

tren

duoi

trai

phai

tren

duoi

CSS - Hiệu ứng trượt lên xuống trái phải