Tạo hiêu ứng nước mưa rơi trên kính với

Front end • 02/08/2018 • 100 Lượt xem

Tạo hiệu ứng nước mưa rơi trên kính độc đáo với jquery

1. CSS

Tạo khung và thẻ < img /> với id là image

2. JQuery

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
https://cdnjs.cloudflare.com/ajax/libs/rainyday.js/0.1.2/rainyday.min.js

3. Function

function run(argument) {
  var image = document.getElementById('image');
image.onload = function() {
  var engine = new RainyDay({
    image: this,
    gravityAngle: Math.PI / 5

  });
  engine.trail = engine.TRAIL_SMUDGE;
  engine.rain([ [3, 2, 2] ], 100);
  engine.rain(
    [
        [1, 0, 20], 
        [3, 3, 1],
        [1, 2, 19]
    ],                       
    100);
 // engine.rain([ [0, 2, 200], [3, 3, 1] ], 100);
};
image.crossOrigin = 'anonymous';
image.src = 'https://images.pexels.com/photos/458785/pexels-photo-458785.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb';
}

4. Dowload - Demo

Download Full Source Code

Download Source

Demo