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

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

プレビュー

別タブで表示する

コードの紹介

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: 20,
    perturbance: 0.04,
  });
</script>