Cách tạo ảnh di chuyển với CSS3 và Javacript

css tips, multiple background, thiet ke web, thu thuat css, thu thuat 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. Để 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.

 

 HỖ TRỢ TRỰC TUYẾN