20일차

스크롤 위치 계산 애니메이션 공부

---

---

스크롤 위치계산 애니메이션

 <!-- FIND THE STORE -->
  <section class="find-store scroll-spy">
    <div class="inner">

      <img src="./images/find_store_texture1.png" alt="" class="texture1" />
      <img src="./images/find_store_texture2.png" alt="" class="texture2" />
      <img src="./images/find_store_picture1.jpg" alt="" class="picture picture1 back-to-position to-right delay-0" />
      <img src="./images/find_store_picture2.jpg" alt="" class="picture picture2 back-to-position to-right delay-1" />

      <div class="text-group">
        <img src="./images/find_store_text1.png" alt="" class="title back-to-position to-left delay-0" />
        <img src="./images/find_store_text2.png" alt="" class="description back-to-position to-left delay-1" />
        <div class="more back-to-position to-left delay-2">
          <a href="javascript:void(0)" class="btn">매장찾기</a>
        </div>
      </div>

    </div>
  </section>

• back-to-position 지정
• delay-0~3 지정해서 스크롤시 순차적으로 나오는 구현

/* Common */
.back-to-position {
  opacity: 0;
  transition: 1s;
}
.back-to-position.to-right {
  transform: translateX(-150px);
}
.back-to-position.to-left {
  transform: translateX(150px);
}
.show .back-to-position {
  opacity: 1;
  transform: translateX(0);
}
.show .back-to-position.delay-0 {
  transition-delay: 0s;
}
.show .back-to-position.delay-1 {
  transition-delay: .3s;
}
.show .back-to-position.delay-2 {
  transition-delay: .6s;
}
.show .back-to-position.delay-3 {
  transition-delay: .9s;
}

/* FIND STORE */
.find-store {
  background-image: url("../images/find_store_bg.jpg");
}
.find-store .inner {
  height: 400px;
}
.find-store .texture1 {
  position: absolute;
  top: 0;
  left: 400px;
}
.find-store .texture2 {
  position: absolute;
  bottom: 0;
  right: 0;
}
.find-store .picture {
  border-radius: 50%;
  box-shadow: 2px 2px 8px rgba(0,0,0,.5);
  position: absolute;
}
.find-store .picture1 {
  top: -60px;
  left: 0;
}
.find-store .picture2 {
  top: 150px;
  left: 250px;
}
.find-store .text-group {
  position: absolute;
  top: 120px;
  left: 550px;
}
.find-store .text-group .title {
  margin-bottom: 20px;
}
.find-store .text-group .description {
  margin-bottom: 20px;
}

const spyEls = document.querySelectorAll('section.scroll-spy');
spyEls.forEach(function (spyEl) {
  new ScrollMagic
    .Scene({
      triggerElement: spyEl, // 보여짐 여부를 감시할 요소를 지정
      triggerHook: .8
    })
    .setClassToggle(spyEl, 'show')
    .addTo(new ScrollMagic.Controller());
});

ScrollMagic Cdn

스크롤 매직 기능을 통해서 스크롤 할때 순차적으로 보이는 기능 구현

## 다중 슬라이드

  <!-- AWARDS -->
  <section class="awards">
    <div class="inner">

      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./images/awards_slide1.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide2.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide3.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide4.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide5.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide6.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide7.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide8.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide9.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="./images/awards_slide10.jpg" alt="" />
          </div>
        </div>
      </div>

      <div class="swiper-prev">
        <div class="material-icons">arrow_back</div>
      </div>
      <div class="swiper-next">
        <div class="material-icons">arrow_forward</div>

      </div>


    </div>
  </section>

/* AWARDS */
.awards {
  background-color: #272727;
}
.awards .inner {
  padding: 40px 0;
}
.awards .swiper-container {
  width: 100%;
  height: 40px;
}
.awards .swiper-prev,
.awards .swiper-next {
  width: 42px;
  height: 42px;
  border: 2px solid #fff;
  border-radius: 50%;
  outline: none;
  color: #fff;
  opacity: .3;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.awards .swiper-prev {
  left: -100px;
}
.awards .swiper-next {
  right: -100px;
}
.awards .swiper-prev:hover,
.awards .swiper-next:hover {
  background-color: #fff;
  color: #333;
}

new Swiper('.awards .swiper-container', {
  autoplay: true,
  loop: true,
  spaceBetween: 30,
  slidesPerView: 5,
  navigation: {
    prevEl: '.awards .swiper-prev',
    nextEl: '.awards .swiper-next',
  }
});

• Swiper를 이용해 슬라이드 구현
• swiper-prev , next로 양옆 넘기는 기능