*패럴렉스 효과(Parallax Effect)란? 웹사이트 스크롤 시 배경과 콘텐츠의 이동 속도를 다르게 하여 입체감과 깊이감을 주는 시각 기술입니다.
크리에이티브 에이전시나 포트폴리오 사이트에서 스크롤할 때 이미지나 레이어가 주변과 다른 속도로 움직이는 효과를 본 적 있으신가요? 이것이 바로 Scroll Speed 이펙트입니다.
이번 클래스에서는 두 가지 케이스로 Scroll Speed를 실전 연습합니다. 첫 번째 케이스는 컨텐츠 컬럼에 적용하면서 Overflow 설정, 배경색 제거, 섹션 간격 조정 같은 주의사항을 짚어봅니다. 특히 Scroll Speed는 기본적으로 트리거 없이 페이지 전체 스크롤에 반응하기 때문에, 특정 섹션에서만 동작시키려면 Scroll Transform과 조합하는 방법을 함께 다룹니다.
두 번째 케이스는 히어로 섹션에 이미지 패럴랙스를 구현하는 더 크리에이티브한 예제입니다. 이미지 크기를 상위 레이어보다 여유 있게 설정하는 이유, Distribution 방향에 따라 어느 쪽에 여백을 남길지 결정하는 방법, 그리고 타이틀에 Scroll Transform까지 결합해 가로 이동 효과를 더하는 방법을 배웁니다. 이미지 단면이 노출될 때의 체크리스트도 꼭 챙겨두세요.
chapter1-1
Item Counter 🔄
chapter1-2
Item Counter 🔄
chapter1-3
Item Counter 🔄
chapter2-1
Item Counter 🔄
chapter2-2
Item Counter 🔄
chapter2-3
Item Counter 🔄
chapter2-4
Item Counter 🔄
chapter2-5
Item Counter 🔄
chapter2-6
Item Counter 🔄
chapter2-7
Item Counter 🔄
chapter2-8
Item Counter 🔄
chapter3-1
Item Counter 🔄
chapter3-2
Item Counter 🔄
chapter3-3
Item Counter 🔄
chapter3-4
Item Counter 🔄
chapter3-5
Item Counter 🔄
chapter3-6
Item Counter 🔄
chapter3-7
Item Counter 🔄
chapter3-8
Item Counter 🔄
chapter4-1
Item Counter 🔄
chapter4-2
Item Counter 🔄
chapter4-3
Item Counter 🔄
chapter4-4
Item Counter 🔄
chapter4-5
Item Counter 🔄
chapter4-6
Item Counter 🔄
chapter4-7
Item Counter 🔄
chapter4-8
Item Counter 🔄
chapter4-9
Item Counter 🔄
chapter4-10
Item Counter 🔄
chapter5-1
Item Counter 🔄
chapter5-2
Item Counter 🔄
chapter5-3
Item Counter 🔄
chapter5-4
Item Counter 🔄
chapter5-5
Item Counter 🔄
chapter5-6
Item Counter 🔄
chapter6-1
Item Counter 🔄
chapter6-2
Item Counter 🔄
chapter6-3
Item Counter 🔄
chapter6-4
Item Counter 🔄
chapter6-5
Item Counter 🔄
chapter6-6
Item Counter 🔄
chapter6-7
Item Counter 🔄
chapter7-1
Item Counter 🔄
chapter7-2
Item Counter 🔄
chapter7-3
Item Counter 🔄
chapter7-4
Item Counter 🔄
chapter7-5
Item Counter 🔄
chapter7-6
Item Counter 🔄
chapter7-7
Item Counter 🔄
chapter8-1
Item Counter 🔄
chapter8-2
Item Counter 🔄
chapter8-3
Item Counter 🔄
chapter9-1
Item Counter 🔄
chapter9-2
Item Counter 🔄
chapter9-3
Item Counter 🔄
chapter9-4
Item Counter 🔄
chapter9-5
Item Counter 🔄
chapter1-1
Item Counter 🔄
chapter1-2
Item Counter 🔄
chapter1-3
Item Counter 🔄
chapter2-1
Item Counter 🔄
chapter2-2
Item Counter 🔄
chapter2-3
Item Counter 🔄
chapter2-4
Item Counter 🔄
chapter2-5
Item Counter 🔄
chapter2-6
Item Counter 🔄
chapter2-7
Item Counter 🔄
chapter2-8
Item Counter 🔄
chapter3-1
Item Counter 🔄
chapter3-2
Item Counter 🔄
chapter3-3
Item Counter 🔄
chapter3-4
Item Counter 🔄
chapter3-5
Item Counter 🔄
chapter3-6
Item Counter 🔄
chapter3-7
Item Counter 🔄
chapter3-8
Item Counter 🔄
chapter4-1
Item Counter 🔄
chapter4-2
Item Counter 🔄
chapter4-3
Item Counter 🔄
chapter4-4
Item Counter 🔄
chapter4-5
Item Counter 🔄
chapter4-6
Item Counter 🔄
chapter4-7
Item Counter 🔄
chapter4-8
Item Counter 🔄
chapter4-9
Item Counter 🔄
chapter4-10
Item Counter 🔄
chapter5-1
Item Counter 🔄
chapter5-2
Item Counter 🔄
chapter5-3
Item Counter 🔄
chapter5-4
Item Counter 🔄
chapter5-5
Item Counter 🔄
chapter5-6
Item Counter 🔄
chapter6-1
Item Counter 🔄
chapter6-2
Item Counter 🔄
chapter6-3
Item Counter 🔄
chapter6-4
Item Counter 🔄
chapter6-5
Item Counter 🔄
chapter6-6
Item Counter 🔄
chapter6-7
Item Counter 🔄
chapter7-1
Item Counter 🔄
chapter7-2
Item Counter 🔄
chapter7-3
Item Counter 🔄
chapter7-4
Item Counter 🔄
chapter7-5
Item Counter 🔄
chapter7-6
Item Counter 🔄
chapter7-7
Item Counter 🔄
chapter8-1
Item Counter 🔄
chapter8-2
Item Counter 🔄
chapter8-3
Item Counter 🔄
chapter9-1
Item Counter 🔄
chapter9-2
Item Counter 🔄
chapter9-3
Item Counter 🔄
chapter9-4
Item Counter 🔄
chapter9-5
Item Counter 🔄
