LogoMark.png

jQuery/WebGL_Ripples

jQuery Ripples

WebGLによる波紋の演出 DEMO

背景画像に波紋をつくる jQuery WebGL Ripples の導入方法を紹介します。

準備

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <script src="js/jquery-xxxxx.min.js"></script>
    <script src="js/jquery.ripples-min.js"></script>
    <script src="js/sample.js"></script>
    <link href="css/style.css" rel="stylesheet">
    <title>jQuery Ripples</title>
  </head>
  <body>
    <main>
        <h1>Sample Page</h1>
        <p>jQuery WebGL Ripples</p>
    </main>
  </body>
</html>


CSS

要点のみ記載しています

html {
  height: 100%;
}
body {
  display: flex;
  background-image: url(../images/sample01.jpg);
  background-size: cover;
  height: 100%;
}
main {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -250px;
  background-image: url(../images/sample02.jpg);
  background-size:cover;
  width: 500px;
  padding-top: 200px;
  height: 300px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  line-height: 180%;
}

JavaScript

$(function() {
  $('body').ripples({
    resolution: 512,
    dropRadius: 20, //px
    perturbance: 0.04,
    interactive: false,
  });
  $('main').ripples({
    resolution: 256,
    dropRadius: 20, //px
    perturbance: 0.04,
  });
});

setInterval(function() {
  var $obj = $('body');
  var x = Math.random() * $obj.outerWidth();
  var y = Math.random() * $obj.outerHeight();
  var dropRadius = 20;
  var strength = 0.03 + Math.random() * 0.05;
  $obj.ripples('drop', x, y, dropRadius, strength);
}, 400);


PAGES

GUIDE

DATA

Last-modified: 2020-02-02 (日) 18:08:05