Vue 애니메이션으로 당신의 힘을 발휘하세요

Mar 12 2023
.
Vue 애니메이션: 마법을 풀고 창의력을 발휘하세요
CSS 및 VUE 클래스로 페이드 애니메이션 코드
페이드 애니메이션 결과 GIF 형식
transition 및 v-bind 클래스를 사용하여 요소에 애니메이션을 적용합니다.
GIF 형식의 v-bind 클래스 결과를 사용하여 요소에 애니메이션 적용
GIF 형식의 시끄러운 이미지 셰이더 PreBuilt 구성 요소 결과
  1. :disp-coef이미지의 변위 효과를 제어합니다.
  2. :noise-coef이미지에 적용되는 노이즈의 양을 제어합니다.
  3. :time-coef이미지에 적용된 노이즈 텍스처의 시간 요소에 영향을 미치는 계수
  4. :z-coef이미지에 적용된 노이즈 텍스쳐의 z축 변위에 영향을 미치는 계수
  5. 또한 @pointerOver및 @pointerLeave이벤트를 사용하여 사용자가 이미지와 상호 작용할 때 다양한 애니메이션 상태를 트리거했습니다.
Trois.js 코드를 사용한 3D 장면, 모달
GIF 형식의 Trois.js를 사용한 3D 장면
  1. Gsap
  2. Trois.js
  3. 스케치패브
  4. Three.js