Flex.js

Flex uygulaması sitenizdeki çerçevelere animasyonlu grid (ızgara düzeni çerçeveler) özelliği eklemeye yarayan ve benzerlerinden çok farklı olan bir çalışmadır. Benzerleri arasındaki farkı mouse çerçevelerin üzerine geldiği anda çerçeve genişler ve içerik daha büyük bir şekilde görünür. Bu işlem sırasında diğer elemanların bulunduğu çerçeveler de orantılı olarak küçülürler ve web sitesinde herhangi bir taşma olayı gerçekleşmez.  Jason English‘in yapmış olduğu Flex eklentisini  portfolyo yada resim galerileri olarak ta kullanabilirsiniz. 

Kullanım

• Head etiketleri  arasına eklenmesi gereken bölümler.

Js dosya  adresleri : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="../jquery.flex.js"></script>

 Stil  :

	<style>
		body {background-color:#CCC;font-family:Verdana;}
		.flex {position:relative;width:850px;min-height:300px;margin:0 auto;border:0px solid red;margin-top:10px;}
		.flex a {background-color:white;display:block;width:100px;height:100px;border-radius:8px;position:absolute;background-repeat:no-repeat;background-position:center;border:3px solid white;cursor:pointer;text-align:left;text-shadow:1px 1px 20px #000;color:white;font-size:18px;font-weight:bold;text-indent:10px;line-height:30px;text-decoration:none;}
		[bg=a] {background-image:url(https://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg);}
		[bg=b] {background-image:url(https://farm9.staticflickr.com/8156/7362866426_bf285ebd45.jpg);background-size:300px auto;}
		[bg=c] {background-image:url(https://farm6.staticflickr.com/5117/7410370290_0935419fc3.jpg);}
		[bg=d] {background-image:url(https://farm8.staticflickr.com/7262/7419245080_bb752ed1d6.jpg);}
		[bg=e] {background-image:url(https://farm8.staticflickr.com/7003/6468321069_3375be3073_z.jpg);background-size:auto 280px;}
		[bg=f] {background-image:url(https://farm8.staticflickr.com/7220/7342556872_46cddaf9b0.jpg);background-size:auto 280px;}
		[bg=g] {background-image:url(https://farm9.staticflickr.com/8021/7322604950_348c535903.jpg);background-size:auto 200px;}
		[bg=h] {background-image:url(https://farm8.staticflickr.com/7076/7286717012_6e6b450243.jpg);}
		[bg=i] {background-image:url(https://farm8.staticflickr.com/7129/7452167788_a3f6aa3104.jpg);background-size:auto 200px;}
		[bg=j] {background-image:url(https://farm8.staticflickr.com/7153/6480022425_a8d419e663_z.jpg);background-size:auto 280px;}
		[bg=k] {background-image:url(https://farm8.staticflickr.com/7225/7269592732_c4b7918626.jpg);background-size:auto 280px;}
		h1, h3 {width:850px;font-weight:normal;margin:0 auto;}
		h1 {margin-top:100px;}
		h3 {color:#666;margin-top:5px;}
		p {width:850px;margin:0;padding:0;margin:0 auto;font-size:14px;color:black;margin-top:0px;margin-bottom:20px;color:#989898;}
		.marginleft {margin-left:25px;}
	</style>

 JavaScript : 

	<script type="text/javascript">
	$(function() {
	    $(".flex").flex();
	});
	</script>

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

Html : 

	<div class="flex">
		<a bg="a" style="left:0px;top:0px;width:250px;height:125px;" width="350" height="275">A</a>
		<a bg="b" style="left:260px;height:100px;top:0px;width:125px;" width="250" height="175">B</a>
		<a bg="c" style="left:395px;height:250px;top:0px;width:75px;" width="125" height="350">C</a>
		<a bg="d" style="left:480px;height:75px;top:0px;width:75px;" width="175" height="150">D</a>
		<a bg="e" style="left:565px;height:125px;top:0px;width:200px;" width="200" height="250">E</a>
		<a bg="f" style="left:480px;height:200px;top:85px;width:75px;" width="150" height="225">F</a>
		<a bg="g" style="left:0px;height:100px;top:135px;width:75px;" width="225" height="150">G</a>
		<a bg="h" style="left:260px;height:75px;top:110px;width:125px;" width="200" height="200">H</a>
		<a bg="i" style="left:85px;height:140px;top:135px;width:165px;" width="250" height="140">I</a>
		<a bg="j" style="left:565px;height:150px;top:135px;width:75px;" width="125" height="275">J</a>
		<a bg="k" style="left:650px;height:75px;top:135px;width:75px;" width="75" height="200">K</a>
	</div>