겁나 빠른 웹 레시피

Parallax(시차를 이용한 효과)

수업소개

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

사용기술

선행학습

학습준비

미리보기

 

수업소개

 

실습

 

 

 예제

<!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>

전체소스 코드 

댓글

댓글 본문
  1. jeisyoon
    2021.07.09 Parallax - OK
  2. 라꿍차타
    와... 구글에서 parallax 검색하다가 생활코딩에 이게 있다고?
    하면서 들어왔는데,
    코딩을 예술로 승화시키셨네요;
  3. 공부중
    재밌게 따라했어요. 뿌듯합니당
  4. newnorm
    짱재밌다~~~~~~~~!!!!!!
  5. 초급자
    한 scene에 사진이아니라 영상도 넣을수있을까요???
  6. 최주원
    와우 패럴렉스 강의가 있을줄이야. : >
  7. hsctjs
    이거 모바일 환경에서도 구동이 가능한건가요??
  8. 1234
    허어..멋있다 영상제작도 이제 하시나보네요
  9. sonic
    감사합니다~
    굉장히 재밌었어요 :)

    아래분처럼 저도 혹시 모바일에서도 적용이 될 수 있는지 궁금하네요.
  10. 진해주
    강의 잘듣고 이쁜 디자인 잘배웠습니다. 그런데 크롬에서는 문제 없이 잘되는 데 ie11에서는 화면이 버벅이네요.. 검색 좀 해봤지만 해결이 안되네요.. 해결방법 있을까요?
  11. 송평우
    Brackets 맞네요. 감사합니다.^^
    http://brackets.io......tml
  12. 광대승천
    잘들었습니다
  13. 광대승천
    bracket인것 같아요
    대화보기
    • 송평우
      "Parallax Scrolling" 영상에서 사용된 에디터 이름이 뭘까요??
    • 이윤민
      감사히 잘 보고 있습니다 ~
      background-attachment: fixed; 가 모바일웹에서는 적용이 안되는건가요..?
      저는 안되는데.. ㅠ
      모바일에서 parallax 디자인 적용하는 방법 아시는분 계신가요,,ㅠ
    • 사탕나무
      아는 만큼 보인다고 알고보니 더욱 재미있습니다. 감사합니다.
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기