오늘도 어김없이 어제 진행하던 조별과제의 연장선
어제 작업물을 남겼듯이 내가 맡은 역할에 대한 기능은 구현을
전부 해놓았다. 그런데 이 메인 홈페이지가 켜질 때 그냥 띡 하고 출력되는 게 허전해 보이기도 하고 또, 영화 사이트 컨셉에 맞게 마우스 포인터 부분에 뭔가 관련된 걸 추가해 주고 싶었다.
그래서 생각해낸 첫 번째는, 마우스 커서 옆에 팝콘을 달아주는 것
기능 구현 과정
바로 이렇게!
사실 작아서 잘 보일진 모르겠지만.. 마우스 옆에 쬐까만 팝콘이
쫄쫄 따라오는 것을 볼 수가 있다.
이 기능은 생각보다 간단했는데, 일단 html 파일 body 부분에
이렇게 div class를 만들어 준 다음에
아래와 같이 style.css 파일에서 코드를 작성해주면 된다.
transform: translate(x, y); 를 사용해 팝콘이 마우스와 어느정도 거리를 유지할지 작성하면 되는데, x=30px, y=0px이
내가 보기엔 가장 마우스와의 거리가 적절했다!
자 그러면 이렇게 css만 작성하면 끝이 나느냐? 그건 아니다. 저렇게만 하면 마우스를 따라 움직이는 팝콘을 구현하는 건
어림도 없다. 모두가 알 듯 하지만 script 부분에 코드를 작성해
주지 않는다면 저 팝콘은 무용지물이 돼버릴 것이다 ㅠㅠ
js 코드는 아래와 같이 작성했다.
(해당 사진에서는 안 보이지만 스크립트 맨~~ 윗 줄에
body 부분을 찝어서 담아놓은 body 상수가 있음)
엄청 간단한 코드이다. 살펴보자면 일단 popcorn이라는 상수에 popcorn이라는 class를 콕 찝어서 담아줬다.
그 다음 위에서 선언한 body 상수에 addEventListner을 사용해 이벤트를 넣어줬다.
마우스를 움직일 때마다 마우스의 수직 움직임, 수평 움직임을 따라오도록 하는 이벤트가 발생한다.
여기까지 간단히 팝콘의 탄생 일지에 대해 알아보았다.
마우스 기능을 만든 후에는 곧바로 메인 페이지 출력 시
애니메이션 효과를 넣어주었다. 이건 첫 프로젝트 때도 그렇고 두 번째 프로젝트 때도 그렇고 단골로 사용했던 기능이라 굉장히 쉽게 쉽게 작성했다.
옆에서 슬라이드식으로 스윽 들어오는 걸 구현하고 싶어서
저번과 똑같이 keyframes를 사용해 transform: translateX()를 사용해 자연스럽게 옆에서 슬라이드 하는 것처럼 위치를 조정한 다음, 들어오는 과정에선 투명 > 슬라이드가 끝난 후엔 불투명
으로 보여주기 위해서 opacity를 사용해줬다.
이렇게 keyframes 코드를 작성해줬다면 이 슬라이드를 사용할 클래스 부분에 가서 animation 코드를 작성해주면 끝
나는 메인 페이지 상단에 위치한 이미지, 영화 리스트들을 옆에서부터 차례대로 상단 > 영화 리스트 순으로 들어오게끔 보여주고 싶어서 그 점을 고려하여 0.4s의 텀을 주었다.
아래가 이 코드의 작동 결과물이다
오늘 하루도 뿌듯하게 마무리~!
