📄 Martin Briceno

제작기간	22.06.19 ~ 22.06.21 (3일 소요)
사용 언어	html, scss, jquery
사용 플러그인	gsap
분류	pc, mobile, 클론코딩

✔ 마우스를 따라다니는 요소

📌 mouse 좌표 값 구하기

$(document).mousemove(function(e){
	mouseX = (e.clientX * 100)/innerWidth + "vw";
	mouseY = (e.clientY * 100)/innerHeight + "vh";
})

💬 마우스 커서를 따라다니려면 커서 위치를 알아야하므로 커서위치를 clientX, clientY를 이용하여 X좌표와 Y좌표를 구했습니다.


💡 마우스 좌표를 알아낼 수 있는 여러가지 방법!

• screenX, screenY
  - 사용자 모니터 화면을 기준으로 한 좌표를 표시합니다.
  
  
• pageX, pageY
  - 전체 문서를 기준으로 한 좌표를 표시합니다.
  
  
• clientX, clientY
  - 브라우저에서 사용자에게 웹페이지가 보여지는 영역을 기준으로   좌표를 표시합니다. (스크롤바가 움직이더라도 동일한 값을 가짐)
  
  
• offsetX, offsetY
  - 좌표를 출력하도록 하는 이벤트가 걸려있는 요소 기준으로 좌표를   표시합니다.

📌 gsap set을 이용하여 고정

<div class="cursor"></div>

.cursor {
  position: fixed;
  top: -6px; left: -15px; 
  width: 13px; height: 13px;
  border: 1px #1d1d1d;
  border-radius: 100%;
  background-color: hsla(0,0%,100%,.01);
  backdrop-filter: invert(100%);
  transform: none;
  transition: width .3s, height .3s;
  pointer-events: none;
  z-index: 100;
}

$(document).mousemove(function(e){
  mouseX = (e.clientX * 100)/innerWidth + "vw";
  mouseY = (e.clientY * 100)/innerHeight + "vh";
  gsap.set('.cursor', {
    x: mouseX,
    y: mouseY
  })
})

💬 해당 요소를 html, css 세팅 하고 cursor 클래스를 넣어 준 후, gsap.set을 이용해서 x: mouseX, y: mouseY로 완성하였습니다.

🖊 특정 요소에 커서를 두면 원 변경

💬 work-area 요소에 가면 원이 위 사진과 같이 변경됩니다.

  <div class="cursor">
        <div class="cursor-transform see-case hide">SEE CASE</div>
  </div>

💬 cursor안에 see-case div태그를 생성하여 원 안에 'SEE CASE' 글자를 평소에는 안보이게 hide 클래스를 주어 숨겨주고 work-area 요소에 들어갈 때 hide를 제거하여 보이도록 설계를 했습니다.

if(e.target.closest('.work-area') != null) {
	$('.cursor').addClass('cursor-work').children('.see-case').removeClass('hide')
}

💬 자신부터 부모 요소까지 지정한 선택자에 만족할 때까지 탐색하는 closest 메서드를 이용하여 e.target이 work-area 조건을 만족하면 cursor에 cursor-work 클래스를 추가하여 원 css를 변경해주고, see-case에 hide를 제거 해주었습니다. 그 후, gsap.to을 이용하여 아까 구해준 mouseX 값과 mouseY값을 설정해주어 transition이 적용되게 하였습니다.

➕ link-talk에서 커서 변경

else if (e.target.closest('.link-talk') != null) {
	$('.cursor').addClass('cursor-talk').children('.email').removeClass('hide')
}

💬 페이지 하단에 link-talk 구간에서도 커서가 변경되는 이벤트가 있기 때문에 마찬가지로 마크업을 해주고 else if를 사용해서 똑같이 구현을 해주었습니다.

➕ a, btn 구간에서 커서 변경

else if(e.target.closest('a, button') != null) {
	gsap.to('.cursor', {
		scale: 3,
	})
} 

💬 a, btn 구간처럼 클릭하는 구간에서도 커서가 커지는 이벤트가 있어서 gsap.to을 이용하여 scale을 조정하였습니다.

else {
	$('.cursor').removeClass('cursor-talk')
	$('.cursor').removeClass('cursor-work')
	$('.cursor span').addClass('hide');
	gsap.to('.cursor', {
		scale: 1,
	})
}

💬 그 외 구간에서는 모든 cursor 요소에 모든 클래스를 제거하고 scale도 원상복귀하여 완성하였습니다!

🔘 최종코드

$(document).mousemove(function(e){
  mouseX = (e.clientX * 100)/innerWidth + "vw";
  mouseY = (e.clientY * 100)/innerHeight + "vh";
	gsap.set('.cursor', {
		x: mouseX,
		y: mouseY
	})
	if(e.target.closest('.work-area') != null) {
		$('.cursor').addClass('cursor-work').children('.see-case').removeClass('hide')
	} else if (e.target.closest('.link-talk') != null) {
		$('.cursor').addClass('cursor-talk').children('.email').removeClass('hide')
	} else if(e.target.closest('a, button') != null) {
		gsap.to('.cursor', {
			scale: 3,
		})
	} else {
		$('.cursor').removeClass('cursor-talk')
		$('.cursor').removeClass('cursor-work')
		$('.cursor span').addClass('hide');
		gsap.to('.cursor', {
			scale: 1,
		})
	}
})

➕ 마우스를 따라다니는 이미지

  $('.playing-item').mousemove(function(e){
  	var ratio = 100 / $(this).width();
  	var imgX = e.offsetX * ratio *.4 - 20;
  	gsap.to($(this).children('img'), {
  		xPercent: imgX,
  		ease: Power1.easeOut,
    })
  })

💬 이 부분도 커서와 비슷하게 좌표값을 이용하여 이미지가 최소 x축으로 -20%, 최대 20%로 비율을 구하여 구현하였습니다.

✔ 가로스크롤 구현

💬 work-area 구간에서는 커서가 변경되는 이벤트 뿐만 아니라 가로스크롤로 전환되는 이벤트도 있습니다. 이는, gsap 플러그인으로 pin을 이용해 x축을 조정하여 구현이 가능했습니다!

📌 gsap pin으로 가로스크롤 구현

  gsap.to('.sc-work .work-area', {
	xPercent: -92 * ($('.work-item').length - 1), 
  	scrollTrigger: {
  		pin: '.sc-work',
  		trigger:'.work-area',
  		start:"top top",
  		end:"+=900%",
  		scrub: .5,
  	},
  })  

💬 work-area 안에 work-item들이 있으므로 work-area가 x축으로 움직이면 가로스크롤을 만들 수 있습니다.

💬 각 work-item들의 넓이가 92%이고 work-item들의 개수에 1을 빼면 마지막 work-item이 보여진 후 다시 세로 스크롤이 가능합니다.

✔ gsap.utils.toArray / toggleActions

  show = gsap.utils.toArray('.show'); 
  show.forEach((show) => {
  	gsap.fromTo(show,{
  		y: 50,
  		opacity: 0
  	},{
  		y: 0,
  		opacity: 1,
  		scrollTrigger: {
  			trigger: show,
  			start: 'top bottom',
  			end: 'bottom-=20% top',
  			toggleActions: 'play reverse play reverse',
  		},
  	})
  })

📌 gsap.utils.toArray

💬 제작을 하면서 때로는 같은 효과를 가진 컨텐츠들이 많아서 이걸 배열로 묶어 작동시키게 하면 효율적이라고 생각했습니다. 그래서 gsap에서 배열로 변환시켜주는 gsap.utils.toArray를 이용하여 제작하였습니다.

💬 특정 요소에 도달했을 때 y값과 opacity 조정을 gsap를 이용해 작성한 코드입니다. 이 효과를 쓸 컨텐츠들이 너무나도 많아서 각각 show 클래스를 추가하고 gsap.utils.toArray를 이용하여 forEach로 반복문을 돌리니 각 요소마다 gsap를 안써도 효율적으로 작성할 수 있었습니다!


📌 toggleActions

💬 스크롤을 움직이면 gsap가 작동을 하지만 다시 되돌아갈 때는 마지막 효과를 기점으로 멈춰있습니다. 다시 되돌아갈 때에도 효과를 실행하기 위해서 ScrollTrigger에 부가옵션인 toggleActions을 이용하여 적용하였습니다.

  toggleActions: 'play none none none'
  //toggleActions: "onEnter, onLeave, onEnterBack, onLeaveBack"

💬 toggleActions를 적용하지 않을 경우 일반적인 세팅입니다.

• toggleActions
  • 첫번째 요소는 onEnter로 scrollTrigger에 start부분에 들어와 end시점 전까지 실행됩니다.
  • 두번째 요소는 onLeave로 end시점을 빠져나갈 때 실행됩니다.
  • 세번째 요소는 onEnterBack으로 이미 onEnter가 실행된 시점에서 다시 onEnter 부분으로 들어올 때 실행됩니다.
  • 마지막 요소는 onLeaveBack으로 다시 그 부분을 벗어나게 되면 실행됩니다.

  toggleActions: 'play reverse play reverse',

  💬 제작하면서 직접 적용한 show 부분에 toggleActions를 보게 되면 요소에 들어올 땐 정상적으로 play가 되고 end시점을 빠져나갈 때 실행됐던 효과가 반대로 돌아가게 만들었습니다. 같은 효과를 onEnterBack과 onLeaveBack에도 적용하여 각 특정 스크롤 액션에 따라 효과액션을 줄 수 있었습니다.

✔ position: sticky

💬 position: sticky는 스크롤 위치가 임계점에 이르면 position: fixed와 같이 고정상태가 됩니다.


💬 pc화면에서 가로스크롤로 움직이던 컨텐츠들을 모바일 화면에서는 work-item 각각 position: sticky 속성을 주어서 변경하였습니다.