Ali @mintik
11 Şubat 2021 0:24

0

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.

Download

Demo

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>