이미지와 함께하는
라인별 애니메이션으로
더욱 풍부한 시각적
경험을 제공합니다
텍스트 특화 애니메이션
라인별 애니메이션
(Line by Line)
라인별 애니메이션은 텍스트나 요소들이 한 줄씩 순차적으로 나타나는 애니메이션으로 콘텐츠의 가독성을 높이고 사용자의 시선을 자연스럽게 유도합니다.
각 라인이 개별적으로 애니메이션되어 정보 전달의 우선순위를 명확하게 하고, 시각적 흐름을 만들어냅니다.
아래 컨트롤러로 애니메이션 지연 시간과 지속 시간을 조절하며 다양한 라인별 애니메이션 효과를 직접 경험해보세요.
ms(밀리초): 각 라인이 나타나는 시간 간격을 조절합니다. 숫자가 클수록 더 천천히 순차적으로 나타납니다.
ms(밀리초): 각 라인의 애니메이션이 완료되는 시간을 조절합니다. 숫자가 클수록 더 부드럽게 나타납니다.
화면을 내려 다양한 예시를 확인해보세요
▼기본 라인별 애니메이션
첫 번째 라인이 먼저 나타납니다
두 번째 라인이 순차적으로 나타납니다
세 번째 라인까지 자연스럽게 이어집니다 -DnDp-
대형 텍스트 라인별 애니메이션
혁신적인
웹 경험을
DnDp에서
코드 스타일 라인별 애니메이션
function createLineAnimation() {
const lines = document.querySelectorAll('.line');
lines.forEach((line, index) => {
line.style.animationDelay = `${index * 300}ms`;
});
}
그라데이션 텍스트 라인별 애니메이션
아름다운 그라데이션
라인별 효과
-DnDp-
이미지 + 텍스트 라인별 애니메이션
대형 이미지 오버레이 라인별 애니메이션
강력한
시각적
임팩트
카드 스타일 라인별 애니메이션
카드 형태의
라인별 애니메이션
효과입니다
다중 라인 텍스트 애니메이션
첫 번째 문단의 내용이 먼저 나타납니다.
두 번째 문단은 순차적으로 나타나며 내용의 흐름을 만듭니다.
세 번째 문단까지 자연스럽게 이어져 완전한 스토리를 구성합니다.
마지막 문단으로 내용을 마무리하며 사용자에게 완성된 정보를 전달합니다.