PGR21.com
- PGR21 관련된 질문 및 건의는 [건의 게시판]을 이용바랍니다.
- (2013년 3월 이전) 오래된 질문글은 [이전 질문 게시판]에 있습니다.
통합 규정을 준수해 주십시오. (2015.12.25.)
Date 2014/04/17 03:25:25
Name 깜디아
Subject [질문] 요런 웹페이지랑 비슷하게 만들려면 어떻게 해야 할까요?

http://www.cencoroll.com/

위 사이트를 보시면 입체감을 느끼게 하려고 스크롤을 내림에 따라 각 이미지가 다른 속도로 스크롤이 되게 해놨는데, 이걸 응용해서 페이지를 하나 만들어 볼 생각인데 참고할 만한 사이트나 예제 같은 걸 볼 수 있는 곳이 있으면 좋겠습니다.

해당 페이지 소스를 뚫어져라 보고 있는데 조금 어렵네요. 나름 연구는 해 보겠습니다만 핵심 구현 방식을 알기 쉽게 찍어주시면 도움이 될 것 같습니다!

아 전 코딩은 완전 초짜이고 소스를 약간 해석하고 고치는 정도는 어느 정도는 할 수 있습니다.

통합규정 1.3 이용안내 인용

"Pgr은 '명문화된 삭제규정'이 반드시 필요하지 않은 분을 환영합니다.
법 없이도 사는 사람, 남에게 상처를 주지 않으면서 같이 이야기 나눌 수 있는 분이면 좋겠습니다."
14/04/17 03:38
수정 아이콘
Parallax scrolling 을 검색하시면 많이 나옵니다
깜디아
14/04/17 03:46
수정 아이콘
아! 이게 유행하는 방식이었군요! 정말 감사합니다!
기상캐스터 잔나
14/04/17 03:55
수정 아이콘
마침 이런 페이지를 하나 만들다가 왔습니다만..
윗 분 말씀대로 parallax scrolling 스타일이고, 이걸 간편하게 구현할 수 있게 해 주는 JQuery 플러그인들이 꽤 있습니다.
stellar.js 라든가.. 그런 것들을 사용하시면 어렵지 않게 바로 이미지 스크롤 속도와 배경 스크롤 속도의 차이를 만들어내실 수 있고요. (구글에서 stellar.js 치시면 다운로드 및 예제 페이지 나올 것이고.. 이것 말고도 scrollrama던가, 여러 가지 플러그인이 많습니다. jquery parallax plugin 치셔서 여러 가지 구경을 다 해보시면 좋을 것 같습니다.)

그리고 JQuery Mousewheel 플러그인 같은 것을 사용하신다면 마우스 휠을 돌렸을 때마다 딱 한 페이지씩 화면 전체가 바뀌면서 변화하는 것도 어렵지 않게 만드실 수 있을 겁니다. (예제: http://gabrieleromanato.name/jquery-parallax-scrolling-with-the-mousewheel-event )
구글에서 jquery mousewheel one page라든가 jquery parallax 같은 검색어들을 넣으시면 외국 블로거들의 예제도 많이 보실 수 있습니다.
마지막으로 어떤 아이템의 화면상의 세로 위치에 따라 애니메이션 효과가 들어가는 것도 간단한 자바스크립트와 CSS3으로 간편하게 해결할 수 있습니다.
(예제 : http://www.justinaguilar.com/animations )
목록 삭게로! 맨위로
번호 제목 이름 날짜 조회
53267 [질문] 삼성 scsa요즘 어떤가요?+문과 프로그래밍 [7] iPhone67137 15/02/06 7137
49094 [질문] 무명 개발자도 '스팀' 인디게임 카테고리 발매할 수 있나요? [2] 츄지Heart1217 14/12/09 1217
48984 [질문] Ctrl이나 Alt 역할을 하는 페달 같은게 있을까요? [4] Crystal Castles1177 14/12/08 1177
48782 [질문] [자바] 이클립스 단축키 관련 질문입니다. [4] Jannaphile2115 14/12/04 2115
47886 [질문] [C++] 과제하다가 발암에 걸려 질문드립니다. [14] 화이트데이2042 14/11/23 2042
47858 [질문] [C++] 버블 정렬 코딩 잘못된 부분좀 봐주세요ㅠㅠㅠ. [2] 삭제됨777 14/11/23 777
47207 [질문] 컴퓨터 조립 견적 조언 부탁드립니다.(w/ GTX 970) [4] Zwei1357 14/11/14 1357
46925 [질문] NC 소프트 인적성 검사 질문입니다. [4] 레이미드10679 14/11/11 10679
46502 [질문] 태블릿 PC 고민중이에요~ [6] 에루베루미루1942 14/11/05 1942
44859 [질문] 비전공자가 모바일 기기 코딩 배우기 [12] 도널드 트럼프1792 14/10/15 1792
44785 [질문] 질문입니다.. [2] 삼성전자홧팅534 14/10/15 534
39489 [질문] 윈도우태블릿 vs 울트라북 [4] 그림속동화782 14/08/05 782
39006 [질문] codeigniter의 세션관련 질문입니다. [2] 포포탄1227 14/07/29 1227
38825 [질문] 기계식 키보드 질문입니다.. [4] 츄지핱997 14/07/26 997
37617 [질문] 맥에서 Visual C++ 2010으로 코딩 연습할때 입력에 대해 [4] 뜨리커풀1225 14/07/10 1225
35369 [질문] 노트북 추천 부탁드립니다! [4] Felice718 14/06/12 718
33655 [질문] pc고수분 조립 도와주세요 [3] 라캉~797 14/05/21 797
32465 [질문] 리눅스 개발자가 윈도우에서 편하게 쓸만한 코드편집기 있을까요? [16] 이걸어쩌면좋아1320 14/05/07 1320
30955 [질문] 요런 웹페이지랑 비슷하게 만들려면 어떻게 해야 할까요? [3] 깜디아3379 14/04/17 3379
29491 [질문] 코딩 + 문서작업 노트북: 맥? 윈도? [19] tristan4395 14/03/28 4395
28011 [질문] 200만~300만원대 노트북 추천좀 부탁드려요! [6] 데로2161 14/03/11 2161
27091 [질문] 하위버전 익스 프린터 출력관련 질문이 있습니다. 적절한센스556 14/02/27 556
24846 [질문] 마우스 추천 부탁 드립니다. [2] 미스터키튼1203 14/01/29 1203
목록 이전 다음
댓글

+ : 최근 1시간내에 달린 댓글
+ : 최근 2시간내에 달린 댓글
맨 위로