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

Nautilus.js

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>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-02-11 tarihinde yayınlandı,Toplam 1522 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...