웹을 통해 새로운 창조를 꿈꾸는 인간 - 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 : 1810
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 : 1810
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
로고 디자인 브라우저 홈페이지 프로젝트 UI 마이 홈페이지 모바일 아이폰 HTML5 웹기획 웹디자인 HTML5 프로토타입 크롬 아이패드 UI OS 목표 PM 라이브러리 디자이너 이벤트 스토리텔링 스팸 문서 IdN 원칙 데스크톱 UX 라이트박스 로고디자인 문장 typewonder 생각 IT CIO PSD 패키지디자인 기업