StickerJS, Intense Image JS và TwentyTwenty JS

StickerJS là thư viện Javscript cho phép tạo Sticker Effect mà không cần phụ thuộc vào jQuery hay thư viện nào khác.

Để sử dụng StickerJS ta chỉ cần thêm file sticker.min.js vào file html.

Để tạo Sticker Effect cho element, ta chỉ việc gọi hàm Sticker() với tham số tryền vào là element đó.

Sticker('.sticker')

Khi đó StickerJS sẽ tạo ra các element <div class="sticker-img"> và <dov class="sticker-shadow">, ta cần thêm css cho các element này để tạo Sticker Effect mà ta mong muốn.

// sticker awidth image
.sticker-img {
  background-image: url("image.png");
  background-color: red;
}

// sticker with color
.sticker-img {
  background-color: red;
}

// shadow 
.sticker-shadow {
  opacity: 0.6;
}

Link tham khảo: https://github.com/cmiscm/stickerjs

Source code demo: https://github.com/LeTanThanh/StickerJS

IntenseImage là thư viện Javascript độc lập cho phép hiển thị ảnh trên toàn bộ màn hình khi click vào ảnh.

Để sử dụng IntenseImage ta chỉ cần thêm file intense.js vào file html.

Gọị function Intense() và truyền vào các element cần hiển thị ảnh trên toàn màn hình khi click vào

window.onload = function() {
  var elements = document.querySelectorAll('.intense-image');
  Intense(elements);
}

Các element đó có thể là <img>

<img src="images/h1_small.jpg" class="intense-image" >

Hoặc là các loại element khác, sử dụng data-image để chỉ định hình ảnh được hiển thị khi click vào.

<div class="intense-image" data-image="images/h1_small.jpg">

Có thể sử dụng thêm data-title và data-caption để chỉ định title và caption khi ảnh được hiển thị toàn màn hình.

<img src="images/h1_small.jpg" class="intense-image"
   data-title="Beautiful fields"
   data-caption="With lots of wheaty puffs. Love those puffs.">

Link tham khảo: https://github.com/tholman/intense-images

Source code demo: https://github.com/LeTanThanh/Intense-Images

TwentyTwenty là thư viện Javascript cho phép tạo hiệu ứng so sánh giữa 2 ảnh cho trước.

TwentyTwenty được sử dụng đi kèm với jquery.event.move.

Để sử dụng TwentyTwenty ta cần thêm file jquery.event.move.js và jquery.twentytwenty.js vào file html.

Gọi function twentytwenty() cho element chưa 2 ảnh cần so sánh.

$('.twentytwenty-container').twentytwenty();

Element được gọi hàm twentytwenty() là 1 container chứa 2 ảnh cần so sánh có cấu trúc như sau:

<div class="twentytwenty-container">
    <img src="images/before.jpg" />
    <img src="images/after.jpg" />
  </div>

Ta có thể truyền thêm các tham số vào function twentytwenty():

Link tham khảo: https://github.com/zurb/twentytwenty

Source code demo: https://github.com/LeTanThanh/TwentyTwenty