profile.dat _□X

HANDLE:

STATUS:

now_playing.wav _□X

C:\018\main.exe — 메인 _□X

> WELCOME TO 018

> _

> 🖱 꾸미기 코드 모음

⌨ 타이틀 타이핑 효과

브라우저 탭에 글자가 한 글자씩 타이핑됩니다.
"welcome to 018" 부분을 원하는 텍스트로 바꾸세요.
150 숫자를 줄이면 빠르게, 늘리면 느리게.
<head> 안에 붙여넣으세요.

<script>
(function() {
  var text = "welcome to 018";  // ← 여기를 바꾸세요
  var i = 0;
  var typing = setInterval(function() {
    document.title = text.slice(0, i + 1);
    i++;
    if (i >= text.length) {
      clearInterval(typing);
    }
  }, 150);  // ← 타이핑 속도 (ms)
})();
</script>

⚡ 글리치 텍스트 효과

텍스트가 주기적으로 글리치됩니다. HTML + CSS + JS 세 파트 모두 필요합니다.
data-text="018"과 태그 안의 018을 원하는 텍스트로 바꾸세요.

<!-- ① HTML -->
<h1 class="glitch" data-text="018">018</h1>

<!-- ② CSS -->
<style>
h1.glitch {
  font-size: 72px; font-weight: bold;
  color: #6a1010; letter-spacing: 12px;
  position: relative;
  text-shadow: 2px 0 #5a0a0a, -2px 0 #8b1a1a;
}
h1.glitch.glitch-active {
  animation: glitch-skew 0.2s steps(2) both;
}
h1.glitch::before, h1.glitch::after {
  content: attr(data-text);
  position: absolute; top:0; left:0;
  width:100%; height:100%;
}
h1.glitch::before {
  color:#5a0a0a; opacity:0.7;
  clip-path: inset(20% 0 50% 0);
  animation: g1 4s steps(1) infinite;
  transform: translateX(-3px);
}
h1.glitch::after {
  color:#8b1a1a; opacity:0.7;
  clip-path: inset(50% 0 20% 0);
  animation: g2 4s steps(1) infinite;
  transform: translateX(3px);
}
@keyframes glitch-skew {
  0%{transform:skewX(0)} 50%{transform:skewX(3deg)}
  100%{transform:skewX(0)}
}
@keyframes g1 {
  0%{clip-path:inset(20% 0 60% 0)}
  50%{clip-path:inset(60% 0 20% 0)}
  100%{clip-path:inset(20% 0 60% 0)}
}
@keyframes g2 {
  0%{clip-path:inset(60% 0 10% 0)}
  50%{clip-path:inset(10% 0 60% 0)}
  100%{clip-path:inset(60% 0 10% 0)}
}
</style>

<!-- ③ JS: 5초마다 자동 글리치 -->
<script>
setInterval(function() {
  var el = document.querySelector('.glitch');
  if (el) {
    el.classList.add('glitch-active');
    setTimeout(function() {
      el.classList.remove('glitch-active');
    }, 200);
  }
}, 5000); // ← 간격 (ms)
</script>

🫧 마우스 버블 커서 이펙트

마우스를 움직이면 거품이 올라옵니다.
colours 배열로 색상, bubbles 숫자로 개수 조절.
</body> 바로 위에 붙여넣으세요.

<script>
(function() {
  var colours=["#a6f","#60f","#60f","#a6f","#ccc"]; // ← 색상
  var bubbles=66; // ← 최대 개수
  var x=400,ox=400,y=300,oy=300;
  var swide=800,shigh=600,sleft=0,sdown=0;
  var bubb=[],bubbx=[],bubby=[],bubbs=[];

  function init(){
    for(var i=0;i<bubbles;i++){
      var r=cd("3px","3px");
      r.style.visibility="hidden";r.style.zIndex="1001";
      var d=cd("auto","auto");r.appendChild(d);
      d.style.top="1px";d.style.left="0";
      d.style.bottom="1px";d.style.right="0";
      d.style.borderLeft="1px solid "+colours[3];
      d.style.borderRight="1px solid "+colours[1];
      d=cd("auto","auto");r.appendChild(d);
      d.style.top="0";d.style.left="1px";
      d.style.right="1px";d.style.bottom="0";
      d.style.borderTop="1px solid "+colours[0];
      d.style.borderBottom="1px solid "+colours[2];
      d=cd("auto","auto");r.appendChild(d);
      d.style.left="1px";d.style.right="1px";
      d.style.bottom="1px";d.style.top="1px";
      d.style.backgroundColor=colours[4];
      d.style.opacity=0.5;
      document.body.appendChild(r);
      bubb[i]=r.style;
    }
    go();
  }
  function go(){
    if(Math.abs(x-ox)>1||Math.abs(y-oy)>1){
      ox=x;oy=y;
      for(var 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(var c=0;c<bubbles;c++)if(bubby[c]){
      bubby[c]-=bubbs[c]/2+c%2;
      bubbx[c]+=(c%5-2)/5;
      if(bubby[c]>sdown&&bubbx[c]>sleft
        &&bubbx[c]<sleft+swide+bubbs[c]){
        if(Math.random()<bubbs[c]/shigh*2
          &&bubbs[c]++<8){
          bubb[c].width=bubbs[c]+"px";
          bubb[c].height=bubbs[c]+"px";
        }
        bubb[c].top=bubby[c]+"px";
        bubb[c].left=bubbx[c]+"px";
      }else{bubb[c].visibility="hidden";bubby[c]=0;}
    }
    setTimeout(go,40);
  }
  document.addEventListener("mousemove",function(e){
    y=e.pageY;x=e.pageX;
  });
  window.addEventListener("resize",function(){
    swide=window.innerWidth||800;
    shigh=window.innerHeight||600;
  });
  function cd(h,w){
    var d=document.createElement("div");
    d.style.position="absolute";
    d.style.height=h;d.style.width=w;
    d.style.overflow="hidden";
    d.style.backgroundColor="transparent";
    return d;
  }
  if(document.readyState==="loading")
    document.addEventListener("DOMContentLoaded",init);
  else init();
})();
</script>

> UPDATES.LOG

> REVIEWS

> NO REVIEWS YET
> _

← PREV [ WEBRING NAME ] NEXT →

favorites.url ?

exchange.bmp — 교환 _□X

> BUTTON EXCHANGE

deco.bmp — 꾸미기 _□X

> DECORATION

> 전체 보기 →

> MY BUTTON:

YOUR 88x31