본문 바로가기
  1. 1. 마우스 커서 아이콘 설정
  2. 2. 마우스 커서 효과 적용
  3. 3. 마우스 클릭 효과 (물방울 파문)
블로그 운영

티스토리 블로그 마우스 커서 효과 및 아이콘 설정

From I to T 2022. 8. 12. 11:09
728x90
반응형

 

이 블로그에는 마우스 커서 효과와 아이콘 설정을 적용하진 않을 것이다. (커서 아이콘과 물방울 효과는 적용했다. 22.08.12) 순정이 최고의 디자인인 법이니까. 이 블로그 스킨 이름은 포스터인데 옆에 카테고리가 표시되지 않고 본문만 보여서 이 스킨을 골랐다. 깔끔하고 집중하기 좋은 디자인이라고 생각한다. 그런데 누구나 가끔은 자신만의 개성을 드러내고 싶어질 때가 있다. 오늘이 바로 그때인 듯 싶다.

 

Index

1. 마우스 커서 아이콘 설정

1) 홈페이지 접속

https://www.cursors-4u.com/ 에 들어가 원하는 커서 아이콘을 찾는다. 

2) CSS 코드 확인

원하는 아이콘을 클릭해 하단부를 살펴보면 Option이 있는데 Option #2의 내용을 복사한다.

3) 블로그 CSS 편집

/* Start https://www.cursors-4u.com */ 
* {cursor: url(https://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), auto !important;} 
/* End https://www.cursors-4u.com */

복사한 위의 코드를 붙여넣었다. 아래의 커서 아이콘으로 변경되었다.

 

2. 마우스 커서 효과 적용

1) 홈페이지 접속

위의 과정과 마찬가지로, 해당 기능을 제공하는 http://www.mf2fm.com/rv/ 라는 홈페이지에 접속한다.

2)  HTML 코드 확인

필자는 Underwater로 정했다. Step 1의 HTML 코드를 복사해두자.

3) HTML 편집

<script type="text/javascript">
// <![CDATA[
var colours=new Array("#a6f", "#60f", "#60f", "#a6f", "#ccc"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=66; // maximum number of bubbles on screen
var over_or_under="over"; // set to "over" for bubbles to always be on top, or "under" to allow them to float behind other objects

/****************************
* JavaScript Bubble Cursor  *
*(c)2010-13 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 bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
var sploosh=false;

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

addLoadEvent(buble);

function buble() { if (document.getElementById) {
  var i, rats, div;
  for (i=0; i<bubbles; i++) {
    rats=createDiv("3px", "3px");
    rats.style.visibility="hidden";
	rats.style.zIndex=(over_or_under=="over")?"1001":"0";

    div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.top="1px";
    div.left="0px";
    div.bottom="1px";
    div.right="0px";
    div.borderLeft="1px solid "+colours[3];
    div.borderRight="1px solid "+colours[1];

    div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.top="0px";
    div.left="1px";
    div.right="1px";
    div.bottom="0px"
    div.borderTop="1px solid "+colours[0];
    div.borderBottom="1px solid "+colours[2];

    div=createDiv("auto", "auto");
    rats.appendChild(div);
    div=div.style;
    div.left="1px";
    div.right="1px";
    div.bottom="1px";
    div.top="1px";
    div.backgroundColor=colours[4];
    if (navigator.appName=="Microsoft Internet Explorer") div.filter="alpha(opacity=50)";
    else div.opacity=0.5;
    document.body.appendChild(rats);
    bubb[i]=rats.style;
  }
  set_scroll();
  set_width();
  bubble();
}}

function bubble() {
  var c;
  if (Math.abs(x-ox)>1 || Math.abs(y-oy)>1) {
    ox=x;
    oy=y;
    for (c=0; c<bubbles; c++) if (!bubby[c]) {
      bubb[c].left=(bubbx[c]=x)+"px";
      bubb[c].top=(bubby[c]=y-3)+"px";
      bubb[c].width="3px";
      bubb[c].height="3px"
      bubb[c].visibility="visible";
      bubbs[c]=3;
      break;
    }
  }
  for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
  setTimeout("bubble()", 40);
}

document.onmousedown=splash;
document.onmouseup=function(){clearTimeout(sploosh);};

function splash() {
  ox=-1;
  oy=-1;
  sploosh=setTimeout('splash()', 100);
}

function update_bubb(i) {
  if (bubby[i]) {
    bubby[i]-=bubbs[i]/2+i%2;
    bubbx[i]+=(i%5-2)/5;
    if (bubby[i]>sdown && bubbx[i]>sleft && bubbx[i]<sleft+swide+bubbs[i]) {
	  if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
		bubb[i].width=bubbs[i]+"px";
		bubb[i].height=bubbs[i]+"px";
	  }
      bubb[i].top=bubby[i]+"px";
      bubb[i].left=bubbx[i]+"px";
    }
    else {
      bubb[i].visibility="hidden";
      bubby[i]=0;
      return;
    }
  }
}

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>

  상기 코드를 [HTML편집]에서 </head> 위쪽에 넣는다. 

3. 마우스 클릭 효과 (물방울 파문)

1) 홈페이지 접속

https://fdossena.com/?p=html5cool/clickfx/i.frag 해당 사이트를 참조했다. 이번에는 HTML과 CSS를 모두 건드려야 한다.

2) 코드 확인

 클릭 시 물방울 효과가 나오게끔 하는 코드를 확인하고 복사한다. 첫번째 코드는 CSS, 두번째 코드는 HTML 편집에 넣어야 한다.

3) HTML과 CSS 편집

/* water effect */
div.clickEffect{
	position:fixed;
	box-sizing:border-box;
	border-style:solid;
	border-color:#828282;
	border-radius:50%;
	animation:clickEffect 0.8s ease-out;
	z-index:5;
}
@keyframes clickEffect{
	0%{
		opacity:1;
		width:0.5em; height:0.5em;
		margin:-0.25em;
		border-width:0.3rem;
	}
	100%{
		opacity:0.1;
		width:15em; height:15em;
		margin:-7.5em;
		border-width:0.01rem;
	}
}

[CSS 편집]창에 위의 코드를 넣는다.

 

<script>
function clickEffect(e){
  var d=document.createElement("div");
  d.className="clickEffect";
  d.style.top=e.clientY+"px";d.style.left=e.clientX+"px";
  document.body.appendChild(d);
  d.addEventListener('animationend',function(){d.parentElement.removeChild(d);}.bind(this));
}
document.addEventListener('click',clickEffect);
</script>

[HTML 편집]의 <head> 파트에 위의 코드를 붙여넣는다.

  지금까지의 방법으로 마우스 커서, 마우스 이동 효과, 마우스 클릭 효과가 적용되었다. 본인만의 스타일로 블로그를 꾸미는 맛이 쏠쏠하니 망설이는 분들은 얼른 해보시길!

728x90
반응형
저작자표시 비영리 변경금지

'블로그 운영' 카테고리의 다른 글

[네이버 블로그] 홈페이지형 블로그 만드는 법  (0) 2024.04.11
티스토리 블로그 우클릭, 드래그 방지 및 부분 허용  (0) 2022.08.07
티스토리 블로그 목차 만들기 (부드러운 스크롤, 목차 따라오기, Tocbot)  (0) 2022.08.04

'블로그 운영' Related Articles

티스토리툴바