Tạo ảnh di chuyển với CSS3 và Javacript

26/08/2012

Tạo ảnh di chuyển với CSS3 và Javacript

Từ việc CSS3 cho phép bạn sử dụng nhiều background cho một đối tượng, hôm nay mình xin giới thiệu với các bạn một thủ thuật sẽ giúp bạn di chuyển nhiều hình nền với một phần góp sức nho nhỏ của javacript. Rất đơn giản và dễ làm, và đây là demo bài viết.
Để thực hiện trước hết chúng ta lần lượt tạo các file sau và chèn vào code tương ứng.

index.html

<html>
<head>
<title>Multiple backgrounds with CSS3 and a little of animation</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div>
<div id="main_object"></div>
</div>
</body>
</html>

main.css

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:950px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

#main_object{
position:relative;width:950px;height:700px;overflow:hidden;cursor:pointer;
background-image: url(../images/layer1.png), url(../images/layer2.png), url(../images/layer3.png), url(../images/bg.jpg);
background-position: center bottom, right top, right bottom, left top;
background-repeat: no-repeat;
}

Các bạn chú ý là các background được cách nhau bằng dấu phẩy (,) và nó cũng tương ứng cho background-position. Nếu các bạn không thích viết như trên thì cũng có thể viết lại như sau :

background: url(../images/layer1.png) no-repeat center bottom, url(../images/layer2.png) no-repeat right top, url(../images/layer3.png) no-repeat right bottom, url(../images/bg.jpg) no-repeat left top;
}

main.js

Đây là toàn bộ đoạn script giúp bạn di chuyển từng background:

var ex76 = {
// variables
l1w  : 358, // layer 1 width
l1h  : 235, // layer 1 height
l2w  : 441, // layer 2 width
l3w  : 307, // layer 3 width

// inner variables
obj  : 0,
xm   : 0,
ym   : 0,
x1 : 0,
y1 : 0,
x2 : 0,
x3 : 0,

// initialization
init : function() {
this.obj = document.getElementById('main_object');

this.x2 = this.obj.clientWidth;
this.x3 = -this.l3w;

this.run();
},

// refreshing mouse positions
mousemove : function(e) {
this.xm = e.clientX;
this.ym = e.clientY;

// recalculation new positions
this.x1 = this.xm - this.obj.offsetLeft - ex76.l1w/2;
this.y1 = this.ym - this.obj.offsetTop - ex76.l1h/2;
},

// loop function
run : function() {
// shifting second layer object to left
ex76.x2--;
if (ex76.x2 < -ex76.l2w) ex76.x2 = ex76.obj.clientWidth;

// shifting second layer object to right
ex76.x3++;
if (ex76.x3 > ex76.obj.clientWidth) ex76.x3 = -ex76.l3w;

// updating background-position value with new positions
ex76.obj.style.backgroundPosition = ex76.x1 + 'px ' + ex76.y1 + ', ' + ex76.x2 + 'px top, ' + ex76.x3 + 'px bottom, left top';

// loop
setTimeout(ex76.run, 20);
}
};

window.onload = function() {
ex76.init(); // initialization

// binding mouse move event
document.onmousemove = function(e) {
if (window.event)
e = window.event;
ex76.mousemove(e);
}
}

Mình hy vọng các bạn sẽ thấy thích thủ thuật này, các bạn có thể save ảnh từ demo hoặc tự dùng file hình của mình. Chúc các bạn thành công !

Chuyên Mục: ,

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

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
  • Quỳnh

    Mình có thể hỏi người viết bài kỹ hơn về phần này đc ko. bạn có thể chỉ mình kỹ hơn 1 chút chứ. nếu có thể thì ll vs mình nhé. sun9xx9@gmai.com hoặc sun9xx9@yahoo.com.vn. cảm ơn bạn !

  • mohammedx

    رائع