LucciSan

Trang chủ
Source

Hiệu ứng Hoa anh đào rơi

2

Mô tả:

Đây là phiên bản JS vani của plugin jQuery Sakura áp dụng hiệu ứng cánh hoa sakura hoạt hình mượt mà nhanh chóng bằng cách sử dụng hoạt ảnh CSS và REQUESTAnimationFrame API.

Cách sử dụng:

1. Đầu tiên hãy tải file bên dưới về và đưa nó lên host của bạn. Vào phần header chèn thêm 2 đoạn mã sau:
<link rel="stylesheet" href="dist/sakura.css" />
<script src="dist/sakura.js"></script>
Áp dụng hiệu ứng cánh hoa anh đào rơi xuống cho một phần tử container bạn chỉ định. 
var sakura = new Sakura('body', {
    // options here
});
Tùy chỉnh màu sắc của cánh hoa anh đào. 

var sakura = new Sakura('body', {
    colors: [
      {
        gradientColorStart: 'rgba(255, 183, 197, 0.9)',
        gradientColorEnd: 'rgba(255, 197, 208, 0.9)',
        gradientColorDegree: 120,
      },
      {
        gradientColorStart: 'rgba(255,189,189)',
        gradientColorEnd: 'rgba(227,170,181)',
        gradientColorDegree: 120,
      },
      {
        gradientColorStart: 'rgba(212,152,163)',
        gradientColorEnd: 'rgba(242,185,196)',
        gradientColorDegree: 120,
      },
    ]
});
Chỉ định độ trễ giữa các cánh hoa anh đào. Mặc định: 300(ms). 
var sakura = new Sakura('body', {
    delay: 200
});
Tùy chỉnh tốc độ hoạt hình. Mặc định: 1 (>1 thì chậm hơn). 
var sakura = new Sakura('body', {
    fallSpeed: 2
});
Cài đặt kích thước tối thiểu/tối đa của cánh hoa anh đào. 
 var sakura = new Sakura('body', {
    maxSize: 14,
    minSize: 10
});
Bắt đầu/dừng hiệu ứng. 
// stops the effect
sakura.stop(true);

// stops the effect and removes the petals from the DOM
sakura.stop();

// starts the effect
sakura.start();

Demo & Download

Download Demo