[HTML/CSS/JS(jQuery)] 스크롤 슬라이드 페이지 만들기 !

 

슬라이드 쇼 하면 가로로 슬라이드를 하는게 보통이지요.

이번에는 스크롤을 움직임에 따라서 슬라이드가 펼쳐지게 만들어 보았습니다.

위의 사진은 임의의 요구사항을 받고 제작한 것입니다 !(3D프린트 회사 플랫폼이라는 가정)

 

여기서 스크롤을 움직이게 되면 아래와 같이 화면이 움직입니다

 

직접 움직여 보시는게 더욱 알기 쉬울 것 같아요 !

 

시연 홈페이지(git) : https://kiju2.github.io/slide-page/

https://kiju2.github.io/slide-page/

코드 : https://github.com/kiJu2

kiJu2 - Overview

 

혹시나 코드를 참고하시고 싶으신 분 있으실까하고 올려보았습니다

 

 

 

○ 프로젝트 소개

마우스 휠을 사용하여 슬라이드로 동작하는 역동감 있는 페이지입니다. javscript(jQuery)를 적극적으로 활용하여 사용자에게 매니저가 강조하고 싶은 대목을 자연스럽게 역동적인 출력으로 연출하고 싶었습니다.

초기 웹 프론트 엔드를 더욱 능숙하게 다루고 싶었기에 웹 프론트를 숙지함에 있어서에 대한 배경도 다소 존재합니다.

본 프로젝트는 본인의 팀들과 함께 설계한 “3D 도면 쇼핑몰 제작”의 프로젝트가 끝마치고 메인 페이지를 개선하고 싶기에, 메인페이지 부분만 따로 개인 프로젝트로 진행한 프로젝트입니다.

 

○ 본인의 역할

- 디자인 설계

디자인의 영감을 받기 위하여 해외 사이트 및 국내 사이트를 조회하며 최근 웹 디자인 트렌드를 살펴보았습니다 어떠한 느낌의 웹 디자인이 트렌디한지 조사한 후 일부 웹 사이트들의 디자인을 벤치마킹하여 초기 디자인을 설계하였습니다.

어느 부분을 강조할 것이며, 역동적인 강조를 함과 동시에 사용자에게 편한 UI / UX 갖추는 방법을 생각하며 디자인을 설계하였습니다.

- 코딩

HTML5, CSS3, javascript(jQuery)만으로 만들 수 있는 페이지였습니다 디자인을 한 대로 HTML부터 작업을 마치고 CSS3, javascript로 역동적인 느낌을 주도록 코딩을 하였습니다 테스팅은 크롬에 맞추어 테스팅을 진행하였습니다.

 

○ 프로젝트 진행 방식

팀이 없는 개인 프로젝트이기에 디자인을 설계하여 디자인을 바탕으로 코딩을 진행하였고 테스팅은 크롬으로 진행하였습니다.

 

○ 테스팅 브라우저
Chrome v77.0.3865.90(공식 빌드) (64비트)