대망의 마우스 스토커 3탄!
이번에는 문자가 마우스를 따라다니게 하는 설정을 해보고자 한다.
마우스 스토커의 다양한 효과
3) 특정 문자가 마우스를 따라다니는 효과
지난 포스팅 마우스 스토커 2탄에서도 언급했던 일본 사이트의 내용을 가져왔다.
kurt.grigg８■文字■ 波文字マウス
●2016/08/16：原本自体が、即時関数で囲んでグローバル変数を消してあります。 文章がさざ波（Ripple）のようにゆれながら付いてくるマウスストーカーのJavaScriptです。 原本は文字の色が単色
oekakirenn.webcrow.jp
이번에는 문자열을 지정하여 커서를 움직일 때마다 문자가 따라붙는 효과이다.
아래의 스크립트에서 "반갑습니다"라고 되어 있는 부분을 원하는 문장으로 수정하면 된다.
<script type="text/javascript"><!--
(function (){ //
var msg = "반갑습니다";//★마우스 스토커 효과를 낼 문장을 넣는다
var colour="random"; //★문자색 지정 "random"으로 지정했으나, 여기에 색상을 지정하면 지정한 색상으로 문장이 표기된다.
//★「1은 빨간색 계열로 랜덤색상」「2는 녹색 계열로 랜덤색상」「3은 파란색 계열로 랜덤색상」「4는 무지개색 계열로 랜덤색상」「5는 회색 계열로 랜덤색상」「0」은 검정색으로 지정
var r_mode=1;
var fs=22; //★문자 크기 조정. 단위px
var sc=0.8; //★마우스가 정지했을 째 문자 사이의 폭 지정
var ft=""; //★문자 서체를 지정. 지정하지 않을 경우 var ft="";으로
var delay=0.35; //★문자가 흔들리는 정도. 1미만으로 지정 Must be less than 1!!
var speed=40; //★문자 속도 setTimeout - run speed
var hy=30; //★마우스와 문자간 상하 거리 조정. 마이너스로 문자가 위
var hx=0; //★마우스와 문자간 좌우 거리 조정. 마이너스로 문자가 좌
/*★↓문자 그림자 설정을 CSS형식으로 지정. 여기선 검정 그림자 지정. 지정할 필요가 없으면var fcss="";로 한다*/
var fcss="text-shadow:1px 1px 1px #000;";
//End user config.--------------------------------------------------
msg=msg.split("");
var n=msg.length;
var y=0, x=0, yp=[], xp=[], yd=[], xd=[], temp=[], scy=0, scx=0, i=0;
for (i=0; i<n; i++){
document.write("<span id='letters"+i+"' style='position:absolute;font-size:"+fs+"px;font-family:"+ft+";"+fcss+"'>"+msg[i]+"<\/span>");
}
document.onmousemove=function(e){ y=e.pageY+hy; x=e.pageX+hx;}
function assign(){
var h=window.pageYOffset+window.innerHeight-fs-hy-18;
for(i=0; i<n; i++){ temp[i].top =Math.min(h, yp[i])+'px'; temp[i].left=xp[i]+(i*(fs*sc))+'px';}
}
function ripple(){
yp[0]=yd[0]+=(y-yd[0]) * delay;
xp[0]=xd[0]+=(x-xd[0]) * delay;
for(var i=1; i<n; i++){
yp[i] = yd[i]+=(yp[i-1] - yd[i]) * delay;
xp[i] = xd[i]+=(xp[i-1] - xd[i]) * delay;
}
assign(); setTimeout(ripple,speed);
}
function newColour() { /*■문자 지정색 추가*/
var c=[Math.floor(Math.random()*256),Math.floor(Math.random()*256)];
if(r_mode===1){return("rgb(255,"+c[0]+","+c[1]+")");}//빨강색
else if(r_mode===2){return ("rgb("+c[0]+",255,"+c[1]+")");}//초록색
else if(r_mode===3){return ("rgb("+c[0]+","+c[1]+",255)");}//파란색
else if(r_mode===4){
var cc=[];
cc[0]=255;
cc[1]=Math.floor(Math.random()*256);
cc[2]=Math.floor(Math.random()*(256-cc[1]/2));
cc.sort(function(){return (0.5-Math.random());});
return ("rgb("+cc[0]+","+cc[1]+","+cc[2]+")");}//무지개색
else if(r_mode===5){return ("rgb("+c[0]+","+c[0]+","+c[0]+")");}//회색
else if(r_mode===0){document.getElementById("letters"+i).style.color=colour;}
}
function init(){
for (i=0; i<n; i++){
yp[i]=xp[i]=yd[i]=xd[i]=0;
temp[i]=document.getElementById("letters"+i).style;
temp[i].color=(colour=="random")?newColour():colour;//■문자색 지정 추가
}
ripple();
}
init();
}());
// --></script>
블로그 관리> 꾸미기> 스킨 편집> html 편집 > HTML의 <body></body>사이에
위의 소스를 복사하여 붙여 넣기를 한다.
붙여넣기를 한 후, 적용하고 새로고침을 누르면 아래와 같이 문자열이 적용된 것을 확인할 수 있다.
이외에도 다양한 효과를 줄 수 있으나, 이번 글에서는 여기까지만 정리해보았다.
위에 게재된 스크립트의 값을 수정해서 색상을 변경하거나 할 수도 있으므로
티스토리 블로그를 꾸밀 때 응용해서 해보아도 좋을 듯하다.
이걸로 3탄까지 끝!
[마우스 스토커 1탄] 팅커벨 효과
글이 너무 길어 이 글을 나눠서 포스팅했다.
아래 링크를 클릭!
[마우스 스토커 1탄] 마우스 움직일 때마다 별들이 따라다니는 팅커벨 효과주기
홈페이지 제작이 유행하던 시절에 태그와 자바 스크립트를 이용해서 마우스가 움직일 때마다 따라다니는 이미지나, 별이 내리는 효과 등을 적용해본 적이 있었기에 블로그 스킨 편집에 대해 관
40holic.tistory.com
[마우스 스토커 2탄] 마우스를 따라다니는 아이콘을 넣고 싶은 경우
[마우스 스토커 2탄] 마우스를 따라다니는 아이콘 설정하기
지난번 포스팅에 이어서 2탄! 마우스 움직일 때 효과주기 (마우스 스토커) 홈페이지 제작이 유행하던 시절에 태그와 자바 스크립트를 이용해서 마우스가 움직일 때마다 따라다니는 이미지나, 별
40holic.tistory.com
'Holic한 꿀팁 > 티스토리 꾸미기' 카테고리의 다른 글
| [마우스 꾸미기 2탄] 마우스 아이콘 바꾸기 (0) | 2021.05.05 |
|---|---|
| [티스토리 블로그 속도 개선(최적화)하기①] 모바일웹 사용 설정 (0) | 2021.04.26 |
| [마우스 스토커 2탄] 마우스를 따라다니는 아이콘 설정하기 (5) | 2021.04.24 |
| [마우스 스토커 1탄] 마우스 움직일 때마다 별들이 따라다니는 팅커벨 효과주기 (14) | 2020.09.23 |
| [마우스 꾸미기 1탄] 마우스 모양 바꾸기 (0) | 2020.08.27 |