logo logo

The next-generation blog, news, and magazine theme for you to start sharing your stories today!

The Blogzine

Save on Premium Membership

Get the insights report trusted by experts around the globe. Become a Member Today!

View pricing plans

New York, USA (HQ)

750 Sing Sing Rd, Horseheads, NY, 14845

Call: 469-537-2410 (Toll-free)

hello@blogzine.com
Source

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

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. …

avatar
LucciSan

Blogger


  • 03/12/2020
  • Views

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

Related post


avatar

Tôi nổi tiếng, đẹp trai, nhà nghèo, có gì không tốt chứ... :V

Chia Sẻ Với Mọi Người

Recent post