● 内容
① Windy は、強い風が吹いて画像が飛ばされるような
アニメーションをするスライドショーです。
② Windyが動くのは、IE10、FireFox最新版、Opera最新版
Google Chrome最新版です。
③ 実例は下記を参照してください。
Windy テスト
④ Windyは下記でダウンロードできます。
Windy Download
・ Download をクリックします。
・ 保存します。
・ zipファイルを解凍できるソフトを使って解凍してください。
⑤ ここで説明するのは、デモ２のものだけです。
⑥ 使用するファイルは、ｊｓファイルのみでＣＳＳファイルは、フリープラグインの
文字数削減のため、アメブロの自分のブログのＣＳＳへ入れます。
・下記の３ファイルを使います。
jquery.windy.js
modernizr.custom.79639.js
navi.js
⑦ 解凍した js ファイルは、アメブロがアクセスできるネット上にアップロード
する必要があります。
私の場合は Dropbox にアップロードしました。
● ブラウザ別のテスト結果
| ブラウザ名 | バージョン | テスト結果 | 備考 |
| Firefox | 最新版 | ○ | |
| IE | 7 | × | |
| IE | 8 | × | |
| IE | 9 | × | |
| IE | 10 | ○ | |
| Google Chrome | 最新版 | ○ | |
| Opera | 最新版 | ○ | |
| safari | 最新版 | ○ | 下に横線がでる |
| Sleipnir | 最新版(IE10) | ○ | 縦線が入る |
凡例： ○・・・動く ×・・・動かない
● 設置方法
変更来歴 ２０１３年７月２９日
<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery','1')</script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
変更前の場合、jQueryのライブラリが、1.7.1 のバージョンのものが
読まれるため、この Windy に必要な 1.8.2 のバージョンが読み込まれない
不具合によるもの。（Google Chromeのみの現象)
1.8の最新版を読むように変更
① フリープラグインへ下記を追加する（★はアップロードしたサイトのアドレス）
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script type="text/javascript" src="★/Windy/js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="★/Windy/js/jquery.windy.js"></script>
<script type="text/javascript" src="★/Windy/js/navi.js"></script>
・ 私の設置例
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/192658020/Windy/js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/192658020/Windy/js/jquery.windy.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/192658020/Windy/js/navi.js"></script>
② ＣＳＳへ下記を追加します
/* ---------------------------------------------------------- */
/* Windy CSS demo */
/* ---------------------------------------------------------- */
/* ---------------- */
/* ★ style2.css ★ */
/* ---------------- */
.windy-demo { /* ● 全体 */
width: 240px; /* 画像の横幅＋20px くらい */
margin: 40px auto; /* 上下の余白 */
color: #ff0000; /* 表題などの文字色 */
}
.windy-demo ul.wi-container { /* ● コンテナー */
width: 240px; /* 画像の横幅＋20px くらい */
height: 230px; /* 高さ */
box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* 影 */
}
.windy-demo li img{ /* ● 画像位置 */
margin:auto;
display: block;
padding-top:10px; /* 上に隙間 */
}
.windy-demo h4 { /* ● 画像下の文字 */
padding: 0 10px; /* 左右に余白 */
line-height: 74px; /* 文字の高さ */
margin: 0; /* マージン */
color: #333333; /* 文字色 */
text-align: center; /* 中央寄せ */
}
.windy-demo ul.wi-container:before,
.windy-demo ul.wi-container:after{
content: '';
position: absolute;
z-index: -2;
bottom: 15px;
left: 10px;
width: 50%;
height: 20%;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);/* 回転 */
-moz-transform: rotate(-3deg); /* 回転 */
-ms-transform: rotate(-3deg); /* 回転 */
-o-transform: rotate(-3deg); /* 回転 */
transform: rotate(-3deg); /* 回転 */
}
.windy-demo ul.wi-container:after {
right: 10px;
left: auto;
-webkit-transform: rotate(3deg);/* 回転 */
-moz-transform: rotate(3deg); /* 回転 */
-ms-transform: rotate(3deg); /* 回転 */
-o-transform: rotate(3deg); /* 回転 */
transform: rotate(3deg); /* 回転 */
}
.windy-demo ul.wi-container li {/* ● コンテナー */
padding: 0; /* 余白 */
border: 10px solid #DDD; /* 枠 */
-webkit-user-select: none; /* 画面上の文字を選択不可 */
-khtml-user-select: none; /* 画面上の文字を選択不可 */
-moz-user-select: none; /* 画面上の文字を選択不可 */
-ms-user-select: none; /* 画面上の文字を選択不可 */
user-select: none; /* 画面上の文字を選択不可 */
}
.windy-demo nav span:first-child {
background-position: 0 0;
}
.windy-demo nav span:active {
background-position: 100% 2px;
}
.windy-demo nav span:first-child:active {
background-position: 0 2px;
}
.windy-demo nav { /* ● ナビ 左右 HTML5 */
position: relative; /* 相対配置 */
width: 100px; /* 幅 */
margin: 0 auto;
}
.navArea{ /* ● ナビ 左右 IE7,8,9対応 */
width:100px; /* 幅 */
height:42px; /* 高さ */
margin-left:5px; /* 左余白調整 */
display:block; /* ブロック化 */
}
.navArea{ /* ● CSSハック IE8 */
margin:auto\9;
}
.windy-demo #nav-prev { /* ● ナビゲーション左(前へ) */
width: 42px; /* 幅 */
height: 42px; /* 高さ */
margin-left:0px; /* 左位置調整 */
float: left; /* 左寄せ */
background: url(http://stat001.ameba.jp/user_images/20130727/06/new-blue-777/6c/2d/p/o0083003912623887450.png) no-repeat 0% 0;/* 背景画像(左寄せ) */
text-indent: -9000px; /* インデント(画像の場合指定)*/
cursor: pointer; /* カーソル ポインター */
-webkit-user-select: none; /* 画面上の文字を選択不可 */
-khtml-user-select: none; /* 画面上の文字を選択不可 */
-moz-user-select: none; /* 画面上の文字を選択不可 */
-ms-user-select: none; /* 画面上の文字を選択不可 */
user-select: none; /* 画面上の文字を選択不可 */
}
.windy-demo #nav-next { /* ● ナビゲーション右(次へ) */
width: 42px; /* 幅 */
height: 42px; /* 高さ */
margin-right:0px; /* 右位置調整 */
float: right; /* 右寄せ */
background: url(http://stat001.ameba.jp/user_images/20130727/06/new-blue-777/6c/2d/p/o0083003912623887450.png) no-repeat 100% 0;/* 背景画像(右寄せ) */
text-indent: -9000px; /* インデント(画像の場合指定)*/
cursor: pointer; /* カーソル ポインター */
-webkit-user-select: none; /* 画面上の文字を選択不可 */
-khtml-user-select: none; /* 画面上の文字を選択不可 */
-moz-user-select: none; /* 画面上の文字を選択不可 */
-ms-user-select: none; /* 画面上の文字を選択不可 */
user-select: none; /* 画面上の文字を選択不可 */
}
/* ---------------- */
/* ★ windy.css ★ */
/* ---------------- */
ul.wi-container { /* ● コンテナーの詳細部分 */
margin: 0 auto 30px; /* マージン */
position: relative; /* 相対配置 */
padding: 0; /* 内側余白 */
list-style-type: none; /* li リスト表示なし */
-webkit-perspective: 1400px;/* 3D変形の奥行きの深さ */
-moz-perspective: 1400px;/* 3D変形の奥行きの深さ */
-ms-perspective: 1400px;/* 3D変形の奥行きの深さ */
-o-perspective: 1400px;/* 3D変形の奥行きの深さ */
perspective: 1400px;/* 3D変形の奥行きの深さ */
}
ul.wi-container li { /* ● コンテナーの詳細部分 */
width: 100%; /* 幅 */
height: 100%; /* 高さ */
display: none; /* 表示しない */
margin: 0; /* マージン */
position: absolute; /* 絶対配置 */
top: 0; /* 位置(上) */
left: 0; /* 位置(左) */
background: #ffffff; /* 背景色 */
padding: 20px; /* 内側余白 */
pointer-events: auto; /* 現在位置のリンク */
}
ul.wi-container li.wi-move { /* ● 移動のtransision */
pointer-events: none;
-webkit-transition: -webkit-transform 600ms ease, opacity 600ms ease, left 600ms ease, top 600ms ease;
-moz-transition: -moz-transform 600ms ease, opacity 600ms ease, left 600ms ease, top 600ms ease;
-o-transition: -o-transform 600ms ease, opacity 600ms ease, left 600ms ease, top 600ms ease;
-ms-transition: -ms-transform 600ms ease, opacity 600ms ease, left 600ms ease, top 600ms ease;
transition: transform 600ms ease, opacity 600ms ease, left 600ms ease, top 600ms ease;
}
/* --------------------- */
/* アメブロ用 Windy 対応 */
/* --------------------- */
.articleText{ /* ● 記事本文 */
overflow:visible; /* 記事の外にもWindyを表示 */
}
.skinArticleBody img{ /* ● 画像の余計なマージンを排除 */
margin:0px 0px; /* 余白なし */
}
/* ---------------------------------------------------------- */
③ 記事の書き方（フリースペースやメッセージボードも同様）
・ 記事に画像を載せます。
・ ＨＴＭＬタグを表示のタブをクリックします。
・ この状態からＨＴＭＬを下記の様に加工します。
赤い部分は追加。黄色い部分がある場合は黄色い部分を消します。
<div class="windy-demo windy-demo-2">
<ul id="wi-el" class="wi-container">
<div><li><a href="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/e5/1f/j/o0481030212623963641.jpg"><img width="220" border="0" height="138" alt="リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）" src="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/e5/1f/j/t02200138_0481030212623963641.jpg" /></a>
</li>
<li><a href="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/a8/d2/j/o0481031012623963640.jpg"><img width="220" border="0" height="142" alt="リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）" src="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/a8/d2/j/t02200142_0481031012623963640.jpg" /></a>
</li>
<li><a href="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/a3/50/j/o0481031812623963408.jpg"><img width="220" border="0" height="145" alt="リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）" src="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/a3/50/j/t02200145_0481031812623963408.jpg" /></a>
</li>
</div>
</ul>
<nav>
<span class="navArea">
<span id="nav-prev">prev</span>
<span id="nav-next">next</span>
</span>
</nav>
</div>
・ 画像下に説明を入れたい場合は、更に下記の様にします。
赤字部分の追加
<div class="windy-demo windy-demo-2">
<ul id="wi-el" class="wi-container">
<li><a href="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/e5/1f/j/o0481030212623963641.jpg"><img width="220" border="0" height="138" alt="リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）" src="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/e5/1f/j/t02200138_0481030212623963641.jpg" /></a>
<h4>説明①</h4></li>
<li><a href="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/a8/d2/j/o0481031012623963640.jpg"><img width="220" border="0" height="142" alt="リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）" src="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/a8/d2/j/t02200142_0481031012623963640.jpg" /></a>
<h4>説明②</h4></li>
<li><a href="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/a3/50/j/o0481031812623963408.jpg"><img width="220" border="0" height="145" alt="リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）" src="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/a3/50/j/t02200145_0481031812623963408.jpg" /></a>
<h4>説明③</h4></li>
</ul>
<nav>
<span class="navArea">
<span id="nav-prev">prev</span>
<span id="nav-next">next</span>
</span>
</nav>
</div>
・ 画像をクリックしても何もしたくない（画像一覧に飛ばしたくない場合）は
下記の様に黄色い部分を消します。
<div class="windy-demo windy-demo-2">
<ul id="wi-el" class="wi-container">
<li><a href="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/e5/1f/j/o0481030212623963641.jpg"><img width="220" border="0" height="138" alt="リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）" src="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/e5/1f/j/t02200138_0481030212623963641.jpg" /></a>
<h4>説明①</h4></li>
<li><a href="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/a8/d2/j/o0481031012623963640.jpg"><img width="220" border="0" height="142" alt="リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）" src="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/a8/d2/j/t02200142_0481031012623963640.jpg" /></a>
<h4>説明①</h4></li>
<li><a href="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/a3/50/j/o0481031812623963408.jpg"><img width="220" border="0" height="145" alt="リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）" src="http://stat.ameba.jp/user_images/20130727/09/new-blue-777/a3/50/j/t02200145_0481031812623963408.jpg" /></a>
<h4>説明①</h4></li>
</ul>
<nav>
<span class="navArea">
<span id="nav-prev">prev</span>
<span id="nav-next">next</span>
</span>
</nav>
</div>