jQuery/WebGL_Ripples
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2024
ソーシャルデザイン演習/2024
情報デザイン論/2024
情報デザイン演習IIA/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*jQuery Ripples
WebGLによる波紋の演出 [[DEMO>https://design.kyusan-u.ac....
~
背景画像に波紋をつくる jQuery WebGL Ripples の導入方法を...
~
***準備
-1)ファイルセットのダウンロード
https://sirxemic.github.io/jquery.ripples/ からDLして下...
その中で必要なのは '' jquery.ripples-min.js'' のみです。
あと、当然ですが ''jQuery'' が必要です。
-2) 構成ファイルの確認
--index.html (動作確認用)
--css(フォルダ)/ ''style.css''
--js (フォルダ)/ jquery-xxxxx.min.js jquery.ripples-m...
--images(フォルダ)/ sample.jpg
-3) index.html、style.css,、sample.jsの3つについて、それ...
&color(red){ローカルブラウズ( file:// )では正常動作しない...
~
***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%;
}
-bodyの中央にmainが配置されるようにしています。
-body と main それぞれに、背景画像を設定しています。
~
***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);
~
-前半は、body と main に波紋のパラメータを設定しています。
bodyは反応しませんが、中央 main 領域は、マウスオーバーや...
-後半は、body に一定時間ごとに波紋を発生させるための記述...
-resolution は波紋の解像度で、数値が大きいほど滑らかにな...
-Radius は半径、perturbanceは摂動(波紋が生み出すブレ)を意...
~
~
終了行:
*jQuery Ripples
WebGLによる波紋の演出 [[DEMO>https://design.kyusan-u.ac....
~
背景画像に波紋をつくる jQuery WebGL Ripples の導入方法を...
~
***準備
-1)ファイルセットのダウンロード
https://sirxemic.github.io/jquery.ripples/ からDLして下...
その中で必要なのは '' jquery.ripples-min.js'' のみです。
あと、当然ですが ''jQuery'' が必要です。
-2) 構成ファイルの確認
--index.html (動作確認用)
--css(フォルダ)/ ''style.css''
--js (フォルダ)/ jquery-xxxxx.min.js jquery.ripples-m...
--images(フォルダ)/ sample.jpg
-3) index.html、style.css,、sample.jsの3つについて、それ...
&color(red){ローカルブラウズ( file:// )では正常動作しない...
~
***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%;
}
-bodyの中央にmainが配置されるようにしています。
-body と main それぞれに、背景画像を設定しています。
~
***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);
~
-前半は、body と main に波紋のパラメータを設定しています。
bodyは反応しませんが、中央 main 領域は、マウスオーバーや...
-後半は、body に一定時間ごとに波紋を発生させるための記述...
-resolution は波紋の解像度で、数値が大きいほど滑らかにな...
-Radius は半径、perturbanceは摂動(波紋が生み出すブレ)を意...
~
~
ページ名: