みずみずしいアニメーション 3

プレビュー

簡易解説

雨が降っているかのようなエフェクトを表現するコードです。

コードの紹介

html

<div class="rippleBackground jsRippleBackground"></div>

CSS

.rippleBackground {
  width: 400px;
  height: 300px;
  background-image: url(https://picsum.photos/id/89/400/300);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;


  max-width: 100vw;
  max-height: 100vh;
}

JavaScript(bodyの閉じタグの前に記載するコード)

<script
  src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
  integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
  crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.ripples@0.6.3/dist/jquery.ripples.min.js"></script>
<script>
  $(".jsRippleBackground").ripples({
    resolution: 512,
    dropRadius: 10,
    perturbance: 0.1,
  });

  function createRandomDrop() {
    var $el = $(".jsRippleBackground");
    var x = Math.random() * $el.outerWidth();
    var y = Math.random() * $el.outerHeight();
    var dropRadius = 10;
    var strength = 0.05 + Math.random() * 0.05;

    $el.ripples("drop", x, y, dropRadius, strength);
  }

  setInterval(createRandomDrop, 2000);
</script>