시안을 변경하여 저만의 가상 인테리어 디자인 회사 사이트를 구현해봤습니다.

scss, javascript, jquery, gsap, split.js 등 다양한 기법을 사용해 봤습니다.

Main Point

• mousemove
• gsap
• split

1. Mousemove

마우스 커서를 따라서 이미지와 텍스트가 따라다니는 요소를 포함시켜봤다.

좌표(위치)를 나타내는 값을 표현하는데 몇가지 방법이 있다.

그 중에서 clientX, clientY 값을 사용하여 좌표값을 구해봤다.

// 화면의 중앙의 값을 구하기 위한 방법
e.clientX - $(window).innerWidth()/2
e.clientY - $(window).innerHeight()/2

위와 같은 방법을 활용해 원하는 만큼의 값을 기재해 따라다니는 속도를 구할 수 있었다.

2. Split.js

split.js을 활용해 문자열을 구분자로 분할을 시켜주었다.

splitText = new SplitType('.bg-title',{types: 'words, chars', absolute: false,});

해당 사이트를 개발자 모드로 찍어보면

이렇게 단어는 ‘word’로 글자는 ‘char’으로 묶이게 된다