웹을 통해 새로운 창조를 꿈꾸는 인간 - 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 : 2211
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 : 2211
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 Work IT Information Web Identity Work Everyday Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
성능 회사 CS5 트렌드 웹폰트 브라우저 마우스 무료 솔루션 디자인 10계명 이어폰 애플 자바스크립트 구글 로고디자인 로고 디자인 웹사이트 html 리뉴얼 프린트 폰트 모바일 크롬 개발툴 PM 마이 홈페이지 소스 jQuery 사고방식 webcolourdata 웹앱 가이드 아이콘 전략 일러스트 프로젝트 캘리그라피