[스타벅스 웹사이트] 고정 이미지 배경(Parallax), 3D 애니메이션(rotate, translate)

고정 이미지 배경

Parallax 효과

position: absolute; 선언 후 배경이미지를 적용

스크롤에 이미지가 따라오지 않고, 끌려가는 느낌을 줌

/* pick your favorite */
.pick-your-favorite {
  background-image: url("../images/favorite_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

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

.pick-your-favorite .text-group {
  margin-left: 100px;
  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;
}

---

3D 애니메이션

앞뒤 반전

rotateY를 사용하여 앞뒤로 움직이는 듯한 애니메이션 적용

.reserve-store .medal {
  width: 334px;
  height: 334px;
  perspective: 600px;
}

.reserve-store .medal .front,
.reserve-store .medal .back {
  width: 334px;
  height: 334px;
  position: absolute;
  backface-visibility: hidden;
  transition: 1s;
}

.reserve-store .medal .front {
  transform: rotateY(0deg);
}

.reserve-store .medal:hover .front {
  transform: rotateY(180deg);
}

.reserve-store .medal .back {
  transform: rotateY(-180deg);
}

.reserve-store .medal:hover .back {
  transform: rotateY(0deg);
}

.reserve-store .medal .back .btn {
  position: absolute;
  top: 240px;
  left: 0;
  right: 0;
  margin: auto;
}

---

나타났다 사라지기

scrollMasic 라이브러리로 스크롤 영역이 영역의 80%에 접근하면

opacity, translateX를 이용하여 애니메이션 효과 적용

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());
});

-----------------------------------------------------------------

.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);
}

---

다중 요소 슬라이드

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

---------------------------------

.awards .swiper {
  width: 100%;
  height: 40px;
}

.awards .swiper-prev,
.awards .swiper-next {
  width: 42px;
  height: 42px;
  border: 2px solid #fff;
  border-radius: 50%;
  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;
}