Day3 : 스타벅스 웹사이트 만들기 / 고정 이미지 배경(Parallax)

HTML/CSS/JS로 스타벅스 웹사이트 만들기

 

개요

 

프로젝트명 : HTML/CSS/JS로 스타벅스 웹사이트 만들기

강의 : 패스트캠퍼스 프론트엔드

분류 : 클론코딩

주요 강의 내용

- html : basic html + font, favicon

- css : basic css, 가상 클래스, bem

- js : basic js, swiper(슬라이드), toggle, gsap.to(순차적 애니메이션), Youtube iframe APII 등

사용 툴 : HTML, CSS, JavaScript

 

패스트캠퍼스 강의를 정리한 내용으로, 개인공부 후 기록하기 위한 목적임으로 내용 상에 오류가 있을 수 있습니다.

 

---

DAY 3
: 고정 애니메이션

 

고정 이미지 배경 (Parallax)

* view

Parallax

: 배경과 콘텐츠의 움직임에 차이를 둬 평면에 공간적 깊이를 더해주는 시각적 효과

스크롤링 하면 이미지는 고정된 채로 해당 영역에서 보였다 사라졌다를 반복하기 때문에 웹 페이지에 입체감을 준다.

---

* html code

    <!-- Season Product -->
    <section class="season-product">
      <div class="inner">
        <img src="./images/floating3.png" alt="Icon" class='floating floating3' />
        <img src="./images/season_product_image.png" alt="season product" class="product"/>
        <div class="text-group">
          <img src="./images/season_product_text1.png" alt="" class="title"/>
          <img src="./images/season_product_text2.png" alt="" class="description">
          <div class="more">
            <a href="javascript:void(0)" class="btn">자세히 보기</a>
          </div>
        </div>
      </div>
    </section>

    <!-- Reserve Coffee -->
    <section class="reserve-coffee">
      <div class="inner">
        <img src="./images/reserve_logo.png" alt="" class="reserve-logo">
      <div class="text-group">
        <img src="./images/reserve_text.png" alt="" class="description">
        <div class="more">
          <a href="javascript:void(0)" class="btn btn--gold">자세히 보기</a>
        </div>
      </div>
      <img src="./images/reserve_image.png" alt="" class="product">
    </div>
    </section>

    <!-- Pick your Favorite -->
    <section class="pick-your-favorite">
      <div class="inner">
        <div class="text-group">
          <img src="./images/favorite_text1.png" alt="" class="title" />
          <img src="./images/favorite_text2.png" alt="" class="description" />
          <div class="more">
            <a href="javascript:void(0)" class="btn btn--white">자세히 보기</a>
          </div>
        </div>
      </div>
    </section>

 

---

* css code 1

/* SEASON PRODUCT */

.season-product {
    background-image: url('../images/season_product_bg.jpg');
}

.season-product .inner {
    height: 400px;
}

.season-product .floating3 {
    position: absolute;
    top: -200px;
    right: 0;
}

.season-product .text-group {
    position: absolute;
    top: 110px;
    right: 100px;
}

.season-product .text-group .title {
    margin-bottom: 10px;
}

.season-product .text-group .description {
    margin-bottom: 15px;
}

.season-product .text-group .more {

}

/* RESERVE COFFEE */

.reserve-coffee {
    background-image: url('../images/reserve_bg.jpg');
}
.reserve-coffee .inner {
    height: 400px;
}

.reserve-coffee .reserve-logo {
    position: absolute;
    top:110px;
    left: 0;
}

.reserve-coffee .text-group {
    position: absolute;
    top: 124px;
    left: 208px;
}

.reserve-coffee .product {
    position: absolute;
    top: 0;
    right: 0;
}

 

배경과 글씨, 버튼을 고정시키는 경우 전체 section 에 해당하는 부분에 background-image 를 넣고

그 위에 글씨(img), 버튼(a) 위치를 잡아주면 된다. (position: absolute 후 위치 잡기)

 

---

* css code 2

/* Pick your Favorite */
 .pick-your-favorite {
    background-image: url("../images/favorite_bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    /* Parallax */
    background-attachment: fixed;
    /* 스크롤 될 때 같이 움직이지 않는 구조 */
    background-size: cover;
    /* 배경의 이미지를 요소의 더 넓은 너비에 맞춰서 출력 */
 }

 .pick-your-favorite .inner {
    padding: 110px 0;    
 }

 .pick-your-favorite .text-group {
    width: 362px;
    display: flex;
    flex-wrap: wrap;
    /* 줄 바꿈이 가능 */
    justify-content: flex-end;
    /* 해당하는 영역의 우측 정렬 */
 }

 .pick-your-favorite .text-group .title {
    margin-bottom: 40px;
 }

 .pick-your-favorite .text-group .description {
    margin-bottom: 40px;
 }

 

입체감을 주는 Parallax css code, 생각보다 간단하다.

마찬가지로 background-image를 넣고, 만약 높이가 있다면 높이 설정(없으면 생략)

/* scrolling effect 요약 */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

 

* 참조문서

How To Create a Parallax Scrolling Effect