본문 바로가기

TUTORIAL


분류없음

[Parallax] 패럴럭스 사이트 인트로

[Parallax] 패럴럭스 사이트 만들기

패럴럭스와 관련된 튜토리얼 영상입니다. 패럴럭스와 관련된 여러가지 만들어보고 하나하나씩 포트폴리오 사이트에 적용시켜보면 도움이 될 것입니다.
그럼 패럴럭스와 관련된 사이트를 만들기 위해서는 기본적으로 HTML, CSS, jQuery를 기본적인 지식을 알고 있다고 가정하에 수업을 진행하겠습니다.

우선 패럴럭스가 무엇인지 개념부터 검색을 해보면 다음과 같습니다.

패럴럭스 스크롤링(parallax scrolling)은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법이다. 하나의 이미지를 여러 개의 레이어(layer)로 분리한 후 스크롤에 반응하는 속도를 다르게 조정하는 방식으로 구현한다. 1930년대부터 애니메이션 분야에 사용되던 기법이었으나, 웹 디자인 분야는 HTML5와 CSS3 기법이 도입됨으로써 사용이 가능해졌다.(출처:위키백과)

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">

<nav id="nav">
    <h1>WEB'S</h1>
    <ul>
        <li><a href="#section1">menu1</a></li>
        <li><a href="#section2">menu2</a></li>
        <li><a href="#section3">menu3</a></li>
        <li><a href="#section4">menu4</a></li>
        <li><a href="#section5">menu5</a></li>
        <li><a href="#section6">menu6</a></li>
    </ul>
</nav>

<div id="contents">
    <div id="section1">We love What You do.</div>
    <div id="section2">Make hay while the sun shines</div>
    <div id="section3">All in my dream</div>
    <div id="section4">Be Strict With Myself</div>
    <div id="section5">Can't Stop to Dream</div>
    <div id="section6">No Pains No Gain</div>
</div>
    

    

    

[수업] 기업 사이트 따라하기1