[JS]카드 스와이퍼 만들기

https://sweesweett.github.io/jsprac/card.html

카드스와이퍼 설명1

카드 스와이퍼 설명2

왜 업로드 날짜가가 왜이리 벌어졌지요? 말해보세요!!😂 정말 조지게 힘들었습니다요... 

남이 하는걸 따라하는 건 쉽다. 그냥 코드만 치면되니까! 근데!!!그걸!!내꺼로 흡수하려고하니 너무 힘이 들었다.

아직흡수가됐는지 잘 모르겠어가지구 슬라이더 부분을 손으로 잡아끌어서 움직이게 만들것이다..후후....나에겐 다 계획이있지..했음

하 맛있는코딩쓰엥님.... 쓰앵님을 따라 저는 꼭 멋있는 프론트엔드 개발자가 될랍니다.

이 유튭을 어떻게 알게됐냐면, 가위바위보에서 이기면 폭죽을 터트리는걸 만들기위해  참고한 하트버튼의 쥔장되시는 분의 코드펜을 찾아갔더니 떡하니 유툽링크가 있었다. 약간 이제는 어떤걸 해야할지, 어떻게 배워야할지 고민하던 찰나에 발견하게돼서 따라하게되었다(거기서 당시 가장 최신 업로드인 카드스와이퍼다!)

 

강의를들으니...두가지 맘이양립한다 유명해져라..아니유명해지지마..나만배우고싶어..아니야!!(대충 지킬앤하이드)

한번은 따라쓰고 한번은 기억을 더듬으며..영상을 3번보면서 방법을 익혔다. 

해당코드는 따로 적지 않으려한다. 그것은..그분의것이니까..(끄덕)

---

이번 카드스와이퍼는 pointerEvents가 아주 키포인트라고 생각한다. 

https://ko.javascript.info/pointer-events

Pointer events

마우스 대신 쓸 수 있고, 이벤트들과 유사한 점이 많기때문에 터치 마우스 오버같은걸 한번에 포인터를 사용해 쓸 수 있다.

영상을 볼 때, css부분에 touch-action을 넣어야 작동을 제대로 할수 있다 라고 얘기하는데, 포인터 이벤트에대한 부분을 찾아보니 아래와 같은 내용을 통해 그 이유를  알 수 있었다.

Pointer events allow handling mouse, touch and pen events simultaneously, with a single piece of code.
Pointer events extend mouse events. We can replace mouse with pointer in event names and expect our code to continue working for mouse, with better support for other device types.
For drag’n’drops and complex touch interactions that the browser may decide to hijack and handle on its own – remember to cancel the default action on events and set touch-events: none in CSS for elements that we engage.
Additional abilities of pointer events are:
Multi-touch support using pointerId and isPrimary.Device-specific properties, such as pressure, width/height, and others.Pointer capturing: we can retarget all pointer events to a specific element until pointerup/pointercancel.
As of now, pointer events are supported in all major browsers, so we can safely switch to them, especially if IE10- and Safari 12- are not needed. And even with those browsers, there are polyfills that enable the support of pointer events.
출처:https://ko.javascript.info/pointer-events

영상과 조금은 다른점을 두고싶어서(딱히 달라지진못했다) 다만... transition을 이용해 전환효과를 사용했다. 그리고 휴대폰에서 화면을 넘길 때, 넘기는 방향이 약간 어둡게 되는 것을 차용해 왼쪽이냐 오른쪽이냐에 따라 왼쪽 배경 오른쪽 배경을 어둡게 만들기 위해서 따로 div.bg요소를 만들었다. <= js에서 새로만드려고도 했는데 조금은..비효율적일수있을것같았다.ㅎㅎ..

 

맛있는 코딩님 채널!

https://www.youtube.com/channel/UCyIn03aZJHoBIddySz9NKOA

맛있는 코딩 yummy coding

덕분에 잘 배웠습니다 감사합니다