[JavaScript] 다크모드 / Tilt / Cursor

[다크모드]

• 이번에는 버튼을 통해 라이트/다크 모드를 제어하도록 해봅시다.
• 사용한 라이브러리는 테일윈드와 jQuery이며, 폰트도 적용하여 디자인을 해보도록 합시다.

See the Pen 다크모드 by psm817 (@psm817) on CodePen.

• CSS를 살펴보면 모든 폰트를 Pretendard-Regular를 적용했다.
• 테마가 라이트 모드일 때는 :root를 통해 기본 색상을 --background-color: white, --text-color: #222, --primary-color-1: #4120b0으로 설정하였고 이 속성들은 하나의 변수라고 생각하면 좋다.
• 테마가 다크 모드일 때는 :root.dark를 통해 기본 색상을 --background-color: #121212, --text-color: #f7f7f7, --primary-color-1: #4120b0으로 설정하였다.
• 위와 같이 변수로 색상을 지정했다면 실제로 기본 :root에 색상과 모드 전환할 때 속도를 transition으로 지정하였다.
• 다크 모드로 전환했을 때 색상 텍스트를 라이트 모드보다 150% 더 밝게 하기 위해 filter: brightness(150%)을 지정하였다.
• 마지막으로 JS를 통해 버튼 태그의 클래스인 .btn_toggle_theme를 클릭하면 :root의 클래스를 dark로 변환하도록 한다.

 

[Tilt]

• 이번에는 tilt 라이브러리를 통해 이미지에 기울기를 적용하여 마우스의 위치에 따라 기울기가 다르게 적용해봅시다.
•  Tilt의 홈페이지를 이용해서 여러가지 종류의 기울기 효과를 볼 수 있고 해당 코드를 가져와서 사용할 수 있고 커스텀도 가능하다.
• 홈페이지 URL : https://gijsroge.github.io/tilt.js/
• 여러가지 종류 중 하나를 선택하여 아래와 같이 적용해봅시다.

See the Pen 240705(tilt) by psm817 (@psm817) on CodePen.

• Tilt를 사용하기 위해서는 HTML에서 반드시 TiltJs와 jQuery를 script 태그를 통해 불러와야한다.
• JS에서 기울기를 조절할 수 있는데 maxTilt와 perspective의 속성값을 수정하여 조절할 수 있다.

 

[Cursor]

• 이번에는 지정된 화면 내에서 기본 마우스 커서가 아닌 커스텀을 해보도록 합시다.
• 사용되는 라이브러리는 jQuery만 사용하여 커스텀을 진행하였습니다.

See the Pen Cursor by psm817 (@psm817) on CodePen.

• HTML을 보면 커스텀할 커서 역할을 하는 부분이 cursor 클래스라고 되어있는 div 태그라고 생각하면 좋다.
• 버튼 태그에는 cursor-big이라는 클래스를 지정하고 onclick를 통해 버튼을 클릭했을 때 alert 알림이 발생하도록 하였다.
• CSS를 보면 화면에 기본 커서가 보이지 않도록 * 선택자로 cursor: none을 지정하였다.
• cursor에는 position: fixed를 지정하고, 크기와 색상을 지정하고 동그란 모양의 커서일 때 실제 커서는 상단 왼쪽에 위치하기 때문에 커서를 가운데로 옮기기 위해 transform을 통해 가운데로 옮겨준다.
• mix-blend-mode: difference를 함께 지정함으로써 주변의 텍스트가 가려지지않고 투명도를 적용하여 보이도록 하였다.
• 마지막으로 HTML에서 지정한 cursor-big 클래스를 가진 텍스트에 커서를 가져다 놓으면 커서가 커지도록 지정하였다.
• JS에서는 $cursor 변수를 하나 지정하여 mousemove를 실행시켜 실제로 커스텀된 커서가 움직이도록 지정하였다.
• e.clientY와 e.ClientX는 실제로 console창을 통해 찍혀있는 숫자를 보면 화면의 좌표값을 보여준다.
• 마지막으로 .cursor-big에 마우스를 가져다놓는 mouseenter를 통해 need_to_cursor_big이라는 클래스를 추가 또는 삭제하도록 하였다.