Hướng dẫn tạo animation dễ dàng bằng Javascript

Để tạo chuyển động cho đối tượng, bạn có thể làm bằng nhiều cách như sử dụng CSS3, Jquery, hoặc các framework animation đầy rẫy trên mạng :D. Hôm nay Demos Việt Nam sẽ hướng dẫn bạn cách tạo chuyển động đơn giản nhất bằng 1 vài lệnh jquery đơn giản.

Đầu tiên, chúng ta tạo html đơn giản cho đối tượng trước:

<div id="divsanta">
    <img src="img/santa.png" alt="Demos Xmas" />
</div>

Tiếp theo là một tí CSS

#divsanta{
    position: absolute;
    left: 0;
    bottom: 0;
}

Sau đó áp dụng jquery bằng hàm đơn giản như sau:

var windowW = window.innerWidth - 270;
// 270 là chiều dài của tấm hình

//Di chuyển đối tượng từ trái sang phải
function moveRight(){
    $("#divsanta").animate({left: "+="+windowW}, 15000, moveLeft)
}

//Di chuyển đối tượng từ phải sang trái
function moveLeft(){
    $("#divsanta").animate({left: "-="+windowW}, 15000, moveRight)
}

$(document).ready(function() {
    //Bắt đầu chạy thôi :D
    moveRight();
});

Cùng xem thành quả nhé :D