가능세계

이번 포스팅에서는 텍스트가 부드럽게 순차적으로 등장하는 웨이브 애니메이션을 만들 것입니다. 시작해볼까요? HTML은 간단하게 Reveal Animation CSS 스타일링을 작성해요 우선 wave 요소에 overflow를 hidden으로 주어서 넘치는 부분이 잘리도록 만듭니다. .wave { word-spacing: 2px; overflow: hidden; } @keyframes 키워드를 사용해 reveal 애니메이션을 정의합니다. 텍스트가 아래에서 위로 시작되도록 0% 단계에서 translateY를 100%로 지정합니다. 그리고 100% 단계에서 값을 0으로 변경하여 원래 위치로 돌려놓습니다. @keyframes reveal { 0% { transform: translateY(100%); } 100% ..

이번 포스팅에서는 아래에서 위로 등장하는 텍스트 애니메이션을 구현해봅시다. 처음에는 HTML과 CSS만으로 애니메이션을 만들고, 이후에 자바스크립트를 사용해서 스크롤에 반응하도록 만들어볼 것입니다. 예제를 살펴볼까요? HTML은 간단합니다 Reveal Animation CSS 스타일링을 해봅시다 우선 content 요소에 overflow를 hidden으로 주어서 넘치는 부분이 잘리도록 만듭니다. .content { word-spacing: 2px; overflow: hidden; } @keyframes 키워드를 사용해 reveal 애니메이션을 정의합니다. 처음에는 translateY를 100%로 주어 letter 요소가 아래에서 시작되도록 만들 것입니다. 그리고 100%가 됐을 때 0으로 변경하여 원래 ..

이번 포스팅에서는 지정된 숫자까지 숫자가 증가하는 애니메이션을 구현해봅시다. 간단한 JavaScript로 만들 수 있습니다. 뒤에서는 스크롤에 따라 카운트 업 애니메이션이 재생되는 응용도 해볼 것입니다. HTML부터 시작해봅시다 사용자 정의 data-* 속성을 사용해 HTML 요소에 데이터를 저장해둡니다. 이렇게 하면 자바스크립트에서 해당 데이터에 접근할 수 있습니다. 자바스크립트를 추가해볼까요 먼저 counter의 값을 0으로 초기화합니다. targetNum 변수는 목표 숫자입니다. getAttribute() 메서드를 사용해 해당 요소에 저장된 data-target 속성의 값을 가져옵니다. 이때 +를 달아주어 정수로 파싱합니다. const counters = document.querySelectorAl..

스크롤에 따라 요소가 부드럽게 등장하는 애니메이션을 본적이 있으신가요? 이번 포스팅에서 자바스크립트로 스크롤 애니메이션을 구현해봅시다. 우선 HTML 마크업을 작성합시다 Hello, There! Aspernatur, blanditiis consequatur! Accusamus nulla omnis maxime ea praesentium, magni, vel, molestias ducimus quibusdam voluptatibus qui corporis debitis repudiandae rerum voluptatum quod. Odit illum asperiores consequuntur iusto consectetur, cum voluptas! Quas asperiores, atque pariatur..