Hướng dẫn tạo web banner động với CSS3

Xem: 1179    Tải: 10   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

0 điểm   ( 4 đánh giá ) File đã được kiểm thử
Miễn Phí [megacode]huong-dan-tao-web-banner-dong-voi.zip (109.81 KB)
Tải miễn phí
Xem Demo

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-tao-web-banner-dong-voi.zip
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

Bằng cách cắt nhỏ riêng lẻ từng hình trong banner và sử dụng hiệu ứng animation có trong CSS3, các bạn có thể tạo ra các banner động mà không cần phải dùng đến Flash. Với cách làm này , các bạn có thể tạo ra các banner động chạy tốt trên các thiết bị không hỗ trợ Flash (như iphone, ipad chẳng hạn…) . Tuy nhiên nhược điểm của cách làm này là nó không hỗ trợ trên tất cả các trình duyệt, đặc biệt là IE7 và các trình duyệt IE cũ hơn.

Bằng cách cắt nhỏ riêng lẻ từng hình trong banner và sử dụng hiệu ứng animation có trong CSS3, các bạn có thể tạo ra các banner động mà không cần phải dùng đến Flash. Với cách làm này , các bạn có thể tạo ra các banner động chạy tốt trên các thiết bị không hỗ trợ Flash (như iphone, ipad chẳng hạn…) . Tuy nhiên nhược điểm của cách làm này là nó không hỗ trợ trên tất cả các trình duyệt, đặc biệt là IE7 và các trình duyệt IE cũ hơn.

Bước 1 : HTML Markup

Chúng ta sẽ cần có bộ khung html để minh họa như sau :

<div id="ad-1">
    <div id="content">
        <h2>Lost at sea?</h2>
        <h3>Relax - we've got your rudder.</h3>
        <form>
            <input type="text" id="email" value="Email address..." />
            <input type="submit" id="submit" value="Guide me" />
        </form>
    </div>
    <div id="clouds">
        <ul id="cloud-group-1">
            <li class="cloud-1"></li>
            <li class="cloud-2"></li>
            <li class="cloud-3"></li>
        </ul>
        <ul id="cloud-group-2">
            <li class="cloud-1"></li>
            <li class="cloud-2"></li>
            <li class="cloud-3"></li>
        </ul>
    </div>
    <ul id="boat">
        <li>
            <div id="question-mark"></div>
        </li>
    </ul>
    <ul id="water">
        <li id="water-back"></li>
        <li id="water-front"></li>
    </ul>
</div>

Bước 2 : CSS

Kế đến chúng ta sẽ định dạng css cơ bản cho bộ khung này. Đầu tiên là nền của banner

#ad-1 {
    width: 720px;
    height: 300px;
    float: left;
    margin: 40px auto 0;
    background-image: url(../images/ad-1/background.png);
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    box-shadow: 0px 0px 6px #000;
}

Hình ảnh sử dụng trong đoạn css bên trên các bạn có thể tìm thấy ở mục download. Kế tiếp chúng ta sẽ định dạng cho dòng chữ và form

#ad-1 #content {
    width: 325px;
    float: right;
    margin: 40px;
    text-align: center;
    z-index: 4;
    position: relative;
    overflow: visible;
}
#ad-1 h2 {
    font-family: 'Alfa Slab One', cursive;
    color: #137dd5;
    font-size: 50px;
    line-height: 50px;
    text-shadow: 0px 0px 4px #fff;
    animation: delayed-fade-animation 7s 1 ease-in-out; /* This will fade in our h2 with a simulated delay */
}
#ad-1 h3 {
    font-family: 'Boogaloo', cursive;
    color: #202224;
    font-size: 31px;
    line-height: 31px;
    text-shadow: 0px 0px 4px #fff;
    animation: delayed-fade-animation 10s 1 ease-in-out; /* This will fade in our h3 with a simulated delay */
}
#ad-1 form {
    margin: 30px 0 0 6px;
    position: relative;
    animation: form-animation 12s 1 ease-in-out;  /* This will slide in our email address form with a cool elastic effect. This also has a simulated delay */
}
#ad-1 #email {
    width: 158px;
    height: 48px;
    float: left;
    padding: 0 20px;
    font-size: 16px;
    font-family: 'Lucida Grande', sans-serif;
    color: #fff;
    text-shadow: 1px 1px 0px #a2917d;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border:1px solid #a2917d;
    outline: none;
    box-shadow: -1px -1px 1px #fff;
    background-color: #c7b29b;
    background-image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
}
#ad-1 #email:focus {
    background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
 
}
#ad-1 #submit {
    height: 50px;
    float: left;
    cursor: pointer;
    padding: 0 20px;
    font-size: 20px;
    font-family: 'Boogaloo', cursive;
    color: #137dd5;
    text-shadow: 1px 1px 0px #fff;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border:1px solid #bcc0c4;
    border-left: none;
    background-color: #fff;
    background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
}
#ad-1 #submit:hover {
    background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
}

Bây giờ chúng ta sẽ định dạng cho phần water và khai báo animation

#ad-1 li#water-back {
    width: 1200px;
    height: 84px;
    background-image: url(../images/ad-1/water-back.png);
    background-repeat: repeat-x;
    z-index: 1;
    position: absolute;
    bottom: 10px;
    left: -20px;
    animation: water-back-animation 3s infinite ease-in-out; /* Bobbing water effect */
}
#ad-1 li#water-front {
    width: 1200px;
    height: 158px;
    background-image: url(../images/ad-1/water-front.png);
    background-repeat: repeat-x;
    z-index: 3;
    position: absolute;
    bottom: -70px;
    left:-30px;
    animation: water-front-animation 2s infinite ease-in-out; /* Another bobbing water effect - yet slightly different. We'll make this animation move a little bit faster in order to create some perspective. */
}

Làm tương tự cho phần định dạng chiếc thuyền (boat )

#ad-1 ul#boat {
    width: 249px;
    height: 215px;
    z-index: 2;
    position: absolute;
    bottom: 25px;
    left: 20px;
    overflow: visible;
    animation: boat-in-animation 3s 1 ease-out; /* Slides the group in when ad starts */
}
#ad-1 ul#boat li {
    width: 249px;
    height: 215px;
    background-image: url(../images/ad-1/boat.png);
    position: absolute;
    bottom: 0px;
    left: 0px;
    overflow: visible;
    animation: boat-animation 2s infinite ease-in-out; /* Simulate the boat bobbing on the water - similar to the animation already used on the water itself. */
}
#ad-1 #question-mark {
    width: 24px;
    height: 50px;
    background-image: url(../images/ad-1/question-mark.png);
    position: absolute;
    right: 34px;
    top: -30px;
    animation: delayed-fade-animation 4s 1 ease-in-out; /* Fade in the question mark */
}

Phần đám mây :

#ad-1 #clouds {
    position: absolute;
    top: 0px;
    z-index: 0;
    animation: cloud-animation 30s infinite linear; /* Scrolls the clouds off to the left, resets, and repeats */
}
#ad-1 #cloud-group-1 {
    width:720px;
    position: absolute;
    left:0px;
}
#ad-1 #cloud-group-2 {
    width: 720px;
    position: absolute;
    left: 720px;
}
#ad-1 .cloud-1 {
    width: 172px;
    height: 121px;
    background-image: url(../images/ad-1/cloud-1.png);
    position: absolute;
    top: 10px;
    left: 40px;
}
#ad-1 .cloud-2 {
    width: 121px;
    height: 75px;
    background-image: url(../images/ad-1/cloud-2.png);
    position: absolute;
    top: -25px;
    left: 300px;
}
#ad-1 .cloud-3 {
    width: 132px;
    height: 105px;
    background-image: url(../images/ad-1/cloud-3.png);
    position: absolute;
    top: -5px;
    left: 530px;
}

Bước 3 : Phần hoạt cảnh (Animations)

Đây chính là phần trọng tâm nhất của bài viết này. Sau khi chúng ta đã khai báo animation cho các đối tượng, bây giờ chúng ta sẽ tiến hành tạo hiệu ứng.

- Đầu tiên là các hiệu ứng cho các đối tượng sử dụng animation delayed-fade-animation

@keyframes delayed-fade-animation {
    0%   {opacity: 0;}
    80%  {opacity: 0;}
    100% {opacity: 1;}
}

Hiệu ứng cho form

@keyframes form-animation {
    0%   {opacity: 0; right: -400px;}
    90%  {opacity: 0; right: -400px;}
    95%  {opacity: 0.5; right: 20px;}
    100% {opacity: 1; right: 0px;}
}

Hiệu ứng này sẽ làm cho chiếc thuyền xuất hiện từ bên trái :

@keyframes boat-in-animation {
    0%   {left: -200px;}
    100% {left: 20px;}
}

Hiệu ứng chuyển động của những đám mây

@keyframes cloud-animation {
    0%       {left: 0px;}
    99.9999%   {left: -720px;}
    100%     {left: 0px;}
}

Hiệu ứng này sẽ làm cho thuyền trông như đang lênh đênh trên biển :

@keyframes boat-animation {
    0%   {bottom: 0px; left: 0px;}
    25%  {bottom: -2px; left: -2px;}
    70%  {bottom: 2px; left: -4px;}
    100% {bottom: -1px; left: 0px;}
}

Và cuối cùng là hiệu ứng sóng biển

@keyframes water-back-animation {
    0%   {bottom: 10px; left: -20px;}
    25%  {bottom: 8px; left: -22px;}
    70%  {bottom: 12px; left: -24px;}
    100% {bottom: 9px; left: -20px;}
}
@keyframes water-front-animation {
    0%   {bottom: -70px; left: -30px;}
    25%  {bottom: -68px; left: -32px;}
    70%  {bottom: -72px; left: -34px;}
    100% {bottom: -69px; left: -30px;}
}

Chỉ cần các bạn nắm vững phần animation trong CSS3 là các bạn có thể làm được nhiều hiệu ứng khác nhau. Ngoài ra nếu các bạn muốn nâng cao, có thể tìm hiểu thêm về CSS transformations.

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

Hướng dẫn tạo web banner động với CSS3

Hướng dẫn tạo web banner động với CSS3 Đăng ngày 22-08-2014  Bằng cách cắt nhỏ riêng lẻ từng hình trong banner và sử dụng hiệu ứng animation có trong CSS3, các bạn có thể tạo ra các banner động mà không cần phải dùng đến Flash. Với cách làm này , các bạn có thể tạo ra các banner động chạy tốt trên các thiết bị không hỗ trợ Flash (như iphone, ipad chẳng hạn…) . Tuy nhiên nhược điểm của cách làm này là nó không hỗ trợ trên tất cả các trình duyệt, đặc biệt là IE7 và các trình duyệt IE cũ hơn. 5/10 1179

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+84) 246. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn
File gợi ý cho bạn
File tải nhiều nhất
Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;