junhyungjang/madcamp_week4

DisWiki

디즈니를 사랑하는 3인방이 모여 디즈니 위키를 제작했다! 디즈니의 영화, 캐릭터, 노래들이 궁금하다면 이곳으로!

개요

React를 사용하여 interactive한 UI 제작을 목표로 진행했다. 크게 작품과 음악 두가지 탭이 있다.

설명

1. 메인

메인페이지에서는 Interactive한 UI를 기반으로 한 디즈니 영상이 나온다. 더하여 스크롤을 내리다보면 다양한 크기의 디즈니 사진들을 볼 수 있다. 스크롤을 내리면서 페이지를 내려가면, 정적인 사진이 아닌 다방면에서 튀어나오는 사진들을 확인할 수 있다.

2. 작품

디즈니영화 작품을 소개하는 공간이다. 작품을 클릭하면 그림이 빙글빙글 돌아가면서 해당 작품의 설명에 관한 창으로 이동하게 구현하였다.

3. 음악

감성적 디자인을 위해 LP판의 움직임을 차용하였다.

music 아이콘을 클릭하면 디즈니 영화들의 sound track 앨범들이 나열되어 있다.
마우스를 갖다대면 앨범에서 lp판이 삐죽 튀어나오도록 애니메이션을 추가하였다.
마우스로 꾹 누르고 있으면 앨범이 빙글빙글 회전하며 마우스를 떼면 레코드 플레이어로 이동한다.

레코드 플레이어에서는 톤암을 클릭하면 톤암이 lp판으로 이동하고 마지막으로 재생하던 음악, 없으면 첫 음악이 재생된다.
음악은 배경음악처럼 재생되어 diswiki의 다른 페이지로 이동해도 계속 재생되며, 곡이 끝나면 다음 곡이 재생된다.
또한 floating minplayer가 존재해 자유롭게 재생, 정지, 다음곡 재생, 이전곡 재생, 볼륨조절 등이 가능하다.

팀원

장준형 - https://github.com/JunHyungJang
이지원 - https://github.com/Rudolf0328
조원경 - https://github.com/wkcho99