<aside> 💡

con02 인터렉티브 & con03 제작

</aside>

con02영역_인터렉티브 모션 : Gsap의 ScrollTrigger를 활용한 타이틀제작2

GSAP과 ScrollTrigger를 이용하여 WorkList가 끝날 때 My Work 텍스트가 화면 밖으로 사라지도록 애니메이션을 적용했습니다. 이 과정에서 타임라인을 활용해 스크롤 위치에 따라 텍스트가 좌우로 이동하는 애니메이션을 구현했습니다.

주요 개념

• scrollTrigger: 스크롤 위치에 따라 애니메이션이 발생하도록 설정할 수 있다.
• scrub: 스크롤과 애니메이션이 동기화되어 자연스럽게 이어지는 효과를 제공한다.
• timeline: 여러 애니메이션을 순차적으로 또는 동시에 실행할 수 있는 강력한 기능이다.

주요 깨달음

• 스크롤 연동 애니메이션: 스크롤 위치에 따라 요소들이 자연스럽게 화면에서 사라지거나 등장하는 효과를 구현할 수 있다는 점을 깨달았다.
• GSAP Timeline의 유용성: 여러 애니메이션을 쉽게 동기화할 수 있으며, 특히 스크롤과 함께 애니메이션이 동작할 때 효과적인 방식임을 알게 되었다.

// workList가 끝날때 My Work가 화면 밖으로 사라지도록 애니메이션 적용
gsap.timeline({
  scrollTrigger: {
    trigger: '.workList',
    start: '100% 50%',
    end: '100% 0%',
    scrub: 1
  }
})
.to('.con02 .title .a', {x: '-100%', ease: 'none', duration: 5}, 0)
.to('.con02 .title .b', {x: '100%', ease: 'none', duration: 5}, 0)

con03영역_레이아웃 : HTML MarkUp

My Skill 섹션을 구성하여 웹 페이지에서 내 기술 스택을 시각적으로 나타내는 디자인을 구현했습니다. 여러 스킬들을 리스트 형식으로 나열하고, 이미지와 함께 버튼을 추가해 사용자에게 읽기 쉽고 직관적인 정보를 제공합니다.

주요 개념

• 섹션 구성: 기술 리스트와 이미지 리스트를 포함하는 <section> 구조를 통해 시각적 요소와 텍스트 요소를 분리하여 가독성을 높였다.
• 반응형 디자인: 리스트와 이미지들이 다양한 화면 크기에서도 적절하게 배치되도록 설계했다.
• 버튼 디자인: btnWrap을 사용하여 읽기 쉽게 두 개의 버튼을 배치하고, 각각 다른 스타일의 이미지를 사용하여 사용자가 명확하게 클릭할 수 있는 UI를 제공했다.

주요 깨달음

• HTML 구조의 중요성: 텍스트와 이미지를 효과적으로 배치하는 HTML 구조 설계가 페이지의 가독성과 사용자 경험에 매우 중요한 역할을 한다는 것을 다시 한번 깨달았다.
• 디자인 일관성: 버튼과 이미지, 텍스트의 스타일링을 일관성 있게 유지하는 것이 시각적 완성도를 높여준다는 점을 인식했다.