Share Điều khiển ảnh động GIF bằng thư viện Freezeframe.js

[filiallion]

Language

Tiếng Việt

Sử dụng ảnh động GIF để tạo các hoạt cảnh đôi khi cũng cần thiết thay vì phải sử dụng video với dung lượng lớn. Những hướng dẫn chỉ với vài thao tác thì việc sử dụng ảnh GIF sẽ tốt hơn so với quay video. Tuy nhiên, việc sử dụng ảnh GIF có một bất cập đó chính là các bạn không thể điều khiển các khung hình, ví dụ như tạm dừng chẳng hạn. Bài viết này tôi sẽ giới thiệu với các bạn thư viện Freezeframe.js để bổ sung thêm các điều khiển ảnh động GIF, giúp nó được sử dụng giống như một video.

Các bạn tải thư viện Freezeframe.js bằng dòng lệnh NPM sau:

npm install freezeframe

Hoặc tải tại địa chỉ https://github.com/ctrl-freaks/freezeframe.js/tree/master/packages/freezeframe.

Sau khi tải về thành công, các bạn tích hợp vào website với dòng mã lệnh HTML như sau:

<script src="path/to/freezeframe.min.js"></script>

Bây giờ, các bạn tạo các khung ảnh động như ví dụ sau:

<div class="freezeframe">
    <img src="path/to/image-1.gif">
    <img src="path/to/image-2.gif">
    <img src="path/to/image-3.gif">
</div>

Tiếp theo là cài đặt thư viện Freezeframe.js như sau:

var freezeframe = new Freezeframe('.freezeframe');

Các bạn có thể tìm hiểu thêm về thư viện Freezeframe.js tại địa chỉ https://github.com/ctrl-freaks/freezeframe.js.