https://gayunkimm.github.io/portfolio/index.html
- 웹 퍼블리셔 3년차 김가윤의 포트폴리오 입니다.
- 해당 사이트는 상업적용도가 아닌 포트폴리오로 제작되었음을 알려드립니다.
- 제이쿼리, 부트스트랩등을 사용하지 않고 vanila javascript, scss(pure css) 를 활용하여 제작하였습니다.
- 다양한 pc, mobile 사이즈를 대응하며, 반응형으로 제작되었습니다.
- scss map 기능을 활용하여 다크모드를 제작하였습니다.
- 스크롤 상,하를 판별하여 메뉴 위치가 변경되게 적용하였습니다.
- 하나의 슬라이드 class로 이벤트가 적용되게 했습니다.
- wheel이벤트, 터치 드래그 이벤트로 슬라이드를 컨트롤 할 수 있습니다.
- y스크롤, x스크롤의 특정영역에 오면 해당 컨텐츠의 동영상이 재생됩니다.
- 모드 : 무한 슬라이드 모드
- 형태 : 다중 슬라이드
- 터치 및 다음,이전 버튼으로 슬라이드를 제어할 수 있습니다.
- 메뉴, 검색, 최근본은 팝업 형태로 제작되었습니다.
- 상세화면 : 댓글 view , 댓글 인풋창, 좋아요 버튼, 동영상 뮤트 토글
- 컨트롤화면 : 동영상 재생토글 , 동영상 프로세스 바 로 구성되어 있습니다.
- 프로세스바를 단일 클릭시 해당 재생타임으로 이동합니다.
- 프로세스 포인트 바를 드래그시 해당 재생타임으로 이동합니다.
- 남은 시간을 표시합니다.
- 재생/일시정지 토글로 동영상을 제어합니다.
- 브라우저 정책상 뮤트된 상태가 아니면 동영상이 재생되지 않기 때문에 뮤트를 기본설정으로 적용하였습니다.
- 상세화면의 상단 뮤트버튼을 클릭시 사운드 뮤트를 제어합니다.
- 상세보기 페이지 입니다.
- 스크롤하는 값에 따라 title 이미지 크기가 변경됩니다.
- 특정위치에 가면 header 스크롤 이벤트가 적용됩니다.