2021-07-16 Part(1)_ch(10)_(13~16)

부모요소가 position: releative가 아닌 position: absolute이면

releative와 관계없이 부모요소에 기준하여 자식들이 움직인다.

 

document.querySelectorAll(" ")
html에서 특정 클래스를 갖는 모든 영역들을 찾는다

forEach(function(각 요소별 이름, index){ })를 통해
이후 forEach를 통해 각각 맨위부터 나열하여 index로 숫자순서로 나열한다.

이후 함수에
gsap.to(맨처음부터 하나씩 작동할 요소, 지속시간, {옵션})를 넣게되면

각 요소별 넣은 같은 옵션들이 동시에 적용된다.

이후 각 요소별 작동 시간을 다르게하려면 요소별로 위 gsap의 옵션추가로 delay를 주어야한다.

 

gsap.to에서 옵션에 delay 값을 넣게되면 각요소 사이마다 dealy가 들어가게 된다.

delay를 delay : (index+1) * 0.7 같이
forEach로 만들어진 요소별 인덱스는 delay를 다 다르게 계산되도록 설정한다. index로 복리식으로 더 커지면서 하나씩 더욱 뒤로 밀려나게된다.