[8주차 과제] interactive web

https://github.com/minseo25/likesaju-frontend-seminar

GitHub - minseo25/likesaju-frontend-seminar: 2학기 프론트엔드 세미나 12기 공개용 레포

 

1. scroll event 추가

화면 기록 2024-11-16 오후 10.44.28.mov

9.71MB

 

 

    if (textSectionRef.current) {
      const delayedFactor = Math.max(0, factor2 - 0.2);
      gsap.to(textSectionRef.current, {
        x: -500 + 500 * delayedFactor,
        opacity: delayedFactor,
        duration: 0,
      });

이런 식으로 ref를 새롭게 추가하고, interpolateDesignPosition 함수 내에 관련 애니메이션을 추가했습니다

factor2 (designsection의 속도)보다는 약간 느렸으면 좋겠어서 0.2 만큼의 delay를 추가했습니다

 

2. 반응형 웹

화면 기록 2024-11-16 오후 11.15.42.mov

18.99MB

ShareSection, FAQSection, Header에 mobile: prefix를 사용했으며,

layout을 변경하고 (모바일에서는 세로로 배치, flex-col)

패딩 및 간격 조정을 적용했습니다