Từng bước tạo banner động bằng CSS3 và jQuery

Nếu các bạn đã từng xem qua bài viết Tạo web banner động với CSS3 , trong bài viết đó , chúng ta đã làm quen với tính năng animation có trong CSS3. 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.

Xem Demo | Download

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;
    awidth: 1280px;
}

div.slogan{
	float:left;
	awidth: 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{
	awidth: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;
awidth: 42%;
}

img.photo-2{
z-index:300;
right:115px;
top:180px;
}

img.photo-3{
	z-index: 200;
	top:60px;
	awidth: 97%;
}

img.photo-4{
	top:100px;
	right: -70px;
	z-index: 100;
	awidth: 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.

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

Chuyên Mục: Css

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