Nautilus.js – Png arkasında hareket eden balıklar

Alvaro Montoro tarafından jQuery için geliştirilmiş bir  eklenti. Eklenti orta kısmı  yazı olarak kesilmiş bir  resmin arka planında  bir  akvaryum görüntüsü  sağlıyor. Hareketli  sular hareketli balıklar adeta  3D  gibi.

Kullanım

• Head  etiketleri arasına eklenecek olan bölümler.

jQuery ve eklenti url  adresleri :

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

Css :

<style type="text/css">
		html, body {
			background-color: #ccc;
		}
		#verne {
			top: 100px;
			left: 100px;
		}
		.sub_ctrl {
			position: absolute;
		}
		.ctrlUp {
			top:30px;
			left:40px;
		}
		.ctrlDown {
			top:60px;
			left:40px;
		}
		.ctrlLeft {
			top:45px;
			left:5px;
		}
		.ctrlRight {
			top:45px;
			right:5px;
		}
		</style>

JavaScript : 

<script type="text/javascript">
			$(document).ready(function() {
				$("#verne").nautilus({
					controls:true,
					color: '#ffffff',
					controlsWidth:100,
					controlsType: 'image',
					controlsUp: "up.jpg",
					controlsDown: "down.jpg",
					controlsLeft: "left.jpg",
					controlsRight: "right.jpg",
				});
			});
</script>

• Body etiketleri arasına eklenecek olan kısım.

Html :

<div id="verne">
			<img src="alvaro.png" class="window" style="width:500px;height:200px;" />
			<img src="waves2.png" class="waves"  style="width:1000px;height:300px;top:40px;" />
			<img src="waves1.png" class="waves"  style="width:1000px;height:300px;top:30px;" />
			<img src="layer1.png" style="width:700px;height:1000px;" />
			<img src="layer2.png" style="width:700px;height:1000px;" />
			<img src="layer3.png" style="width:700px;height:1000px;" />
			<img src="layer4.png" class="moves"  style="width:200px;height:150px;top:300px;" />
			<img src="fondo.jpg"  class="back"   style="width:700px;height:1000px;"/>
</div>