画像にフィルタをかけたような効果を加えるjQuery

マウスを乗せると白いフィルタがなくなり鮮明な画像が出る
ギャラリーなどに使えそうなjQueryプラグインです。導入も簡単です。

画像にフィルタをかけたような効果を加えるjQuery


マウスを載せるとふわぁっとフィルタがとれて、鮮明な画像が出てきますね。リンク先を強調したいときなどにはおすすめですね。

head部 サンプル

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

			$(document).ready(function() {

				$('.menu li a').click(function() {

					$('.menu li').removeClass('selected');
					$(this).parent('li').addClass('selected');

					thisItem 	= $(this).attr('rel');

					if(thisItem != "all") {

						$('.item li[rel='+thisItem+']').stop()
																.animate({'width' : '110px',
																			 'opacity' : 1,
																			 'marginRight' : '.5em',
																			 'marginLeft' : '.5em'
																			});

						$('.item li[rel!='+thisItem+']').stop()
																.animate({'width' : 0,
																			 'opacity' : 0,
																			 'marginRight' : 0,
																			 'marginLeft' : 0
																			});
					} else {

						$('.item li').stop()
										.animate({'opacity' : 1,
													 'width' : '110px',
													 'marginRight' : '.5em',
													 'marginLeft' : '.5em'
													});
					}
				})

				$('.item li img').animate({'opacity' : 0.5}).hover(function() {
					$(this).animate({'opacity' : 1});
				}, function() {
					$(this).animate({'opacity' : 0.5});
				});

			});

		</script>

HTML部 サンプル

<div id="container">

	<ul class="item">
		<li rel="jquery"><a href="http://www.htmldrive.net/items/show/223/Nice-Menu-CSS-Animation-jQuery-Animate.html"><img src="images/button.jpg" /></a></li>
		<li rel="jquery"><a href="http://www.htmldrive.net/items/show/180/jQuery-Flipping-Menu-Tutorial-using-backgroundPosition-Plugin.html"><img src="images/codesnippet.jpg" /></a></li>
		<li rel="css"><a href="http://www.htmldrive.net/items/show/197/CSS3-Styled-jQuery-Dropdown.html"><img src="images/css.jpg" /></a></li>
		<li rel="css"><a href="http://www.htmldrive.net/items/show/192/Rotated-navigation-CSS3.html"><img src="images/css2.jpg" /></a></li>
		<li rel="psd"><a href="http://www.htmldrive.net/items/show/164/iPhone-Style-Radio-and-Checkbox-Switches-using-jQuery-and-CSS.html"><img src="images/psd.jpg" /></a></li>
		<li rel="jquery"><a href="http://www.htmldrive.net/items/show/15/Html5-canvas-loading-animation-effect.html"><img src="images/groovershark.jpg" /></a></li>
		<li rel="css"><a href="http://www.htmldrive.net/items/show/222/Stylize-Input-Element-Using-CSS3.html"><img src="images/stylize.jpg" /></a></li>
		<li rel="psd"><a href="http://www.htmldrive.net/items/show/55/Neon-Text-Effect-With-jQuery-CSS.html"><img src="images/psd2.jpg" /></a></li>
	</ul>

</div>

CSS部 サンプル

#container {
	margin: 5% auto 0 auto;
	display: block;
	width: 600px;
}

ul.item li {
	list-style-type: none;
	display: block;
	float: left;
	margin: 0em;
}

	ul.item li img {
		border: 5px solid #fff;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: 0px 0px 5px #ac987e;
		-moz-box-shadow: 0px 0px 5px #ac987e;
		box-shadow: 0px 0px 0px #ac987e;
	}

a, a:visited {
	color: #161616;
	text-decoration: none;
}

一言

よくある効果ですが、面倒くさいのでやらずじまい・・・みたいになっていませんか?実は私はそんなことが結構多かったりします。でも重い腰を上げてやってみればその良さがわかります。何事もやってみることが大切ですね。

rss登録 rss登録 rss登録

コメント

コメントをお寄せください。

コメントの投稿

コメントフィード コメントフィード

トラックバックURL: http://select.rash.jp/jquery/450/trackback/