Hôm nay mình sẽ giới thiệu thêm cho các bạn cách tạo banner động với thuộc tính transform và transition có trong CSS3, cùng với sự giúp đỡ nho nhỏ của jQuery.
Hiện tại trình duyệt IE8 trở về trước chưa hỗ trợ tốt các thuộc tính transform và transition nên để có thể xem demo bài viết, các bạn nên xem trên trình duyệt Firefox, Chrome và Safari.
Bước 1 : HTML Markup
Chúng ta sẽ cần có bộ khung html cơ bản như sau :
<section class="banner">
<div class="inner">
<div class="slogan">
<h1>Banner CSS3</h1>
<h2>This is a demo of CSS3 Banner & jQuery</h2>
</div>
<div class="image-block">
<img class="photo-1" alt="" src="images/photo_banner-1.png">
<img class="photo-2" alt="" src="images/photo_banner-21.png">
<img class="photo-3" alt="" src="images/photo_banner-31.png">
<img class="photo-4" alt="" src="images/photo_banner-41.png">
</div>
</div>
</section>
Bước 2 : Định dạng CSS
Đầu tiên chúng ta sẽ cần định dạng cơ bản cho banner :
body{
background: linear-gradient(to bottom, #EDEDED, #FFFFFF) repeat-x scroll 0 0 #F4F4F4;
overflow: hidden;
padding-top: 90px;
}
.banner{ background: url(images/bgd_banner.jpg) no-repeat 50% 0; height: 391px;}
.inner {
margin: 0 auto;
width: 1280px;
}
div.slogan{
float:left;
width: 310;
margin:100px 0 0 80px;
line-height: 3px;
}
.slogan h1{ text-transform: uppercase; font-size: 48px;}
.slogan h2{ font-size: 20px;}
div.image-block{
width:790px;
float: left;
position: relative;
}
.slogan{opacity:0;}
img.photo-1,img.photo-2,img.photo-3,img.photo-4{
position: absolute;
opacity:0;
}
img.photo-1{
z-index: 400;
top:90px;
width: 42%;
}
img.photo-2{
z-index:300;
right:115px;
top:180px;
}
img.photo-3{
z-index: 200;
top:60px;
width: 97%;
}
img.photo-4{
top:100px;
right: -70px;
z-index: 100;
width: 81%;
}
Kế tiếp , chúng ta sẽ định dạng css cho các hiệu ứng động mà chúng ta muốn làm trên banner:
.banner .image-block .photo-1 {
opacity: 0;
transform: translateY(-1000px);
-webkit-transform: translateY(-1000px); /* Safari and Chrome */
-ms-transform: translateY(-1000px); /* IE 9 */
}
.banner .image-block .photo-2 {
opacity: 0;
transform: translateX(3000px);
-webkit-transform: translateX(3000px); /* Safari and Chrome */
-ms-transform: translateX(3000px); /* IE 9 */
}
.banner .image-block .photo-4, .banner .image-block .photo-3 {
transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0); /* IE 9 */
}
.banner .image-block .photo-1 {
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}
.banner .image-block .photo-2 {
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}
.banner .image-block .photo-4, .banner .image-block .photo-3 {
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}
.banner .image-block .photo-1.active {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px); /* Safari and Chrome */
-ms-transform: translateY(0px); /* IE 9 */
}
.banner .image-block .photo-2.active {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px); /* Safari and Chrome */
-ms-transform: translateX(0px); /* IE 9 */
}
.banner .image-block .photo-3.active,.banner .image-block .photo-4.active {
transform: scale(1);
-webkit-transform: scale(1); /* Safari and Chrome */
-ms-transform: scale(1); /* IE 9 */
opacity: 1;
}
Bước 3 : jQuery
Trong đoạn css trên , thuộc tính transform và transition chỉ xuất hiện khi các thẻ <img> được chèn vào class .active. Và có thể làm được điều này khi chúng ta chèn đoạn script sau :
$(document).ready(function(){
var count_banner = 4,
timmer_banner = null;
$('.slogan').animate({
'opacity':1
},5000);
timmer_banner = setInterval(function(){
if(count_banner < 0){
clearInterval(timmer_banner);
return false;
}
$('.banner .photo-' + (count_banner)).addClass('active');
count_banner--;
},600);
});
Và đừng quên chèn khai báo jQuery nhé :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Bây giờ các bạn thử refresh lại thành quả của mình và kiểm tra kết quả xem sao nhé. Hiệu ứng tuy đơn giản, nhưng sẽ giúp các bạn hiểu rõ hơn thuộc tính transform và transition có trong CSS3.