jQuery/Tubular
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*Tubular
YouTubeの動画を背景に [[DEMO>https://design.kyusan-u.ac....
~
ここでは jQuery Tubularというプラグインを使って実現します。
&color(red){この事例はローカルでは動作しません。サーバー...
~
***準備
-1）jQuery Tubularをダウンロード
http://www.seanmccambridge.com/tubular/ から最新版をDL...
必要なのは ''jquery.tubular.xxxx.js'' だけです。
-2）構成ファイルの確認（ファイルは以下のように構成します...
--''index.html''
--css（フォルダ） / ''style.css''
--js （フォルダ）/ jquery-xxxxx.min.js jquery.tubular.x...
注) xxxxx の部分（バージョン）は、書きかえが必要です。
~
***HTML
要点のみ記載します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="js/jquery-xxxxx.min.js"></script>
<script src="js/jquery.tubular.xxxx.js"></script>
<script src="js/sample.js"></script>
<link rel="stylesheet" href="css/style.css">
<title>Sample Page</title>
</head>
<body>
<div id="container">
：
以下省略
~
***CSS
要点のみ記載します。
*{
margin:0;
padding:0;
}
#container {
position: relative;
width: 100%;
height: 100%;
：
background-color: rgba(255,255,255,0.2);
/* 例）コンテナの背景は20%半透明 */
}
~
***JavaScript
$(function(){
$('document').ready(function() {
var options = { videoId: '動画のID'};
$('#container').tubular(options);
});
});
-動画のIDは、YouTube動画再生時のURLの v= の後の文字列で...
-$('#container').tubular(options); という記述の中の #cont...
-音の On/Off 他、[[いくつかのオプションがあります。>http:...
複数のオプションを列挙する場合は、以下のルールです。
var options = { videoId: '動画のID', mute: false, ・・};
-コントローラーの追加
以下のソースを加えるだけで、画面にコントローラーが表示さ...
<p id="video-controls" class="black-65">
Video controls:<br />
<a href="#" class="tubular-play">Play</a> |
<a href="#" class="tubular-pause">Pause</a> |
<a href="#" class="tubular-volume-up">Volume Up</a> |
<a href="#" class="tubular-volume-down">Volume Down</a...
<a href="#" class="tubular-mute">Mute</a>
</p>
~
~
終了行:
*Tubular
YouTubeの動画を背景に [[DEMO>https://design.kyusan-u.ac....
~
ここでは jQuery Tubularというプラグインを使って実現します。
&color(red){この事例はローカルでは動作しません。サーバー...
~
***準備
-1）jQuery Tubularをダウンロード
http://www.seanmccambridge.com/tubular/ から最新版をDL...
必要なのは ''jquery.tubular.xxxx.js'' だけです。
-2）構成ファイルの確認（ファイルは以下のように構成します...
--''index.html''
--css（フォルダ） / ''style.css''
--js （フォルダ）/ jquery-xxxxx.min.js jquery.tubular.x...
注) xxxxx の部分（バージョン）は、書きかえが必要です。
~
***HTML
要点のみ記載します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="js/jquery-xxxxx.min.js"></script>
<script src="js/jquery.tubular.xxxx.js"></script>
<script src="js/sample.js"></script>
<link rel="stylesheet" href="css/style.css">
<title>Sample Page</title>
</head>
<body>
<div id="container">
：
以下省略
~
***CSS
要点のみ記載します。
*{
margin:0;
padding:0;
}
#container {
position: relative;
width: 100%;
height: 100%;
：
background-color: rgba(255,255,255,0.2);
/* 例）コンテナの背景は20%半透明 */
}
~
***JavaScript
$(function(){
$('document').ready(function() {
var options = { videoId: '動画のID'};
$('#container').tubular(options);
});
});
-動画のIDは、YouTube動画再生時のURLの v= の後の文字列で...
-$('#container').tubular(options); という記述の中の #cont...
-音の On/Off 他、[[いくつかのオプションがあります。>http:...
複数のオプションを列挙する場合は、以下のルールです。
var options = { videoId: '動画のID', mute: false, ・・};
-コントローラーの追加
以下のソースを加えるだけで、画面にコントローラーが表示さ...
<p id="video-controls" class="black-65">
Video controls:<br />
<a href="#" class="tubular-play">Play</a> |
<a href="#" class="tubular-pause">Pause</a> |
<a href="#" class="tubular-volume-up">Volume Up</a> |
<a href="#" class="tubular-volume-down">Volume Down</a...
<a href="#" class="tubular-mute">Mute</a>
</p>
~
~
ページ名:
