웹을 통해 새로운 창조를 꿈꾸는 인간 - 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 | 2015.02.13 | Hit : 3564
One page Scrolling Example Resource
목록보기이전보기
One Page Scrolling에 대한 자료와 리소스 파일을 찾다가 정리한 내용입니다.
리소스 파일만으로도 충분한 정보가 될 수 있을 것 같아서 공유해 드리며, 필요한 분들이 있으면 도움이 되었으면 합니다.
 
아래 소개하고 있는 자료들은 현재 가장 많이 사용하고 있는 트렌드가 아닐까 생각해 봅니다.
2013년 부터 올해에도 트렌드로 여겨왔고, 내년에도 웹디자인 트렌드로 일순위에 있는 것입니다.
그만큼 가장 큰 이슈가 되고 있는 상황이죠.
 
국내에서는 아직 제작 사례나 개발 사례가 많지 않지만, 해외에서는 이미 상당히 많은 제작 사례들을 볼 수 있습니다.
 
특히, One Page Scrolling의 제작사례는 아직까지도 대규모 프로젝트에서 사용하기 힘든 경우라고 할 수 있습니다. 중소 웹사이트 제작 시, 컨텐츠가 많지 않는 경우, 일회성 이벤트 또는 마이크로사이트를 제작할 경우에 많이 활용되는 제작기법입니다.
 
One Page Scrolling의 특징은, 스크린 전체화면에서 
화면 전환 또는 이동없이 하나의 웹페이지에서 상하스크롤만으로 구성된 화면을 말합니다.
 
소개하고 있는 것들은 샘플 리소스들입니다.
자신의 입맛에 맞게 수정해서 사용할 수 있을 정도의 기본적인 리소스들이며, One page Scrolling에 특화되어 있는 다양한 리소스들로 현업에서 홈페이지 제작 시, 좋은 참고 자료가 될 수 있을 것 같고, 공부하는 디자이너나 개발자들에게는 도움이 될 수 있을 것 입니다.
 
간단한 리소스부터 조금 복잡해 보이는 리소스까지 있으니 확인하시기 바라며, 리소스파일의 다운로드가 가능한 것도 있습니다.
 
 
Create full page Animated Navigation with jQuery and CSS3
 
 
 
Create A Responsive One page Website with jQuery and CSS3 - full page Slider
 
 
 
Creating Apple-Like fullscreen One page Scrolling Website with jQuery
 
 
 
jQuery Plugin To Create fullscreen Scrolling Website - fullpage
 
 
full page Parallax Scrolling Effects with jQuery Swctallax and InView Plugins
 
 
jQuery Plugin For fullscreen Scrolling pages - windows
 
 
fullscreen pageflip Layout with BookBlock
 
 
jQuery Based one page Scrolling Navigation with 3D Transforms
 
 
jQuery Plugin For Creating Responsive one page Scrolling Web Layout - vpageScroll.js
 
 
jQuery Tooltips Navigation For one page Scrolling Website - scrollTips
 
 
Stacked one page Slider with jQuery StickyStack.js
 
 
one page Scrolling Navigation with jQuery and CSS3
 
 
jQuery Plugin For one page Section Navigation - sectionMenu
 
 
Create A one page Scrolling Website with jQuery and CSS3
 
 
Create A Single page Scrolling Website with jQuery and CSS3 - singular.js
 
 
jQuery Plugin For Creating one page Multi Scrolling Website - multiScroll.js
 
 
jQuery Plugin For one page Parallax Scrolling Website - page Slider
 
 
Nice one page Scrolling Effect with jQuery StackingSlides Plugin
 
Yet Another one page Slider Plugin with jQuery - Wolfe.js
 
jQuery Snap Scrolling Plugin For Single page Website - snapscroll
 
Apple-Like Vertical one page Scrolling Plugin For jQuery - slidescroll
 
 
Responsive jQuery one page Scrolling Layout with Fixed Background
 
 
jQuery Sticky Navigation Bar For one page Website - SMINT
 
 
Smooth and Smart one page Navigation Plugin
 
 
Sticky Menu Including Navigation Thingy
 
 
stickUp a jQuery plugin

 

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

COMMENT
Commented by kimdirector
2015.02.13 13:43:58 X
예전에 업로드한 포스팅의 연장선에 있는 포스팅입니다.
제목은 같고, 링크를 클릭하면 해당 화면으로 이동합니다.
http://www.kimdirector.co.kr/bbs/view.php?id=webaccessibility&page=1&no=102
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View 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
타이포그래피 OS X 기획자 평면 디자이너 정의 문제 아이폰 Draft 웹디자인 리더쉽 그래픽 디자인로그 html5 사용자 일러스트 스마트폰 정보보호 홈페이지 아이콘 IT 디자인 UI iPhone 리더십 게티이미지코리아 프로젝트 리더십 스티브잡스 BI 프로그래머 모바일 키워드 조언 웨어러블 혁신 인공지능 트렌드 로고디자인 아이패드 프로젝트 모바일