스크롤할 때 한 번 등장 · Scroll reveal

스크롤 중 요소가 화면에 들어왔을 때 등장시키는 패턴. 스크롤 위치와 효과가 계속 연동되는 방식과는 다름

조회 0추천 0

직접 만든 예시

Scroll reveal · Intersection Observer: 스크롤 중 요소가 화면에 들어왔을 때 등장시키는 패턴. 스크롤 위치와 효과가 계속 연동되는 방식과는 다름

[콘텐츠 카드]가 화면에 30% 들어오면 한 번만 나타나는 scroll reveal을 만들어줘. Intersection Observer로 감지하고 16px 이동과 페이드인만 써줘. 모션 감소 시 항상 보이게 해줘.

빈칸을 내 상황에 맞게 채워 사용하세요.

입력과 결과 비교

설명용 예시

입력 스크롤 애니메이션을 넣어줘.

아래 실습 영역을 스크롤하면 카드가 들어올 때 한 번 등장

활용 방식을 보여주는 예시이며, 직접 실행한 결과가 아닙니다.

스크롤에 따른 등장 시점과 재생 횟수를 정해줍니다. 패럴랙스나 스크롤에 계속 매달리는 모션을 원치 않을 때 구분해서 요청할 수 있습니다.

전문 용어를 활용해 mouseco가 작성한 문구입니다. 출처는 용어와 기법의 참고 문서입니다. 원출처 ↗

기존 가이드와 자세한 사용법 읽기

안녕하세요 mouseco 입니다. :)

Scroll reveal · Intersection Observer은 스크롤 중 요소가 화면에 들어왔을 때 등장시키는 패턴. 스크롤 위치와 효과가 계속 연동되는 방식과는 다름입니다.

막연한 요청을 구체적인 문구로

기존 요청: 스크롤 애니메이션을 넣어줘.

[콘텐츠 카드]가 화면에 30% 들어오면 한 번만 나타나는 scroll reveal을 만들어줘. Intersection Observer로 감지하고 16px 이동과 페이드인만 써줘. 모션 감소 시 항상 보이게 해줘.

아래 실습 영역을 스크롤하면 카드가 들어올 때 한 번 등장

예시는 위 기법을 보여주기 위해 직접 제작했습니다. 수치와 업무 상황은 가상이며 특정 모델의 성능 비교 결과가 아닙니다.

스크롤에 따른 등장 시점과 재생 횟수를 정해줍니다. 패럴랙스나 스크롤에 계속 매달리는 모션을 원치 않을 때 구분해서 요청할 수 있습니다.