[티스토리꾸미기]마우스 따라다니는 하트 스크립트/태그

10여년간 초록창 블로그를 운영하다 유튜브의 채널운영으로 전향하게되면서 자연스럽게 시작하게된것이 바로 티스토리 블로그입니다.

그 옛날 초대장을 받아야 꾸릴 수 있었던곳이 모두에게 오픈되고나서 2021년 현재에는 일상기록, 광고, 감정적인 글들이 주가되는 초록창 블로그에 비해서 좀더 전문적인 정보를 얻을 수 있는 곳으로써 자리매김한것이 바로 티스토리블로그라고 개인적으로는 생각됩니다.

 

또, 자신의 개성을 살릴 수 있는 스킨으로 사이트를 자유롭게 구성하고 디자인할 수 있기때문에 남들과는 다른 차별화를 가진 블로거로써도 활동할 수 있는것이 큰 매리트가 아닐까 싶어요. 때문에 저의 블로그를 예쁘게 만들어주신 묘연님같은 티스토리 스킨 제작자분들께서 멋진 스킨을 만들고계시는 것이네요.☺️ (개인적으로 디스는 아니지만 초록창 블로그는 뭘 어떻게 꾸며도 "ㄴㅇㅂ 블로그" 라는것을 감출수가 없도록 해두었기때문에 시간 지나면서 좀 갑갑해지더라구요)

 

물론 블로그는 내용이 참 중요하지만, 점점 더 시각적인 요소들에 단순화를 선호하게된 시대에 정성스럽게 올린 글을 업데이트하는 공간도 함께 꾸며가는것이 글의 가독성에도 마이너스가 아닌 플러스 요인이 되지않을까요.

 

일본에 살게되면서 자연스럽게 인터넷에 접속하면 구글창으로 시작하는 생활을 하게되다보니 네XX검색때보다 더 광활한 정보를 얻을 수 있어 최근엔 재밌는 소스들을 무척 쉽게 얻으실수가 있는 것 같습니다. 

 

 

 

오늘은 저의 블로그에도 적용시킨 "마우스에서 뿜어지는 하트" 모양의 마우스 자바스크립트 소스를 공유할까 합니다. 기재되는 설정 방법은 초보자분들의 시선에서 참고하여 작성해봤습니다.

 

이 귀여운 자바스크립트는 마우스의 움직임에 따라 사이즈가 각기 다른 하트들이 뿜뿜 뿜어져 나오기 시작하는데요. 클릭을 한 상태로 움직여도, 클릭을 하지 않은 상태여도 마우스 끝에서 귀여운 하트가 생성되다가 퐁- 하고 터집니다. 참고로 본 소스는 http://www.mf2fm.com/rv 개발자 사이트를 참고하였으며, 본 포스팅에 첨부한 파일에는 현재 제가 블로그에 적용한 "옐로우믹스"컬러의 소스가 들어있습니다.

 

 

제가 설정한 6가지 컬러입니다.

 

딱히 모두 노랑 계열이라고 이야기하기는 어렵지만 레몬이나 라임느낌이 생각나는 여름 컬러 사이에 보이는 핑크. 핑크는 포기할 수 없었어요... (눈물) 단지 "이색도 괜찮네!" 라고 혹~시나 마음에 드시는 분들이 있으시려나, 하는 마음에 첨부하는 말단파일입니다. ^^;; 다운받으셔서 복사/붙여넣기 하시면 되는데요, 되도록이면 컬러코드만 넣어 수정하는것이 더 쉬울수도있고, 본인 개성에 맞게 여러가지 컬러로 수정하시는 편이 나으실지도 모르겠어요./웃음/ 💬  소스 파일은 맨 하단에서 다운로드 받으세요 ⭐️

 

컬러코드는 아래의 사이트에서 원하는 색을 선택해 참고하시면 좋을 것 같습니다.

html컬러코드사이트 >https://htmlcolorcodes.com/

컬러코드 입력 형태의 예 >> #f6699

 

 

 

<script type="text/javascript">
// <![CDATA[
var colours=new Array('#f00', '#f06', '#f0f', '#f6f', '#f39', '#f9c'); // colours of the hearts
var minisize=16; // 제일 작을 사이즈의 하트 픽셀 수를 입력
var maxisize=28; // 제일 클 사이즈의 하트 픽셀 수를 입력
var hearts=66; // 화면에 보일 최대의 하트 수
var over_or_under="over"; // set to "over" for hearts to always be on top, or "under" to allow them to float behind other objects

/*****************************
*JavaScript Love Heart Cursor*
*  (c)2013+ mf2fm web-design *
*   http://www.mf2fm.com/rv  *
*  DON'T EDIT BELOW THIS BOX *
*****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var herz=new Array();
var herzx=new Array();
var herzy=new Array();
var herzs=new Array();
var kiss=false;

if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addRVLoadEvent(mwah);

function mwah() { if (document.getElementById) {
  var i, heart;
  for (i=0; i<hearts; i++) {
    heart=createDiv("auto", "auto");
    heart.style.visibility="hidden";
	heart.style.zIndex=(over_or_under=="over")?"1001":"0";
    heart.style.color=colours[i%colours.length];
	heart.style.pointerEvents="none";
    if (navigator.appName=="Microsoft Internet Explorer") heart.style.filter="alpha(opacity=75)";
    else heart.style.opacity=0.75;
    heart.appendChild(document.createTextNode(String.fromCharCode(9829)));
    document.body.appendChild(heart);
    herz[i]=heart;
	herzy[i]=false;
  }
  set_scroll();
  set_width();
  herzle();
}}

function herzle() {
  var c;
  if (Math.abs(x-ox)>1 || Math.abs(y-oy)>1) {
    ox=x;
    oy=y;
    for (c=0; c<hearts; c++) if (herzy[c]===false) {
	  herz[c].firstChild.nodeValue=String.fromCharCode(9829);
      herz[c].style.left=(herzx[c]=x-minisize/2)+"px";
      herz[c].style.top=(herzy[c]=y-minisize)+"px";
      herz[c].style.fontSize=minisize+"px";
	  herz[c].style.fontWeight='normal';
      herz[c].style.visibility='visible';
      herzs[c]=minisize;
      break;
    }
  }
  for (c=0; c<hearts; c++) if (herzy[c]!==false) blow_me_a_kiss(c);
  setTimeout("herzle()", 40);
}

document.onmousedown=pucker;
document.onmouseup=function(){clearTimeout(kiss);};

function pucker() {
  ox=-1;
  oy=-1;
  kiss=setTimeout('pucker()', 100);
}

function blow_me_a_kiss(i) {
  herzy[i]-=herzs[i]/minisize+i%2;
  herzx[i]+=(i%5-2)/5;
  if (herzy[i]<sdown-herzs[i] || herzx[i]<sleft-herzs[i] || herzx[i]>sleft+swide-herzs[i]) {
    herz[i].style.visibility="hidden";
    herzy[i]=false;
  }
  else if (herzs[i]>minisize+2 && Math.random()<.5/hearts) break_my_heart(i);
  else {
    if (Math.random()<maxisize/herzy[i] && herzs[i]<maxisize) herz[i].style.fontSize=(++herzs[i])+"px";
    herz[i].style.top=herzy[i]+"px";
    herz[i].style.left=herzx[i]+"px";
  }
}

function break_my_heart(i) {
  var t;
  herz[i].firstChild.nodeValue=String.fromCharCode(9676);
  herz[i].style.fontWeight='bold';
  herzy[i]=false;
  for (t=herzs[i]; t<=maxisize; t++) setTimeout('herz['+i+'].style.fontSize="'+t+'px"', 60*(t-herzs[i]));
  setTimeout('herz['+i+'].style.visibility="hidden";', 60*(t-herzs[i]));
}

document.onmousemove=mouse;
function mouse(e) {
  if (e) {
    y=e.pageY;
    x=e.pageX;
  }
  else {
    set_scroll();
    y=event.y+sdown;
    x=event.x+sleft;
  }
}

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)=='number' && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}

window.onscroll=set_scroll;
function set_scroll() {
  if (typeof(self.pageYOffset)=='number') {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}

function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height;
  div.style.width=width;
  div.style.overflow="hidden";
  div.style.backgroundColor="transparent";
  return (div);
}
// ]]>
</script>

 

 

소스는 위와 같습니다.  제가 본문에 첨부한 소스파일 다운받으셔서 카피하시는것도 편하실거예요.

참고로 소스 속 초반에

/*****************************
*JavaScript Love Heart Cursor*
*  (c)2013+ mf2fm web-design *
*   http://www.mf2fm.com/rv  *
*  DON'T EDIT BELOW THIS BOX *
*****************************/

라고 보이는데요 이 부분의 메세지는

삭제하지 않으시는것이 매너!, 아시지요?! 😀

 

 

 

티스토리 블로그에 입력하기 전에 미리 연습하고싶으신 분들은

http://www.tagkorea.pe.kr/tag.html 태그 연습장에서 연습해보세요.

<정말 이 사이트는 제가 중학교때부터 사용한 사이트인데 아직도 있어서 너무 기뻐요>

태그연습장

 

 

태그 소스에 약한 초보자분들께 추천드리는것은 하트의 크기, 그리고 하트의 수, 그리고 그 하트들의 컬러를 설정하는것. 이렇게 3가지를 추천드립니다. 수정해야하는 소스는 가장 상단부분에 바로 보이니 찾아 수정하시기 쉬우실거예요. 

 

 

 

STEP.1 >하트의 6가지 컬러코드 결정하기/입력

앞서 언급한 색상 컬러코드 6가지를 입력합니다, 기존의 소스에는 '' 안에 #f00 (컬러코드 앞 3자리) 가 들어있는데요

기본적인 컬러코드 6자리를 모두 입력해도 되니, '#f00699' 이렇게 모두 입력하셔도 되요.

 

 

STEP.2 >하트의 사이즈 설정

바로 아래의 소스에 minisize 수의 설정과 maxisize 수를 입력하게되는데요, 이것은 본인이 모니터로 보고있을때 대비해 

어떤 사이즈가 좋을지 본래 적혀있는 16과 28사이즈를 기준으로 더 크게, 혹은 더 작게 입력하셔서 확인해가시면서

원하시는 사이즈를 찾아가시면 좋을 것 같아요 :0

 

 

STEP.3 >화면에 보일 하트의 최대 갯수 설정

하트의 사이즈 설정 소스 바로 아래 "화면에 보일 최대의 하트 수"의 값을 설정할 수 있는데요. 저는 본래 기재되어있는 "66"의 값은 딱 적당하다고 생각되요. 너무 많으면 블로그 페이지의 이미지및 글의 가독성에 은근 방해가 될 수 있기때문에 블로그에 방문해주신 분들의 시야에 너무 거슬리지 않을 값으로 60~70대 선의 설정이 가장 알맞다고 생각해요. 그래서 제작자분도 딱 좋은 값을 최초에 기재해두신게 아닌가 싶네요 

 

 

 

 

 

재생버튼을 누르시면 저의 블로그에 적용된 마우스를 따라다니는 하트 움직임을 확인하실 수 있습니다.

👇🏻

 

y_mix.txt

0.01MB

 

앞서 언급했던 옐로우 믹스 버젼(개인 컬러수정) 소스입니다.

다운로드 하셔서 html수정의 <head> 와 </head>태그 사이에 붙여넣으세요 :)

 

 

그럼 오늘도 예쁜 스킨 꾸미시는 티스토리 블로거분들을 위해 화이팅!을 외쳐봅니다.