16/2/15

snabbt.js - Tạo DOM/Text animation đơn giản

Từ khi HTML5 xuất hiện, việc sử dụng JavaScript và CSS3 để tạo Animate đã trở thành phổ biến. Tạo Animate có rất nhiều dạng, phức tạp thì cần phải sử dụng hoạt cảnh, đơn giản thì chỉ là các thao tác với DOM/Text.

Hôm nay, mình xin giới thiệu việc tạo Animate đơn giản sử dụng snabbt.js. Khi click hoặc rê chuột thì sẽ tạo ra Animate đơn giản.

Cách sử dụng snabbt.js





サンプルです。クリックでアニメーションします。
Ví dụ: Animate khi click.




もうちょっと高度なアニメーション。こちらはDOM操作です。
Animate hơi khó một chút, thao tác với DOM (HTML)

Nếu sử dụng snabbt.js thì không cẩn phải sử dụng các hình hoạt cảnh mà vẫn có thể tạo được những chuyển động với thao tác của người dùng. Có thể sử dụng với jQuery hoặc độc lập. Ví dụ sau không sử dụng jQuery.
snabbt(element, {
  position: [100, 0, 0],
  rotation: [Math.PI, 0, 0],
  duration: 1000,
  delay: 100,
  easing: 'ease'
});
Nếu sử dụng MethodChain thì có thể tạo nhiều Animate liên tục.
snabbt(element, {
  position: [100, 0, 0],
  easing: 'ease'
}).then({
  from_rotation: [0, 0, -2*Math.PI],
  easing: 'spring',
  spring_constant: 0.2,
  spring_deaccelaration: 0.95,
});
Với snabbt.js thì việc tạo Animate không cần phải code nhiều dòng phức tạp, mà code lúc đó sẽ dễ đọc dễ hiểu hơn phải không.

snabbt.js là chương trình bằng JavaScript, mã nguồn mở dưới MIT License.

Liên kết:
snabbt.js
snabbt.js
daniel-lundin/snabbt.js

 

Tags: ,

0 nhận xét “ snabbt.js - Tạo DOM/Text animation đơn giản ”

Đăng nhận xét

Nhận Tin

Đăng ký nhận tin

© 2015 @IT . All rights reserved.
Designed by SpicyTricks