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

By

Nautilus

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>

 



Leave a Comment

Your email address will not be published.

You may also like

Trend