티스토리의 여러 블로그를 돌아다니다 보면 멋지게 꾸미거나 재밌는 효과들을 블로그에 적용시킨 것을 심심찮게 볼 수 있습니다. 보통 자바스크립트를 활용하여 블로그를 좀 더 생동감 있게 꾸며주는 것인데요!
지금 이 글을 읽으시면서 마우스를 빈 공간에 클릭해보세요. 어떤가요? 둥그런 원이 점점 커지는 것을 확인하셨나요? 이번 포스팅에서는 티스토리 블로그에서 마우스 클릭시 원형 파동이 만들어지는 효과를 알아보려고 합니다. 역시 자바스크립트 소스가 다 완성돼있기 때문에 우리가 할 일은 적당한 곳에 붙여넣기만 하면 됩니다.
참고로 저는 이 효과를 제 블로그에는 적용하지 않았습니다. 그 이유는 글을 읽을 때 마우스를 클릭하면서 읽으시는 분들이 많은데, 계속 원형 파동이 생기면 글을 읽는데 방해가 될 수도 있겠다 싶어서입니다. 그리고 제 블로그는 마우스 드래그를 허용해놓았고, 드래그할 때 색상까지 넣었기 때문에 동그라미까지 반복적으로 점점 커지면 다소 정신없을 수도 있기 때문입니다.
다만 이 게시글에는 효과가 나타나도록 이 게시글 자체에만 코드를 넣어주었습니다. 이 게시글에만 효과가 나타나도록 하는 방법은 이 글의 하단 부분에 적어두었습니다.
그럼 본격적으로 이 효과를 낼 수 있는 소스를 말씀드리겠습니다.
티스토리 블로그에서 마우스 클릭시 동그라미가 점점 커지게 만드는 효과를 내는 방법은 다음과 같습니다.
1. 티스토리 스킨편집의 HTML편집 화면에서 <head>와 </head>사이에 아래의 소스를 넣습니다. 저는 편의상 </head> 바로 위쪽에 아래 소스를 붙여넣었습니다.
<!--마우스 클릭 효과-->
<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>
2. CSS편집 화면에서 아래의 소스를 적당한 곳에 넣습니다. 저는 편의상 CSS의 가장 하단 부분에 붙여넣었습니ㅏㄷ.
/*마우스 클릭 효과*/
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;
}
}
만약 저처럼 특정 글에만 이 효과를 넣고 싶다면 일단 글쓰기 화면에서 글쓰기 모드를 '기본모드'에서 아래와 같이 'HTML'모드로 바꿉니다. 그리고 직접 <head></head> 태그를 입력 후 그 사이에 위의 첫번째 자바스크립트 코드를 넣고, <body></body>태그를 입력하고 그 사이에 <style></style>태그를 입력한 후 다시 그 사이에 위의 두번 째 자바스크립트 코드를 넣어주면 됩니다.
어떤가요, 적용 후 성공적으로 효과가 나타나나요? 간단하지만 블로그를 한층 더 동적으로 만들어주는 자바스크립트 코드를 알아보았습니다.
'Etc2' 카테고리의 다른 글
| 오늘 극복해야 할 대상은 어제의 나 (0) | 2021.12.21 |
|---|---|
| 좋아하는 일을 하면서 살기 위해 바닥을 다지는 시간 (0) | 2021.12.21 |
| 블로그를 시작하면 좋은 이유 (6) | 2021.05.16 |
| 언젠가 기록해둔 좋은 생각, 좋은 습관 세 가지 (0) | 2021.05.12 |
| 현재까지의 급여외 수익 정리. 파이프라인을 확장하고 키우자! (4) | 2021.05.07 |
| 티스토리 맨 윗부분으로 올라가는 화살표 스크롤버튼 넣는 방법 (0) | 2021.05.06 |
| 티스토리 본문글 밑줄에 두꺼운 형광펜 효과 주기 (8) | 2021.05.05 |
| 티스토리 상단 스크롤바(진행바, 프로그레스바) 넣는 방법 (0) | 2021.05.05 |