Skip to content

Latest commit

 

History

History
96 lines (61 loc) · 4.08 KB

README.md

File metadata and controls

96 lines (61 loc) · 4.08 KB

⚾ 🎧 GrandSlam 🎶 ⚾

안녕하세요, 그랜드슬램입니다!

🔍 서비스 소개

KBO 리그 10개 구단의 중독성 있는 응원가🎵들을 한 곳에서 만날 수 있는

국내 최초 응원가🎶 아카이빙 웹, 그랜드슬램⚾입니다:)


🗣 기획 의도

🎶 야구에 처음 입문하고 야구장에 갔을 때, 사람들이 따라 부르는 응원가🎵가 궁금하지 않으셨나요?
💁🏻 내가 좋아하는 선수를 응원할 때, 어떻게 응원해야하는지 궁금하셨다구요?

🎀 아이디어를 얻은 사이트

KBO리그40 : 네이버 스포츠

❓ 이 때마다, 유튜브에 하나씩 야구 응원가를 검색하자니 어떤 응원가가 있는지, 어느 팀 응원가인지 알기가 어려우셨죠?

저희 그랜드슬램은 각 팀의 응원가를 한 공간에서 들을 수 있는 장을 마련하고자 했습니다.


💬 주요 구현 기능

  • 초기화면👩🏻‍💻
    • 스크롤 반응형 페이지로 스크롤 다운/업 이벤트를 감지하여 영상을 흑백 ↔ 컬러로 전환.
    • 뿐만 아니라, 반응형 이벤트에 글자의 컬러와 버튼의 유무 구현에 리액트 Hook을 활용.
    • 직접 촬영한 여러 날짜의 다양한 야구 영상을 활용하여 초기화면을 보다 풍성하게 구성.
  • 구단별 페이지👩🏻‍💻
    • 역동적인 야구 스포츠의 특성을 살려 페이지 전체에 그랜드슬램만의 흘러가는 독창적인 텍스트를 구현.
    • 긴 스크롤 하나로 10개의 구단을 모두 표현하기 위해 구단별 대표색을 그라데이션 처리하여 배경을 구분.
    • 응원가 아카이빙 웹사이트인만큼, 실제 LP판으로 음악을 듣는듯한 아날로그 느낌을 추구.
    • LP판이 플레이되는 모습을 생생하게 구현하고, 음악의 가사에 따라 싱크가 맞춰지도록 구성.
    • LP판 위에 커서가 다가가면 LP판이 Flip이 되면서 앞면엔 구단 로고, 뒷면엔 GrandSlam 로고가 나타나도록 구현.
    • 항상 하단에 구단 버튼이 위치해 있으면서 버튼을 누르면 해당 구단으로 이동.

💁🏻‍♀️ 역할 분담

김수민 : 초기화면 스크롤 다운/업 이벤트 처리, 영상 편집, 메인페이지 버튼 스크롤스파이, 로고 등장 애니메이션
배지윤 : 그랜드슬램만의 독창적인 텍스트 구현, 구단별 대표색 그라데이션 배경 처리
양은수 : LP판의 플레이 모습/뒤집히는 트리거 구현, 음악 가사 싱크 구현


📺 시연

초기화면

fisrt_page

구단별 페이지

kt_music

doosan_gif

samsung_mu

scroll