Home > gallery

gallery Archive

スライドドアエフェクト　画像が4分割に開く

2009-09-02 (水)
animation | gallery | image | jQuery
animation | easing | image | jQuery

Create a Stunning Sliding Door Effect with jQuery

jQueryとjQuery Easing.jsを使っています。
マウスオーバーで画像が4つに割れて背景が表示されます。

Create a Stunning Sliding Door Effect with jQuery

Comments: 0
Trackbacks: 0

フォーカスした以外の要素の透明度を変える

2009-08-31 (月)
animation | gallery | image | jQuery
fadeTo | image | jQuery | opacity

フォーカスしていない要素の透明度を変える。

上記サンプルのhtmlは、

<ul class="fade">
<li><a href="#"><img src="img/01.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/02.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/03.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/04.jpg" alt="" /></a></li>
</ul>

普通に画像を並べる。

ここでは、クラス名 fadeをつけました。

あとは、jQueryを読み込み

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function() {
 $('.fade').children().hover(function() {
 $(this).siblings().stop().fadeTo(500,0.5);
 }, function() {
 $(this).siblings().stop().fadeTo(500,1);
 });
});
</script>

このように書くと、上記サンプルのようにフォーカスされていない要素の透明度が変わります。
fadeTo(ミリ秒,透明度);
なので、数値を変えると変化する秒数、透明度を変えることが出来ます。