평균 스택 응용 프로그램에 애니메이션을 추가하는 방법

Question

MEAN 스택을 사용하여 웹 사이트를 디자인하고 있지만 MEAN 스택을 사용하여 웹 응용 프로그램을 개발하는 방법을 안내하는 수많은 자습서가 있지만 무엇이 최선인지 모르겠습니다. 응용 프로그램에 애니메이션을 추가하는 방법. 특히 모든 애니메이션을 CSS에 넣고 html 템플릿에서 해당 클래스를 참조해야합니다. HTML5 캔버스를 사용하여 고급 애니메이션 기능을 추가하는 방법은 무엇입니까? 프로젝트의 어느 부분에 앉아 있습니까? MEAN 응용 프로그램에 애니메이션을 추가하는 가장 일반적이고 가장 깨끗한 방법은 무엇입니까?

EDIT : 구체적으로 구현하고자하는 것은 리본 선물이 왼쪽에 매달려 선물로 포장 된 상자 선물의 이미지입니다. 이제 저는 어린 소년/소녀가 리본을 왼쪽에서 오른쪽으로 끌고 선물을 풀기를 원합니다. MEAN 스택에 잘 맞는이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

Answer 1

이것은 매우 광범위한 질문입니다. 그것은 어떤 종류의 애니메이션을 성취하기를 희망 하는가에 전적으로 달려 있습니다.

는 그럼에도 불구하고, 여기에 경험을 바탕으로 내가 좋아하는 라이브러리의 몇 가지 :

AOS (스크롤에 애니메이션) -

그것은에서 HTML 요소를 애니메이션 순수 CSS3 기반의 애니메이션 라이브러리입니다 많은 유용한 방법.

데모 : http://michalsnik.github.io/aos/

코드 : https://github.com/michalsnik/aos

구현는 : 당신은 당신의 프로젝트에서 사용하기 위해 설치하는 패키지 관리자 (NPM 또는 정자)를 사용할 수 있습니다. 또는 소스 코드를 직접 다운로드하십시오.

스파크 스크롤 - 또한 뷰 포트 가시성을 기반으로 스크롤 기반의 애니메이션뿐만 아니라 애니메이션을 처리

자바 스크립트 라이브러리입니다. 매우 강력하며 뷰로 스크롤 할 때 HTML 요소에 경계를 그리거나 뷰포트 가시성 (예 : 불투명도)을 기반으로 스타일 변경을 트리거하는 등의 작업을 수행하는 데 사용할 수 있습니다. 또한, 매우 사용자 정의 할 수 있습니다.

데모 :http://gilbox.github.io/spark-scroll/demo/

코드 :https://github.com/gilbox/spark-scroll

구현 :

불행하게도,이 라이브러리에 대한 기본 자바 스크립트 구현이 없습니다. Spark Scroll을 사용하려면 ReactJS (Facebook) 또는 Angular (Google) 중 하나를 사용해야합니다.

,

마지막으로

WOW.js -

많은 다른 애니메이션을 처리하는 또 다른 Javascript 라이브러리입니다.

데모 :http://mynameismatthieu.com/WOW/

코드 :https://github.com/matthieua/WOW

구현 :http://mynameismatthieu.com/WOW/docs.html

솔직히, 난 당신이 게시물을 편집하고 정확하게 당신이 달성하려고하는지 확인하는 것이 좋습니다. 내가 제공 한 자료로 몇 가지 연구를 수행하고 구현하려는 애니메이션을 결정한 후에이 대답을 업데이트 할 것입니다.