서근 개발노트

티스토리에 팔로잉

FRONT-END/JAVASCRIPT

클릭가능한 요소에 따라 변하는 커서 만드는 방법 (mix-blend-mode)

서근

2022. 3. 21. 18:10

QUOTE THE DAY

이번에는 제 블로그에도 적용되어있는 기능인데, 클릭 가능한 요소에 마우스를 올리면 커서가 작아졌다가 커지면서 대비 효과를 가지는 커서를 적용하는 방법에 대해 알아보려고 합니다.

만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요!

(티스토리) 스킨 편집 기초 상식

안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스

seons-dev.tistory.com

따라 하기 쉬우니 본문을 꼼꼼히 읽어주셔서 진행해주세요.

커서 변경 방법

프리뷰

진행하기 앞서 어떤 식으로 보이는지 미리보기를 통해 확인해보겠습니다.

클릭이 가능하지 않은 요소 에서 가능한 요소로 커서가 움직이면 확대되고, 글자 및 이미지 컬러에 mix-blend-mode 효과를 Difference로 지정해주었습니다. mix-blend-mode 효과가 무엇인지는 아래에서 설명해리도록 하겠습니다.

HTML 코드 추가

커서를 블로그에 적용하려면 몇 가지 사전 작업이 필요합니다. 티스토리 스킨편집의 <body>가 시작되는 부분 바로 아래에 코드를 붙여 넣어줍니다. ( <body>가 검색해도 안 나올 경우에는 <body 만 입력해서 검색해보세요!)

<body>

  이곳에 추가해주세요.

</body>

<!--커스텀 커서 시작-->
<div id="custom_cursor" class="custom-cursor">
  <div class="custom-cursor-icon"></div>
</div>
<!--커스텀 커서 끝-->

자바스크립트 업로드

그리고 아래 JAVASCRIPT 파일을 다운로드 받으신뒤에 파일 업로드에 업로드해줍니다.

custom-cursor.js

0.00MB

업로드를 해주셨다면, HTML로 돌아와 </body> 바로 위에 코드를 추가해줍니다.

<!--커스텀 커서 스크립트 시작-->
<script src="./images/custom-cursor.js"></script>
<!--커스텀 커서 스크립트 끝-->

CSS 스타일 적용

mix-blend-mode

마지막으로 CSS 스타일을 적용시켜주면 되는데, 마우스 커서의 mix-blend-mode를 Difference로 설정해줬다고 했었죠?

잠깐 이 mix-blend-mode 가 무엇인지 알아보겠습니다. 또, 이 효과를 사용자가 직접 정하면 마우스 커서의 효과가 바뀌는 효과를 직접 결정해 줄 수 있습니다.

mix-blend-mode는 요소를 겹치는 효과라고 칭할 수 있습니다. 포토샵에서 사용하는 블렌드 모드와 유사한 기능인데, 이것을 CSS에서도 구현할 수 있습니다.

mix-blend-mode는 서로 다른 레이어를 겹쳐서 색상에 대한 효과를 주고 싶을 때 사용할 수 있습니다.

mix-blend-mode의 종류

/* Keyword values */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
/* Global values */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

그리고 각각의 효과를 대략적으로 보자면 아래와 같습니다.

저는 마우스 커서의 극적인 반전 효과를 위해 Difference로 설정해놨습니다. 마음에 드시는 효과가 있다면 사용자가 직접 이 부분은 선택해주시면 됩니다.

CSS 코드

이제 아래 코드를 CSS 부분 최 하단에 붙여 넣어주시면 됩니다.

/*커스텀 커서 시작==========*/
.custom-cursor {
  width: .7rem;
  height: .7rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%; -50%);
  background-color: #000; /*사용자 수정*/
  backface-visibility: hidden;
  transition: none;
  mix-blend-mode: difference; /*사용자 수정*/
  pointer-events: none;
  border-radius: 50%;
  transform: scale(1)
}

.custom-cursor-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #000; /*사용자 수정*/
  transition: all .2s ease;
  transform-origin: 50% 50%
}

.custom-cursor.custom_cursor_visible {
  opacity: 1
}

.custom-cursor.custom_cursor_hidden {
  opacity: 0
}

@media (pointer:none),
(pointer:coarse) {

  #custom_cursor,
  #custom_cursor .custom-cursor-icon {
    display: none !important;
    visibility: hidden;
    opacity: 0
  }

  * {
    cursor: auto !important
  }
}

@media (max-width:767.98px) {
  .custom-cursor {
    display: none
  }
}

.custom-cursor.custom_cursor_hover .custom-cursor-icon {
  transform: scale(1.6)
}
/*커스텀 커서 끝==========*/

위 코드에서 .custom-cursor의 mix-blend-mode를 사용자가 원하는 코드로 변경해주시면 되겠네요!

그리고 제가 //사용자 수정 이라고 주석 처리한 부분이 있는데, 본인의 블로그가 다크 모드냐, 라이트 모드냐에 따라 달라질 수 있기 때문에 이 부분 또한 직접 수정해주셔야 합니다.

이렇게 오늘은 클릭 가능한 요소에 따라 변하는 커서 만드는 방법과 mix-blend-mode에 대해 알아보았습니다. 만약 설정하시다 막히는 부분이 있으시다면 언제든 댓글 남겨주세요.

스킨 꾸미기에 관심이 많으시다면 아래 카테고리에서 확인해주세요!

'공부/블로그운영팁' 카테고리의 글 목록

IOS Developer. 새내기 개발자 입니다.

seons-dev.tistory.com

읽어주셔서 감사합니다.

저작자표시 비영리 변경금지

'FRONT-END > JAVASCRIPT' 카테고리의 다른 글

(Javascript)개발자 도구 콘솔창 차단 방법 - 사이트 이동 (1)	2022.07.03
(티스토리) 태그 쉼표 제거 하는 방법 - Javascript (1)	2022.07.02
(Javascript) HTML SVG파일에 원하는 색상 적용하는 방법 (0)	2022.06.30
(티스토리) 버튼 클릭 한 번으로 내가 원하는 위치 이동하는 방법 (플로팅버튼) (17)	2022.03.25
타이핑 하고 지우는 Javascript (5)	2022.02.22