그림자를 움직여 보자. 이것 또한 간단하다. 두개의 똑같은 레이어를 만들고 하나는 고정, 하나는 고정된 레이어의 바로 밑으로 이동시키면 그림자만들기에서 배운식으로 그림자가 움직이는 듯한 착각을 준다.
| HTML Example |
<html>
<head>
<title>Hellow Homepage</title>
<!-- cdhtml.js 지정 -->
<script language="JavaScript1.2" src="cbdhtml.js">
</script>
<!-- HTML의 CSS 참조 -->
<style type="text/css">
H1 {
font-size: 23pt;
font-family: Arial;
font-weight: 800;
color: black;
}
H2 {
font-size: 23pt;
font-family: Arial;
font-weight: 800;
color: gray;
}
</style>
</head>
<body bgcolor=white>
<script language="JavaScript1.2">
<!-- 첫번째레이어생성 그림자로 쓸것임 따라서 먼저 생성해야겠죠? -->
var text1="text1";
content='<H2>Dynamic HTML</H2>';
<!-- 위치지정을 살펴보세요 -->
createLayer(text1,240,240,300,100,1,content);
<!-- 어디로 스라이딩 할까를 결정합니다. -->
slideLayer(text1,42,42,200);
<!-- 그림자가 비치게하는 글자지정 -->
var text2="text2";
content='<H1>Dynamic HTML</H1>';
<!-- 위치살펴보세요 -->
createLayer(text2,40,40,300,100,1,content);
</script>
</body>
</HTML> |
| | |
|
| 설명 | 우선 아이디어는 그림자 만들기에서 시작. 글자레이어를 var text2=test2; 에서 만들었구,
그 다음 위치를 내가 원하는 대로 지정합니다. 여기서는 x=40, y=40 에 글자레이어를 지정했죠, 그다음
방금 만든 글자에 그림자를 만들어야겠죠. 글자 크기는 같구 색깔만 바꿉니다. 그리고 그림자를 움직여서 글자 바로 밑에 가도록 해야 하니깐 글자의 45도 오른쪽 아래에서 글자로 움직이는 게 좋아 보이겠죠. 그래서 적용결과처럼 하려면 그림자레이어는 글자레이어의 x,y 좌표에서 각각 100씩 더하기(+) 합니다. 그러니깐 그림자 레이어의 위치는 x=140(40+100) , y=140(40+100) 으로 지정합니다.
그다음에 그림자를 글자의 바로밑으로 슬라이딩 시킵니다. 슬라이딩 함수를 사용하면 되죠...슬라이딩 함수의 사용은 현재 레이어의 위치에서 마지막 가서 멈출 곳의 좌료를 지정하면 됩니다. 물론 스피드도 지정하죠.
최종적으로 그림자가 글자 바로 밑에 가게 하려면 글자레이어의 위치 (40,40)보다 오른쪽 아래에 위치하기 위해 (42,42)로 잡습니다. 그럼 이제 각각의 레이어가 생성되고 그림자 레이어는 생성된 좌표 (140,140)에서 최종 목표 (42,42)까지 슬라이딩 하죠.
정말 쉽다...무슨 장난같습니다. 그죠?
|
|
|
|
|
