inflearn logo
강의

講義

知識共有

UIUXデザイナー就職のためのウェブポートフォリオ制作:パーソナルブランディング戦略

ScrollTrigger 実務活用_Script適用

3차 y축으로 올라오는 갤러리제작

145

投稿した質問数 2

0

3차 y축으로 올라오는 갤러리제작에 관한 질문입니다
이미지와 왼쪽에 있는 클론코딩 제목이 같이 올라오게 하고 싶거든요
Concierge 글자가 올라오면서 이미지가 올라오고
두번째 Hanwha Solutins가 올라오면서 이미자가 올라오는
이런건 안될까요?

HTML/CSS 포트폴리오 반응형-웹 gsap scrolltrigger

回答 2

0

jyoung

안녕하세요? 김김김님 잠시 출타중이여서 답변이 늦었습니다

말씀하신 방법은 지금 레이아웃으로 설명드리기는 어렵습니다.
레이아웃과 구현방법을 다르게 해야하기 때문에 지면으로 설명드리기가 한계가 있습니다.
죄송합니다.

조만간 다양한 예시로 추가 업데이트 하도록 최선을 다하겠습니다.
J.young드림

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다.

김샘님께서 질문하신 “3차 y축으로 올라오는 갤러리 제작”에 대해 설명드리겠습니다. ScrollTrigger를 활용하여 특정 요소들과 이미지가 동시에 애니메이션하며 올라오도록 설정하는 것은 충분히 가능합니다. 이를 위해서는 ScrollTrigger의 여러 옵션을 잘 활용하셔야 하는데요, 주요 Tips을 드리자면:

  1. 시작과 끝 지점 설정: 각 요소에 ScrollTrigger를 설정할 때, 시작(start)과 끝(end) 지점을 적절히 설정하여 애니메이션 타이밍을 조절할 수 있습니다. 이로써 “Concierge” 글자와 이미지가 동시에 올라오도록 동기화할 수 있습니다.

  2. 애니메이션 효과 지정: 각 요소에 대해서 원하는 애니메이션 효과를 정의합니다. 예를 들어, y축을 기준으로 올라오는 애니메이션 효과를 y 속성을 통해 조절할 수 있습니다.

  3. 타임라인 활용: GSAP의 Timeline을 활용하면 여러 요소의 애니메이션을 순차적으로 또는 동시에 제어할 수 있습니다. 따라서, text와 이미지의 타이밍을 조정하여 원하는 시점에 적절히 작동하도록 설정할 수 있습니다.

기존에 유사한 질문이 올라왔던 게시물을 참고하시면, 문제 해결에 큰 도움이 될 수 있습니다. 아래는 유사한 문제를 다루었던 질문입니다:

해당 질문 게시물을 참고하여 다양한 방법으로 문제를 해결해 보시기 바랍니다. 또한, 실습 하실 때 코드가 기대했던 동작을 하지 않는다면, 언제든지 추가적인 정보를 제공하면서 질문해 주세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

강의 문의드립니다.

0

85

3

마우스 채워지는 텍스트

0

88

2

스크립트 부분이 이해가 어렵네요

0

89

2

scrolltrigger pin-spacer 영역 없애는 법 있나요?

0

270

2

완성본 요청드립니다.

0

96

1

선생님 완성본 문의드립니다.

0

144

2

simplyscroll Plugin에 대해서 질문드립니다.

0

120

2

가로스크롤 갤러리 반응형에서 scrollTrigger 동작 문제

0

113

1

가로스크롤 scrollTrigger 가 작동되지 않습니다.

0

179

2

ScrollTrigger 플러그인이 작동되지 않는 것 같습니다

0

207

3

포트폴리오 문의드립니다.

0

123

2

섹션8 질문

0

141

2

강의요청

0

173

3

5차 완성본 요청합니다.

0

147

2

내용입력할때 p안쓰고 span쓰는 이유가 있을까요

0

196

2

섹션 .con02 gsap 질문

0

280

3

scrolla 질문

0

141

2

header gnb splitting 적용문제

0

174

3

clamp, min max를 활용한 강의도 있나요??

0

181

1

완성본은 따로 없는건가요?

0

156

1

안녕하세요. 포트폴리오가 어느방향으로 해야할지 감이 안잡히는데 카톡같은걸로 상담도 해주시나요?

0

126

2

완성된 코드 자료 받아볼 수 있을까요?

0

181

1

섹션 14 테두리 밖 색상 제거

0

174

2

선생님

0

220

1