KBO 리그 10개 구단의 중독성 있는 응원가🎵들을 한 곳에서 만날 수 있는
국내 최초 응원가🎶 아카이빙 웹, 그랜드슬램⚾입니다:)
🎶 야구에 처음 입문하고 야구장에 갔을 때, 사람들이 따라 부르는 응원가🎵가 궁금하지 않으셨나요?
💁🏻 내가 좋아하는 선수를 응원할 때, 어떻게 응원해야하는지 궁금하셨다구요?
❓ 이 때마다, 유튜브에 하나씩 야구 응원가를 검색하자니 어떤 응원가가 있는지, 어느 팀 응원가인지 알기가 어려우셨죠?
저희 그랜드슬램은 각 팀의 응원가를 한 공간에서 들을 수 있는 장을 마련하고자 했습니다.
- 초기화면👩🏻💻
- 스크롤 반응형 페이지로 스크롤 다운/업 이벤트를 감지하여 영상을 흑백 ↔ 컬러로 전환.
- 뿐만 아니라, 반응형 이벤트에 글자의 컬러와 버튼의 유무 구현에 리액트 Hook을 활용.
- 직접 촬영한 여러 날짜의 다양한 야구 영상을 활용하여 초기화면을 보다 풍성하게 구성.
- 구단별 페이지👩🏻💻
- 역동적인 야구 스포츠의 특성을 살려 페이지 전체에 그랜드슬램만의 흘러가는 독창적인 텍스트를 구현.
- 긴 스크롤 하나로 10개의 구단을 모두 표현하기 위해 구단별 대표색을 그라데이션 처리하여 배경을 구분.
- 응원가 아카이빙 웹사이트인만큼, 실제 LP판으로 음악을 듣는듯한 아날로그 느낌을 추구.
- LP판이 플레이되는 모습을 생생하게 구현하고, 음악의 가사에 따라 싱크가 맞춰지도록 구성.
- LP판 위에 커서가 다가가면 LP판이 Flip이 되면서 앞면엔 구단 로고, 뒷면엔 GrandSlam 로고가 나타나도록 구현.
- 항상 하단에 구단 버튼이 위치해 있으면서 버튼을 누르면 해당 구단으로 이동.
김수민 : 초기화면 스크롤 다운/업 이벤트 처리, 영상 편집, 메인페이지 버튼 스크롤스파이, 로고 등장 애니메이션
배지윤 : 그랜드슬램만의 독창적인 텍스트 구현, 구단별 대표색 그라데이션 배경 처리
양은수 : LP판의 플레이 모습/뒤집히는 트리거 구현, 음악 가사 싱크 구현
초기화면
구단별 페이지
