💻 fossula

• 사이트명: fossula
• 사용언어: HTML, CSS, JavaScript
• 라이브러리: jQuery, GSAP, ScrollTrigger, Lenis
• 유형: 반응형
• 📰 https://hallowmang.github.io/fossula/

✅ Check Point

✔ header 글자색 변경
✔ GSAP의 gsap.utils.toArray
✔ GSAP의 .fromTo()

---

1.header 글자색 변경

$(window).scroll(function() {
    // 현재 스크롤 위치 가져오기
    let scrollPosition = $(window).scrollTop();
    // 스크롤 임계값 설정 (색상 변경 지점)
    let scrollThreshold = 100; // 필요에 따라 이 값을 조정

    // 스크롤 위치가 임계값을 넘었는지 확인
    if (scrollPosition > scrollThreshold) {
      // `fill` 속성을 black으로 변경
      $("path").css("fill", "black");
      // `<a>` 태그의 `color` 속성을 black으로 변경
      $(".header a").css("color", "black");
    } else {
      // `fill` 속성을 다시 white로 변경
      $("path").css("fill", "white");
      // `<a>` 태그의 `color` 속성을 다시 white로 변경
      $(".header a").css("color", "white");
    }
  });

---

2. gsap.utils.toArray⭐⭐⭐⭐⭐

같은 클래스를 가지고 있는 요소들을 동일한 애니메이션으로 적용하고 싶어서 알아봤는데 GSAP에서 보통 toArray()를 사용하는 것
같았다.

toArray()는 GSAP 라이브러리에서 제공되는 유틸리티 메소드 중 하나이다.

같은 클래스를 가진 여러 요소들을 선택하여 배열로 변환하고 그 배열에 대해 일괄적으로 애니메이션을 적용할 수 있다. 이것은 코드를 더 간결하게 만들어주고, 여러 요소에 대해 일괄적으로 애니메이션을 조작하거나 적용하는 데 효율적이다. 👍

🔍사이트 - https://gsap.com/docs/v3/GSAP/UtilityMethods

기본 사용법은 ❔❔❔

const elements = gsap.utils.toArray(".myElements");

gsap.to(elements, {
  opacity: 1,
  duration: 1,
  stagger: 0.2, // 요소들 간의 간격 설정
});

이런 식으로 작성하면 된다.

하지만, 보통 단독적으로 사용하기 보다는 배열 메소드와 같이 적용해서 사용하는것 같다.

배열 메소드 - forEach⭐, map, filter, reduce 등...

📗 GSAP

gsap.utils.toArray('.section-img-box img').forEach((img)=>{
  gsap.set(img,{
    scale:1.2,
    yPercent:-5,
  }),
  gsap.to(img,{
    scrollTrigger:{
      trigger:img.closest(".section-img-box"),
      start:"0% 100%",
      end:"100% 0%",
      scrub:true,
    },
    scale:1,
    yPercent:0,
  });
});

forEach를 사용하여 모든 .section-img-box img에 애니메이션 적용하면서, .section-img-box img 클래스를 가진 모든 요소를 반복하고 각 요소에 대해 애니메이션을 설정하였다.

문제발생❗ trigger를 ".section-img-box"만 설정했더니 전체가 적용이 안되었다.
closest()를 적용했더니 문제가 해결되었다.

closest()는 DOM 트리에서 특정 조건을 만족하는 가장 가까운 조상 요소를 찾는 JavaScript의 메서드이다. 이 메서드는 특정 요소의 부모 요소나 그 이상의 상위 요소들을 탐색할 때 유용하다.
closest()메서드는 인자로 주어진 선택자나 조건을 만족하는 가장 가까운 상위 요소를 찾아줍니다. 이때 해당 요소부터 상위 요소로 올라가면서 조건을 만족하는 첫 번째 요소를 반환하고, 만약 조건을 만족하는 요소가 없다면 null을 반환
주로 closest()는 이벤트 처리나 특정 요소를 찾아 그에 따른 동작을 수행할 때 사용됩니다. 특정 요소의 부모 요소 중에서 가장 가까운 특정 클래스명을 가진 요소나 특정 태그를 가진 요소를 찾는 데 유용하게 활용

---

3. fromTo, autoAlpha

이번 프로젝트에서는 fromTo를 사용하여 페이드인 페이드아웃효과를 사용해보았다.

fromTo

gsap.utils.toArray('.section-inner').forEach(text=>{
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: text,
      start: "0 80%",
      end: "70% center",
      scrub: 1,
    }
  });

  // 각 요소를 원하는 순서대로 나타나게 설정
  tl.fromTo(text.querySelector('.title'), { autoAlpha: 0, y: 10 }, { autoAlpha: 1, y: 0, duration:0.5,  ease: "none" })
    .fromTo(text.querySelector('.subtitle'), { autoAlpha: 0, y: 10 }, { autoAlpha: 1, y: 0, duration:0.5,  ease: "none" })
    .fromTo(text.querySelector('.description'), { autoAlpha: 0, y: 10 }, { autoAlpha: 1, y: 0, duration:0.5,  ease: "none" })
    .fromTo(text.querySelector('.amount-price-group'), { autoAlpha: 0, y: 10 }, { autoAlpha: 1, y: 0, duration:0.5,  ease: "none" });
});

먼저, gsap.timeline을 변수 tl로 저장
그 뒤 .section-inner의 자식 클래스들 .title, .subtitle, .description, .amount-price-group에
gsap.from에 해당하는 애니메이션을 먼저 작성 한 뒤{ autoAlpha: 0, y: 10 }
gsap.to의 { autoAlpha: 1, y: 0, duration:0.5, ease: "none" })를 작성해 줬다.

🤔autoAlpha??

autoAlpha는 CSS의 opacity와 같이 요소의 투명도를 제어하는 데 사용되는 속성이다.
그럼, 뭐가 다를까???🤔🤔🤔

autoAlpha는 GSAP에서만 제공하는 속성으로, 요소의 투명도를 조절하면서 동시에 요소를 보이거나 숨길 수 있다.
autoAlpha를 사용하면 요소를 투명하게 만들면서 CSS의 visibility 속성을 조절하여 요소를 화면에서 숨길 수 있습니다. 투명도가 0이면 요소는 화면에서 보이지 않지만, visibility: hidden 속성이 적용되어 레이아웃에서 공간을 차지하지 않는다는 뜻

상황에 따라 다르겠지만,
버튼(button태그)이나 링크(a태그)처럼 사용자와의 상호작용이 있는 요소에 대해서는 autoAlpha를 사용하는 것이 좋을 것 같다.
또한, 레이아웃에서 공간을 차지하면 안되는 부분은 autoAlpha를 써주자~