Parallax(시차를 이용한 효과)

수업소개

parallax는 시차라는 뜻으로 천문학에서 사용하는 용어입니다. 즉 멀리 있는 물체는 천천히 움직이고, 가까이 있는 물체는 빨리 움직이는 현상을 의미하죠. 이 현상을 이용하면 입체감, 실체감을 높여서 보다 인상적인 디자인을 할 수 있습니다.

사용기술

html
css
JavaScript (쪼금)

선행학습

css background

학습준비

미리보기

수업소개

실습

예제

<!doctype html>
<html>
 
<head>
  <link rel="stylesheet" href="reset.css">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300" rel="stylesheet">
  <style>
    body {
      margin: 0;
    }
    .scene {
      height: 100vh;
      overflow: hidden;
      background-attachment: fixed;
      background-size: cover;
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: 200;
    }
    .scene.one{
      background-image: url(img/heic0910e.jpg);
    }
    .scene.two{
      background-image: url(img/heic1501a.jpg);
    }
    .scene.three{
      background-image: url(img/heic1608a.jpg);
    }
    .scene header{
      color:white;
      max-width: 80%;
      position: relative;
      left:50%;
      top:50%;
      transform:translateX(-50%) translateY(-50%);
      font-size:1.5rem;
      text-align: center;
    }
    .scene header h1{
      font-size:2rem;
      margin-bottom: 1rem;
      font-weight: 300;
    }
    .scene header h1:after{
      content:'';
      border-bottom:1px solid white;
      width:8rem;
      display: block;
      margin:0 auto;
      margin-top:1rem;
    }
  </style>
</head>
 
<body>
  <section class="scene one">
    <header>
      <h1>Lorem ipsum dolor sit amet.</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam suscipit sint ab beatae nihi
    </header>
  </section>
  <section class="scene two">
    <header>
      <h1>Lorem ipsum dolor sit amet.</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam suscipit sint ab beatae nihi
    </header>
  </section>
  <section class="scene three">
    <header>
      <h1>Lorem ipsum dolor sit amet.</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam suscipit sint ab beatae nihi
    </header>
  </section>
   
</body>
 
</html>