fade

あまり派手なモノはありませんが、よく見かけるものばかりを2つピックアップしました。

イメージを拡大させる

CSS3を使って、ホバー時にイメージが拡大させます。 transform:scaleプロパティを使います。

↓ 出来上がりはこのような感じになります。

対応ブラウザ Google Chrome / Safari 5+/ Firefox 3+/ Opera 11+/ InternetExplorer 9+
XHTML
1
2
3
4
5
<div class="css3gallery">
<img src="image.jpg" alt="image gallery" title="image gallery" />
<img src="image2.jpg" alt="image gallery" title="image gallery" />
<img src="image.jpg" alt="image gallery" title="image gallery" />
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.gallery img{
 
/* デフォルトサイズ */
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
 
/* アニメーション */
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
 
/* opacity */  
opacity: 0.7;
margin: 0 10px 5px 0;
}
 
.gallery img:hover{
 
/* ホバーした時のサイズ */
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
 
/* box-shadow */
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
 
/* opacity */
opacity: 1;
}

画像にフェードをかける

これもよく見かけると思います。 jQueryを使って、ホバー時にフェード(霧がかかった様になる)します。

↓ 出来上がりはこのような感じになります。

右下の画像に霧がかかった様に、白っぽくなっていると思います。

対応ブラウザ Google Chrome / Safari 5+/ Firefox 3+/ Opera 11+/ InternetExplorer 9+

ヘッダー部分に

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
/* 1つ目 */   
$('.selectorClass').hover(
function(){
$(this).stop().fadeTo('slow',0.4);//スピードと透過度
},
function(){
$(this).stop().fadeTo('slow',1);
});
/* 2つ目 */
$('.selectorClass2').mouseenter(function(){
$(this).stop().fadeTo('slow',0.4);
}).mouseleave(function(){
$(this).stop().fadeTo('slow',1);
});
 
/* 3つ目 */
$('.selectorClass3').hover(function(){
this.check = this.check || 1;
$(this).stop().fadeTo('slow',this.check++%2==0 ? 1 : 0.4);
});
 
});
</script>

スピードは、「slow」と「fast」があります。サッと切り替えたい場合は、「fast」にしてください。

透過部分も、数値が「1」になるにつれてくっきり見えてきます。

設置したい場所に以下を記述します。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="demo">
<div class="selectorClass">
<img src="image.jpg" alt="image gallery" title="image gallery" />
</div></div>
 
<div class="demo">
<div class="selectorClass2">
<img src="image2.jpg" alt="image gallery" title="image gallery" />
</div></div>
 
 
<div class="demo">
<div class="selectorClass3">
<img src="image2.jpg" alt="image gallery" title="image gallery" />
</div></div>
 
<div class="demo">
<div class="selectorClass">
<img src="image.jpg" alt="image gallery" title="image gallery" />
</div></div>

画像に関するエフェクトは、かなりいろいろな方法があります。 やはりパッと目につくのでひと工夫しておきたいところではありますね。

ADVERTISEMENT

Author:

Share this

気に入っていただけましたらこちらから各ソーシャルサービスへシェアーをお願いします

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る