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ừ 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;awidth:950px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
#main_object{
position:relative;awidth: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 awidth
l1h : 235, // layer 1 height
l2w : 441, // layer 2 awidth
l3w : 307, // layer 3 awidth
// 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: Css, Javascript
Bài viết được đăng bởi webmaster
-
Quỳnh
-
mohammedx
