생활코딩) Parallax

 

생활코딩parallax

Parallax(시차를 이용한 효과) - 겁나 빠른 웹 레시피

예시 화면

 

HTML 

<section class="scene one">
    <header>
      <h1>Lorem ipsum dolor sit amet. </h1>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti adipisci fugiat deserunt
    </header>
  </section>
  <section class="scene two">
    <header>
      <h1>Lorem ipsum dolor sit amet. </h1>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti adipisci fugiat deserunt
    </header>
  </section>
  <section class="scene three">
    <header>
      <h1>Lorem ipsum dolor sit amet. </h1>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti adipisci fugiat deserunt
    </header>
  </section>

CSS

.scene {
  height: 100vh;
  overflow: hidden;
  background-size: cover;
  background-attachment: fixed;
  font-family: 'Source Sans Pro', sans-serif;

}

.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: 50%;
  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: 600;
}

.scene header h1:after{
  content: '';
  border-bottom: 1px solid white;
  display: block;
  width: 8rem;
  margin: 0 auto;
  margin-top: 1rem;
}

 

이 영상이 찍힐 당시인 2016년엔 신기술이었다. 학교에서 이 기술로 웹 페이지를 만들고 간지난다고 좋아했던 기억이 난다.