2021-07-20 Part(1)_ch(10)_(27-29) 이미지 스크롤에 따라 나타나기

특정 자식한테 positon: absolute을 주어 자식간에 상호위치를 무너뜨려서 곂쳐 보이게 한다.

backface-visibility:hidden을 적용한 요소의 180도 회전이 된것들(transfrom :rotate(180deg)은 보이지 않게된다.

원근법(더욱 입체화하게 보이게함) perspective는 가장 부모요소에 적용한다.

transition-delay 옵션을 통해 transition이 몇초 동안작동하는것을 떠나 그 transition이 몇초뒤에 시작을 하는지 지연을 정의할수 있다.

 

[각 요소들이 스크롤에 따라 움직일때 클래스가 삽입되기]

const spyEls = document.querySelectorAll("section.scroll-spy")

spyEls.forEach( function (spyEl) {
  new ScrollMagic
  .Scene({ //감시기능
    triggerElement: spyEl, // 보여짐을 감시한다.
    triggerHook: .8 // 뷰포트 기준 80% 부근에 위 요소가 도달하면 작동
  }) 
  .setClassToggle(spyEl, 'show') //.Scence에서 감시완료된 것 spyeEl에 show클래스를넣음
  .addTo(new ScrollMagic.Controller());
});

 

[요소별 클래스에 따른 움직임 설정]

*이미 숨겨져 있는 모습을 구현한뒤 특정 클래스 .show가 들어가면 나타나게 설정한다.

.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에 딜레이 주기

 

.show .back-to-position.delay-0{

  transition-delay: 0;

}

.show .back-to-position.delay-1{

  transition-delay: 0.3s;

}

.show .back-to-position.delay-2{

  transition-delay: 0.6s

}

 

.show .back-to-position.delay-3{

  transition-delay: 0.7s;

}