모바일 청첩장 공개 (Parallax scrolling, skrollr.js)

개요

결혼을 하게 되어 모바일 청첩장을 직접 만들기로 했다.

기획자가 확실하신 분이라 그분의 니즈를 만족시키기 위한 템플릿을 찾을 수 없었다.

기획자님은 선과 원이 만나 우리가 된다는 것을 강조하길 원하셨고 

나는 스크롤을 내리면 화면의 구성을 변경할 수 있는 parallax scrolling라는 기술로 개발하기로 했다.

Parallax scrolling를 위한 라이브러리는 skrollr.js 를 사용했다.

개발

최대한 단순화 하기 위해서 index.html 안에 css와 js 모두 인라인으로 개발했다.

jquery, skrollr 두개의 라이브러리를 사용했고, 이미지는 상대경로로 설정해서, 사용하고자 하는 분은 이미지만 바꾸면 된다.

나는 AWS S3에 public 저장소를 하나 생성하고, FrontCloud CDN 을 연결해서 하객들에게 공유했다.

사용자 환경은 모바일에 최적화 했고, PC화면에서 보아도 깨지지 않도록 살짝 설정해 두었다.

청첩장을 직접 만드시는 분들께 도움이 될 수 있길 바라며 포스팅한다.

데모

• https://s3.ap-northeast-2.amazonaws.com/wedding-github/index.html

깃헙

• https://github.com/wantutopia/mobileWeddingTemplate

스크린샷