Path Animation Technique

Dưới đây là một kỹ thuật minh họa kết hợp giữa CSS và Javascript để tạo các ảnh động.


Bấm VÀO ĐÂY để xem hiệu ứng của bài hướng dẫn này

Để làm được như vậy, chép đoạn Code sau dán vào phần <head></head>, Right Click và Save 2 File ảnh trên vào cùng thư mục với file HTML (hoặc thay đường dẫn tuyệt đối tới hình ảnh.)


<script language="javascript" type="text/javascript">
t=0; function moveittop(){ document.getElementById("electron").style.top =165*Math.cos(180*Math.PI/180)*Math.cos(t) - 40*Math.sin(45*Math.PI/180)*Math.sin(t) + 190; document.getElementById("earth").style.left =200*Math.sin(180*Math.PI/180)*Math.cos(t) + 40*Math.cos(45*Math.PI/180)*Math.sin(t) + 175; t = t + .1; setTimeout("moveittop(t)",100); } t=0; function moveitleft(){ document.getElementById("electron1").style.top =165*Math.cos(270*Math.PI/180)*Math.cos(t) - 40*Math.sin(45*Math.PI/180)*Math.sin(t) + 190; document.getElementById("earth1").style.left =174*Math.sin(270*Math.PI/180)*Math.cos(t) + 40*Math.cos(45*Math.PI/180)*Math.sin(t) + 180; t = t + .1; setTimeout("moveitleft(t)",100); } t=0; function moveit_45(){ document.getElementById("electron2").style.top =165*Math.cos(230*Math.PI/180)*Math.cos(t) - 30*Math.sin(45*Math.PI/180)*Math.sin(t) + 195; document.getElementById("earth2").style.left =165*Math.sin(230*Math.PI/180)*Math.cos(t) + 30*Math.cos(45*Math.PI/180)*Math.sin(t) + 180; t = t + .1; setTimeout("moveit_45(t)",100); } t=0; function moveit_135(){ document.getElementById("electron3").style.top =165*Math.cos(135*Math.PI/180)*Math.cos(t) - 30*Math.sin(315*Math.PI/180)*Math.sin(t) + 195; document.getElementById("earth3").style.left =165*Math.sin(135*Math.PI/180)*Math.cos(t) + 30*Math.cos(315*Math.PI/180)*Math.sin(t) + 170; t = t + .1; setTimeout("moveit_135(t)",100); } function moveit(){ moveittop(t); moveitleft(t); moveit_135(t); moveit_45(t); }
</script>


Thêm các dòng codes sau đây vào trong phần BODY:


<form>
<input type="button" value="Move It" onclick="'moveit();'">
</form>
<div id="atomic" style="position:absolute; top:200; left:300;">
<img src="http://thuchanh.it2know.googlepages.com/atomback.gif" />
<div id="electron" style="position:absolute; top:25; left:175;">
<imgsrc="http://thuchanh.it2know.googlepages.com/electron.gif"></div>
<div id="electron1" style="position:absolute; top:190; left:15;">
<img src="http://thuchanh.it2know.googlepages.com/electron.gif" /></div>
<div id="electron2" style="position:absolute; top:90; left:50;">
<img src="http://thuchanh.it2know.googlepages.com/electron.gif" /></div>
<div id="electron3" style="position:absolute; top:90; left:270;">
<img src="http://thuchanh.it2know.googlepages.com/electron.gif" />
</div>
</div>
</div>


Tùy theo màn hình mà bạn có thể phải thay đổi giá trị tọa độ để các hạt electron nằm ngay trên đỉnh của Atom. Bạn có thể cần thêm vào hàm Stop It để ngưng sự chuyển động của hạt electron.

Để Test bài này, bạn cũng có thể chép cả 2 đoạn Code trên VÀO ĐÂY để thấy kết quả

Submit Article :- Digg + Technorati + del.icio.us + Stumbleupon + Reddit + BlinkList + Furl + Yahoo+ Blogmarks + Ekstreme Socializer
POSTED IN : |

This entry was posted on 23:53 and is filed under .Follow any comments here with the RSS 2.0 . You can leave a response so that we can know your suggestion.
0 Responses to "Path Animation Technique"

Đăng nhận xét