Mosaic.js

Mouse resimlerin üzerine geldiği  anda çerçeve içindeki elementlere değişik animasyonlar uygulayan çok güzel bir çalışma. Çoğu yerde gördüğünüz  tarzda bir örnektir bu. Bazı sitelerde mouse resmin üzerine gelince başlıklar ve açıklamalar kayar, bazılarında resimler kayar yada resim sayfasına gitmek için tıklamanız gereken mercek ikonu çıkar. jQuery Mosaic adlı eklenti sayesinde bu tarz örneklerin hepsini bir arada kullanabilirsiniz. Kayan resim, başlık, açıklama, aşağı inen resim, yukarı çıkan resim, arkasında açıklama gizli olan resim gibi türlü türlü örnekleri çok kolay bir şekilde hazırlayabilirsiniz. Hatta kendiniz de biraz değiştirerek bu tarz daha çok hover örnekleri yapabilirsiniz.

 Kullanım

• Head etiketleri arasına eklemeniz geren bölümler.

Js ve css dosyasının url adresleri :

<link rel="stylesheet" href="css/mosaic.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/mosaic.1.0.1.js"></script>

JavaScript :

(Bu bölümde  her sınıf için farklı ayarlama yaplımış. Circle, fade, bar, bar2 vs… )

		<script type="text/javascript">  

			jQuery(function($){

				$('.circle').mosaic({
					opacity		:	0.8			//Opacity for overlay (0-1)
				});

				$('.fade').mosaic();

				$('.bar').mosaic({
					animation	:	'slide'		//fade or slide
				});

				$('.bar2').mosaic({
					animation	:	'slide'		//fade or slide
				});

				$('.bar3').mosaic({
					animation	:	'slide',	//fade or slide
					anchor_y	:	'top'		//Vertical anchor position
				});

				$('.cover').mosaic({
					animation	:	'slide',	//fade or slide
					hover_x		:	'400px'		//Horizontal position on hover
				});

				$('.cover2').mosaic({
					animation	:	'slide',	//fade or slide
					anchor_y	:	'top',		//Vertical anchor position
					hover_y		:	'80px'		//Vertical position on hover
				});

				$('.cover3').mosaic({
					animation	:	'slide',	//fade or slide
					hover_x		:	'400px',	//Horizontal position on hover
					hover_y		:	'300px'		//Vertical position on hover
				});

		    });

		</script>

Css :

		<style type="text/css">

			/*Demo Styles*/
			body{ background:#e9e8e4 url('img/bg-grid.png');; }
				#content{ width:845px; margin:20px auto; padding:10px 30px; }
				.clearfix{ display: block; height: 0; clear: both; visibility: hidden; }

				.details{ margin:15px 20px; }	
					h4{ font:300 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height:160%; letter-spacing:0.15em; color:#fff; text-shadow:1px 1px 0 rgb(0,0,0); }
					p{ font:300 12px 'Lucida Grande', Tahoma, Verdana, sans-serif; color:#aaa; text-shadow:1px 1px 0 rgb(0,0,0);}
					a{ text-decoration:none; }

		</style>

• Body  etiketlerinin  arasına eklenmesi gereken bölüm.

Html :

	<div id="content">

		<!--Circle-->	
		<div class="mosaic-block circle">
			<a href="resim linki" class="mosaic-overlay">&nbsp;</a>
			<div class="mosaic-backdrop"><img src="resim adresi"/></div>
		</div>

		<!--Fade-->
		<div class="mosaic-block fade">
			<a href="Resim linki" target="_blank" class="mosaic-overlay">
				<div class="details">
					<h4>Mighty Social Icons</h4>
					<p>By Build Internet</p>
				</div>
			</a>
			<div class="mosaic-backdrop"><img src="resim adresi"/></div>
		</div>
</div>

Yukarıdaki html kod içerisinde  sadece circle  ve fade örneğinin kodlarını verdim. Nasıl olsa indireceğiniz  dosya  içerisinde  bütün örnekler  hazır kurulu bulunuyor.

Bunu anlatmak ne kadar iyi  bilmiyorum ama eminim birilerinin işine yarayacaktır mutlaka. Aşağıdaki  resimlerde  html ve javascript  içinde bulunan circle  ve fade  sınıflarını kırmızı ile boyadım. Javascript ve html içinde sınıfları eşleştirmeniz gerekiyor. Hiçbirşey bilmiyorsanız  bile kopyala yapıştır  yöntemi ile  de olsa  örnekleri çoğaltabilirsiniz bu şekilde  yada  farklı sınıf isimleri  vererek farklı  örnekler oluşturabilirsiniz.

Html : 

JavaScript :