Animation5 GSAP를 이용한 텍스트 효과 GSAP를 이용한 텍스트 효과 GSAP를 이용한 텍스트 효과 예제입니다. HTML 삽입 미리보기할 수 없는 소스 2023. 12. 18. CSS를 이용한 깜빡이는 플래시 텍스트 CSS를 이용한 깜빡이는 플래시 텍스트 CSS 애니메이션을 사용하여 깜빡이는 효과를 만들려면 키프레임을 사용할 수 있습니다. 아래는 깜빡이는 글씨 효과를 주는 간단한 CSS 코드의 예시입니다. @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .blinking-text { animation: blink 1s infinite; /* 1초 간격으로 무한 반복 */ } 이 코드에서 @keyframes는 키프레임을 정의하는 부분이며, blinking-text 클래스를 가진 요소에 animation 속성을 사용하여 blink 키프레임을 1초 간격으로 무한 반복하도록 설정합니다. HTML에서는 다음과 같이 사용할 수 있습.. 2023. 11. 17. HTML/CSS/AOS 활용하여 애니메이션 그래프 만들기(bar) HTML/CSS/AOS 애니메이션 그래프(bar) HTML, CSS 및 AOS를 사용하여 움직이는 막대 그래프를 만들 수 있습니다. 간단한 막대 그래프의 예시 코드를 아래에 제공합니다. AOS라이브러리 중 data-aos 속성을 이용하여 'show' 라는 사용자 지정 이름을 추가하고, 스크롤 시 애니메이션이 실행되도록 합니다. 예제 HTML 삽입 미리보기할 수 없는 소스 2023. 11. 14. AOS 한번만 실행 AOS 한번만 실행 AOS 스크롤 애니메이션을 한번만 실행하도록 설정할 수있습니다. 설정된 경우, 애니메이션이 한 번 실행된 후에는 더 이상 실행되지 않습니다. AOS.init({ once: true, // 한 번만 애니메이션 실행 }); 예제 HTML 삽입 미리보기할 수 없는 소스 2023. 11. 14. AOS(Animate On Scroll Library) 스크롤 애니메이션 사용법 AOS 스크롤 애니메이션 사용법 AOS(Animate On Scroll)는 스크롤 이벤트에 반응하여 요소들을 애니메이션화하는 JavaScript 라이브러리입니다. 이 라이브러리는 HTML 요소에 클래스를 추가하여 간단하게 사용할 수 있습니다. 아래는 AOS를 사용하는 기본적인 방법입니다. 1. AOS 라이브러리 포함 AOS를 사용하려면 먼저 해당 라이브러리를 HTML 파일에 포함시켜야 합니다. 태그 내에서 다음과 같이 스크립트와 스타일을 추가합니다. 2. AOS 초기화 페이지가 로드될 때 AOS를 초기화해야 합니다. 이 작업은 보통 스크립트 태그를 통해 페이지의 끝에 위치한 태그 전에 수행됩니다. 3. 요소에 애니메이션 클래스 추가 애니메이션을 적용하려는 HTML 요소에 data-aos 속성을 추가합니다.. 2023. 11. 14. 이전 1 다음
