웹을 통해 새로운 창조를 꿈꾸는 인간 - 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 : 1837
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 : 1837
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
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
웹사이트 아이폰 포트폴리오 리뉴얼 웹디자인 이벤트 개발자 전략적 사고 하이브리드 CSS3 성공 벡터 수동적 Wireframe 어도비 3D Model 어플리케이션 드라이브 프로젝트 모바일 리뉴얼 플래시 일러스트레이터 디자인 구매 리뉴얼 비주얼 삼성전자 html 천안외국어대학 사이드 메뉴 구글 원칙 캘리그라피 소셜 디자인경영 비즈니스 웹브라우저 typewonder 브라우저 kit