웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Web Standard
HOME WEBDESK Web Standard
One page Scrolling Example and Resource
Posted by kimdirector | 2014.10.23 | Hit : 5942
One page Scrolling Example Resource
목록보기이전보기
One Page Scrolling에 대한 자료와 리소스 파일을 찾다가 정리한 내용입니다.
리소스 파일만으로도 충분한 정보가 될 수 있을 것 같아서 공유해 드리며, 필요한 분들이 있으면 도움이 되었으면 합니다.
 
아래 소개하고 있는 자료들은 현재 가장 많이 사용하고 있는 트렌드가 아닐까 생각해 봅니다.
2013년 부터 올해에도 트렌드로 여겨왔고, 내년에도 웹디자인 트렌드로 일순위에 있는 것입니다.
그만큼 가장 큰 이슈가 되고 있는 상황이죠.
 
국내에서는 아직 제작 사례나 개발 사례가 많지 않지만, 해외에서는 이미 상당히 많은 제작 사례들을 볼 수 있습니다.
 
특히, One Page Scrolling의 제작사례는 아직까지도 대규모 프로젝트에서 사용하기 힘든 경우라고 할 수 있습니다. 중소 웹사이트 제작 시, 컨텐츠가 많지 않는 경우, 일회성 이벤트 또는 마이크로사이트를 제작할 경우에 많이 활용되는 제작기법입니다.
 
One Page Scrolling의 특징은, 스크린 전체화면에서 
화면 전환 또는 이동없이 하나의 웹페이지에서 상하스크롤만으로 구성된 화면을 말합니다.
 
소개하고 있는 것들은 샘플 리소스들입니다.
자신의 입맛에 맞게 수정하거나 제작 하고자 하는 컨셉에 맞게 사용할 수 있을 정도의 기본적인 리소스들이며, One page Scrolling에 특화되어 있는 다양한 리소스들로 현업에서 홈페이지 제작 시, 좋은 참고 자료가 될 수 있을 것 같고, 공부하는 디자이너나 개발자들에게는 도움이 될 수 있을 것 입니다.
 
간단한 리소스부터 조금 복잡해 보이는 리소스까지 있으니 확인하시기 바라며, 리소스파일의 다운로드가 가능한 것도 있습니다.

각각의 샘플 이미지를 클릭하면 해당 리소스 화면으로 이동합니다.

 
 
 
1. jQuery Page Scroll To ID Basic Demo
 
 
2. Smooth Fullscreen Page Slider Plugin with jQuery - Scroll Page
 
 
3. jQuery Plugin To Switch CSS Classes On Scroll - Switch Styler
 
 
4. jQuery Plugin For Beautiful Full Window Scrolling Website - pagePiling.js
 
 
5. jQuery Plugin To Create Fixed Navigation As You Scroll - midnight.js
 
 
6. FSVS
 
 
7. jQuery Plugin For Smooth One Page Snap Scrolling - ninjaScroll
 
 
8. Responsive jQuery Navigation For One Page Scrolling Website - spaNav
 
 
9. jQuery Plugin For Fullscreen One Page Scrolling Websites - fullPage.js
 
 
10. jQuery Plugin For Full Containers with Scroll Animation Support - FullContent
 
 
11. Simple jQuery Plugin To Fade Out Panels As You Scroll Down
 
 
12. jQuery Based Fullpage Page Slider with 3D CSS3 Transitions - wankyPages
 
 
13. Smooth Full Page Scroller Plugin For jQuery - goMover
 
 
14. Apple iPhone 5S Website Like One page Scroll Plugin For jQuery
 
 
15. Responsive full page Image Slider with jQuery and CSS3
 
 
16. Creating A full page Wipe Effect with jQuery and CSS3
 
 
17. jQuery fullscreen page Slider Plugin - Project Preview
 
 
18. full page Slide Transitions with jQuery Multi-Screen.js Plugin
 
 
19. fullpage Responsive Carousel Plugin with jQuery - vertslider
 
 
20. Responsive full page Image Slideshow with jQuery - Slidefull
 
 

Posted by kimdirector | 2014.10.23 | Hit : 5942
Tags One page Scrolling Example Resource
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webaccessibility&no=102

COMMENT
Commented by kimdirector
2015.02.13 13:45:33 X
최근에 같은 내용의 포스팅을 업로드했습니다. 해당 포스팅의 연장선으로 보시면 될 것 같습니다.
아래 링크를 클릭하면 해당 화면으로 이동입니다.
http://www.kimdirector.co.kr/bbs/view.php?id=webaccessibility&no=111
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
HTML5 사진인화 html 인포그래픽 Responsive OS X 최적화 타이포그래피 인터페이스 UI BIP 일러스트 비즈니스 아이패드 저작권 조직 프리랜서 사용성 패블릿 리뉴얼 접근성 온라인 폰트 로고 CIP 디자인 테크놀로지 윈도우8 디자이너 협상력 솔루션 로고 생각 트렌드 스마트폰 UX 디자인 그림 이미지 편집 글꼴