Hogwarts-School

해리포터 세계관 속 호그와트 마법학교 - 반응형 웹사이트
배포주소 : https://bucolic-squirrel-37fca3.netlify.app/

💼 작업기간

4인 제작
2023.01.05 ~ 02.10

🤝 멤버구성

이름	담당	비고
공통	반응형 구현
유정원	메인페이지, 소스 제작, PPT 제작	디자인 총괄 Front-End
김혜린	공동 헤더 및 푸터, 기숙사 리스트 및 상세소개, 마이페이지	Front-End
이서하	회원가입, 로그인, 기숙사 테스트	기획 총괄 Front-End Back-End
황지원	도입부, 교수진 소개, 학교연혁	서기 Front-End

⚙ 개발환경

JavaScript(ES6)
HTML5
CSS3

✔ 주요 담당기능

Header

• 스크롤 방향에 따른 헤더 숨기기 및 표시
• 로그인 아이콘 제작
• 모바일형 - 버티컬 탭 구조로 전환

달력 및 소개

• 배열과 for문을 이용한 달력 구현
• Split() 함수를 이용해 문자열을 분할하는 Hover 이벤트

기숙사 점수

• 스크롤 거리값과 구역 높이값을 이용한 점수 카운팅 애니메이션

교내 소식지

• scroll-snap-type 속성을 사용해 자동으로 최상단 부분이 스냅
• 기사 영역 스크롤 거리값을 이용하여 기사를 넘길 때마다 숫자 전환

교수 및 교과목 소개

• Ajax통신을 이용하여 JSON 데이터 출력
• Preserve3d 속성을 사용해 mouseover시 카드 flip 효과
  • 앞면 | 과목
  • 뒷면 | 해당 과목 담당교수

Footer

• 롤링 텍스트 : 롤링배너 복제본 생성 후, 원본 너비값을 이용해 복제본 위치 생성

이스터에그

• 루모스 & 녹스 : 검색창에 주문 입력 시, 지팡이(커서) 주변만 밝아지게 구현
• 볼드모트 : mask 속성과 keyframe를 이용한 Click 이벤트
• 울토 머틀 : 텍스트 분할 후, blur값을 이용한 Hover 이벤트