웹 사이트에 애니메이션을 시작하려면 첫 번째 단계는 HTML 문서에 animate.css 및 WOW.js를 추가하는 것입니다. HTML 프로젝트에 파일을 추가하는 방법에는 몇 가지가 있습니다. 각 공식 사이트에서 animate.css 및 WOW.js에 대한 배포판을 다운로드하거나 CDN에서 사용할 수 있는 파일에 연결하면 됩니다. CDN은 자바 스크립트및 CSS를 위한 방대한 라이브러리 컬렉션을 호스팅합니다. 아무 작업도 발생하지 않으면 Visual Studio용 GitHub 확장을 다운로드하고 다시 시도하십시오. Hover.css는 애니메이션 요소 위에 마우스를 가져가면 웹사이트에서 눈길을 끄는 효과를 얻을 수 있습니다. 이 애니메이션 라이브러리를 사용하여 단추, 로고 또는 이미지와 같은 일반적인 2D 요소에 더 많은 스펀크를 추가할 수 있습니다. Hover.css 웹 사이트에서 각 버튼 위로 마우스를 가져가서 배경, 2D, 그림자 및 개요 전환과 같은 다양한 애니메이션을 찾아보고 테스트할 수 있습니다. 하나 또는 몇 개의 Hover.css 애니메이션을 사용하려는 사용자는 파일을 다운로드하고 특정 애니메이션을 자신의 스타일 시트에 복사 / 붙여 넣을 수 있습니다. 그러나 많은 Hover.css 애니메이션을 사용하려는 경우 기본적으로 Hover.css 스타일시트를 HTML 문서에 설치하고 연결하는 동일한 절차를 따를 수 있습니다. 사이트의 적절한 HTML 요소를 애니메이션하기 위해 모든 Hover.css 효과에 액세스할 수 있습니다. WOW.js 다운로드 패키지에는 데모가 포함되어 있습니다.

npm을 통해 WOW.js를 설치하는 한 가지 이점은 자동으로 animate.css를 종속성으로 설치한다는 것입니다. 이렇게 하면 위에서 설명한 옵션 중 하나를 사용하여 animate.css를 다운로드하는 지침에 따라 걱정할 필요가 없습니다. 파일을 직접 추가하거나 CDN을 사용하는 것과 마찬가지로 animate.css는 문서의 설명에 연결됩니다 (href 경로는 파일 위치에 따라 다릅니다): 마지막 단계 : Drupal 웹 사이트의 관리 인터페이스에서 “구성 > 개발 > 성능”으로 이동하여 모든 Drupal의 캐시를 지웁니다. 아래 링크를 클릭하여 CDN에서 animate.css 및 WOW.js 파일을 볼 수 있습니다: 개발자는 지연, 길이, 오프셋, 반복, 스타일 등과 같은 다양한 애니메이션 설정을 제어할 수 있습니다. wow.js 라이브러리는 또 다른 좋은 기능을 제공합니다: Animate CSS 라이브러리만 사용하고 접힌 외부에 있는 HTML 요소에 대한 애니메이션을 설정한 경우 페이지를 아래로 스크롤하여 해당 HTML 요소를 볼 때 CSS 애니메이션이 완료되었을 수 있습니다. 애니메이션 CSS 라이브러리가 있는 wow.js 라이브러리를 사용하면 페이지를 아래로 스크롤할 때 해당 요소가 표시될 때 HTML 요소의 CSS 애니메이션이 시작됩니다. wow.js 라이브러리의 홈 페이지에서 데모를 볼 수 있습니다. WOW.js는 페이지의 요소에 CSS3 기반 애니메이션과 효과를 할당하고 해당 효과를 사용하여 로드하는 데 사용할 수 있습니다.