마우스에서 번지는 물결 파장
Appendix/컴퓨터 이야기 Posted at 2008. 7. 9. 02:09
인트로 화면 같은 곳에다 써도 좋을 멋진 스크립트에요^^
* 덧붙임
여기다가 바로 적용시켰더니, 마우스 효과가 나타나는 부분은 그림이 위로 올라오기 때문에
아래에 깔린 링크가 클릭이 안 되는 문제점이 있어서, 정말 인트로 화면에나 써야겠네요.
부득이하게 미리보기를 지원 못하고 화면만 캡쳐했습니다.
미리보기를 원하시면 소스를 열어서 복사하신 후, 오른쪽 포스트 검색창에서 '태그연습장'을
검색하셔서 미리 적용해보세요^^
* 덧붙임
여기다가 바로 적용시켰더니, 마우스 효과가 나타나는 부분은 그림이 위로 올라오기 때문에
아래에 깔린 링크가 클릭이 안 되는 문제점이 있어서, 정말 인트로 화면에나 써야겠네요.
부득이하게 미리보기를 지원 못하고 화면만 캡쳐했습니다.
미리보기를 원하시면 소스를 열어서 복사하신 후, 오른쪽 포스트 검색창에서 '태그연습장'을
검색하셔서 미리 적용해보세요^^
<적용예제화면>
<html>
<head>
<style type="text/css">
#screen {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#screen img {
position: absolute;
filter: alpha(opacity=50);
opacity: 0.5;
left: -1000px;
}
</style>
<script type="text/javascript">
var xm = 0;
var ym = 0;
var nx = 0;
var ny = 0;
var nw = 0;
var nh = 0;
function resize() {
with(document.getElementById("screen")){
nx = offsetLeft;
ny = offsetTop;
nw = offsetWidth;
nh = offsetHeight;
}
}
onresize = resize;
document.onmousemove = function(e){
if(window.event) e=window.event;
xm = (e.x || e.clientX) - nx;
ym = (e.y || e.clientY) - ny;
R = 1;
}
// ---------------------
var Nb = 17;
var R = 0;
var C = 0;
var object = new Array();
function makedoot(N){
this.ds = document.createElement("img");
this.ds.src = document.getElementById("glob").src;
document.getElementById("screen").appendChild(this.ds);
this.r = (N * 100 / Nb);
this.x = -1000;
this.y = 0;
this.Ge = function (){
with (this){
if (r >= 100){
R--;
if (R<0){
x = Math.random() * nw;
y = Math.random() * nh;
}
else {
x = xm;
y = ym;
}
r = 0;
ds.style.zIndex = C++;
}
r += 2;
with (ds.style){
left = Math.round(x-r)+"px";
top = Math.round(y-r)+"px";
width = height = Math.round(r * 2)+"px";
}
if (ds.filters != undefined) ds.filters.item(0).opacity = Math.round(102 - r);
else ds.style.opacity = (102 - r) / 100;
}
}
}
onload = function() {
resize();
for (i=0; i<Nb; i++) object[i] = new makedoot(i);
setInterval("for(i in object)object[i].Ge();", 16);
}
</script>
</head>
<body>
<div id="screen"></div>
<img id="glob" src="http://psicopompus.tistory.com/attachment/hk030000000011.gif" style="visibility: hidden">
</body>
</html>
<head>
<style type="text/css">
#screen {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#screen img {
position: absolute;
filter: alpha(opacity=50);
opacity: 0.5;
left: -1000px;
}
</style>
<script type="text/javascript">
var xm = 0;
var ym = 0;
var nx = 0;
var ny = 0;
var nw = 0;
var nh = 0;
function resize() {
with(document.getElementById("screen")){
nx = offsetLeft;
ny = offsetTop;
nw = offsetWidth;
nh = offsetHeight;
}
}
onresize = resize;
document.onmousemove = function(e){
if(window.event) e=window.event;
xm = (e.x || e.clientX) - nx;
ym = (e.y || e.clientY) - ny;
R = 1;
}
// ---------------------
var Nb = 17;
var R = 0;
var C = 0;
var object = new Array();
function makedoot(N){
this.ds = document.createElement("img");
this.ds.src = document.getElementById("glob").src;
document.getElementById("screen").appendChild(this.ds);
this.r = (N * 100 / Nb);
this.x = -1000;
this.y = 0;
this.Ge = function (){
with (this){
if (r >= 100){
R--;
if (R<0){
x = Math.random() * nw;
y = Math.random() * nh;
}
else {
x = xm;
y = ym;
}
r = 0;
ds.style.zIndex = C++;
}
r += 2;
with (ds.style){
left = Math.round(x-r)+"px";
top = Math.round(y-r)+"px";
width = height = Math.round(r * 2)+"px";
}
if (ds.filters != undefined) ds.filters.item(0).opacity = Math.round(102 - r);
else ds.style.opacity = (102 - r) / 100;
}
}
}
onload = function() {
resize();
for (i=0; i<Nb; i++) object[i] = new makedoot(i);
setInterval("for(i in object)object[i].Ge();", 16);
}
</script>
</head>
<body>
<div id="screen"></div>
<img id="glob" src="http://psicopompus.tistory.com/attachment/hk030000000011.gif" style="visibility: hidden">
</body>
</html>
invalid-file