웹을 통해 새로운 창조를 꿈꾸는 인간 - 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
Parallax Scrolling을 활용한 튜토리얼 12가지
Posted by kimdirector | 2014.11.10 | Hit : 1971
Codepen Parallax 리소스
목록보기이전보기
Free Code Snippets
 
Codepen이라는 사이트에서 Parallax를 활용한 홈페이지 샘플을 소개해 드립니다.
 
먼저 Codepen이라는 사이트를 소개해 드립니다.
Parallax를 활용하여 적용된 html 화면의 소스를 분석할 수 있습니다. html, CSS, JS 로 나누어서 어떻게 만들어졌는지, 어떻게 적용되어 있는지 소스를 분리하여 확인할 수 있습니다.
 
세가지로 구분되어 있는 html, CSS, JS 를 본인이 원하는 방식으로 소스를 편집하여 확인할 수 있으며, View 방식은 4가지입니다. Editor, Full page, Detail, Presentation 이렇게 해서 볼 수 있습니다.
 
소스 부분을 상단에서, 좌 또는 우측에서 볼 수 있도록 되어 있습니다.
 
몇 번 또는 이것저것 클릭해 보면 아실테지만 쉽게 만들어져있어서 사용하는데는 어려움이 없습니다.
 
html를 공부하는 사람에게는 많은 도움이 될 수 있을 것 같습니다.
 
아래 소개해 드리는 리소스들은 Codepen에서 만들어진 다양한 리소스들을 모아봤습니다.
Parallax를 활용하여 만들어지 소스들이니 어떻게 만들어져 있는지 확인해 보면 많은 도움이 되지 않을까 생각해 봅니다.
 
각각의 이미지들을 클릭하면 해당 리소스 파일로 이동합니다.
 
 
Parallax Hover
 
Auto-Scroll
 
Login Form
 
Scrolling Columns
 
Starry BG
 
Call to Action
 
Fullscreen Background
 
Graphics Scrolling
 
Background Motion
 
Blur on Scroll
 
Build-a-Face
 
Easy Parallax Effect


Posted by kimdirector | 2014.11.10 | Hit : 1971
Tags Codepen Parallax 리소스
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webaccessibility&no=105

COMMENT
목록보기 이전보기
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
소프트웨어뱅크 로고 유저인터페이스 평면 고객경험 디자인 아이폰 트렌드 홈페이지 솔루션 패키지디자인 애플리케이션 기획자 인터랙션 디자인 유치원 홈페이지 홈페이지 UI 브로슈어 CIP 유니버설 디자인 청중 인쇄 메일폼 유저빌리티 의사결정 iOS 마음 마인드 윈도우8 사용자 웨어러블 온라인 이카다로그 무료 모바일 HTML5 무료 이미지 업데이트 Scrolling 개발툴