ホーム
みずみずしいアニメーション 2

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

プレビュー

別タブで表示する

コードの紹介

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: 2048,
    dropRadius: 5,
    perturbance: 0.05,
  });
</script>