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>