Tam olarak kimin tarafından hazırlanmış bir çalışma olduğunu bilmiyorum sadece kaynak kodları içinde S-tada diye rumuz olabileceğini düşündüğüm bir kelimeden başka bir şey bulamadım. O yüzden kimin tarafından hazırlandığı hakkında pek detaylı bir bilgi veremeyeceğim.
Bu 3D parallax örneği hakkında elde edebildiğim bilgi jQuery ve Css3 geçişlerin yanında bir javacript dosyası içine eklenmiş 3 farklı eklenti bulunuyor bu yüzden bunlara topluca mixed.js adını verdim. Random generator, Akm2.SimplexNoise ve üçüncüsünün ismini malesef bulamadım. Random generatorün bulunduğu sitede zaten kayıplara karışmak üzere.
Sanırım Japonya’da düzenlenen bir yarışmayı tanıtım amaçlı hazırlanmış bir örnek ve muhtemelen bir japon tarafından hazırlanmış. Fazla kafanızı karıştırmaması açısından her bölümü lorem lipsum maskotu ile doldurdum.
Demo sayfası ilk açıldığında birinci bölüm yani tanıtım sayfası açılıyor ileriki aşamalarda açılacak olan bölümlerin her bir elementide kendi başına bağımsız olarak arka planda hareket ediyorlar. Sanırım Random Generator ile rastgele yayılma işlemini Akm2.SimplexNoise ile de 3 boyutlu işlem gerçekleşiyor. Simplex noise hakkında github üzerinden 2D ve 3D çalışmalar yapılabileceği yazıyordu.
Bu animasyon ile tek başına bir portföy sitesi oluşturabilirsiniz. Tabi kendinize göre biraz düzenleme yapmanız gerekiyor. Göstermelik olsun diye en çok kullanılan beş büyük tarayıcının png formatında ikonlarını ekledim. Png resimler ile görüntü daha güzel duruyor. Eğer normal bir resim kullanırsanız arka planda çok kötü bir görüntü ortaya çıkıyor.
Desteklediği tarayıcılar : Cherome, Safari ve Mozilla. IE10 üzerinden herhangi bir hareket görünmüyor ama parallax efektler çalışıyor gibi tek kusur sabitresim gibi durması. Operadaki sorun ise 3D efekt yok onun dışında düz bir yazı tipinde ve tıklanabilir bölümleri çalışıyor sadece.
Kullanım
Head etiketleri arasına eklemeniz gereken bölümler.
Js ve Css dosya adresleri :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript" src="mixed.js"></script> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" type="text/css" media="screen,print" href="stil.css" />
Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<nav id="navi" class="hide"> <div> <ul> <li class="logo"><a href="#qtop"><img src="img/Chrome.png" width="50" height="50" alt="" /></a></li> <li class="vol1"><a href="#vol1">Sek.1</a></li> <li class="vol2"><a href="#vol2">Sek.2</a></li> <li class="vol3"><a href="#vol3">Sek.3</a></li> </ul> </div> </nav> <div id="contents"> <section id="qtop" class="content"> <header> <h1> <img id="logo" src="img/Chrome.png" width="100" height="100" alt=""> </h1> </header> <p> Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit, sed do eiusmod<br> tempor incididunt ut labore et dolore magna aliqua? </p> <ul> <li class="vol1"><a href="#vol1">Sek.1</a></li> <li class="vol2"><a href="#vol2">Sek.2</a></li> <li class="vol3"><a href="#vol3">Sek.3</a></li> </ul> <!-- / #top --></section> <section id="vol1" class="content"> <header> <p class="label">Sek.1</p> <h1>Birinci Sekme İçeriği</h1> </header> <section> <p> Lorem ipsum dolor sit amet,<br> </p> </section> <section> <h1>Bolüm 1</h1> <p> <img src="img/Chrome.png" width="100" height="100" alt="" /> </p> </section> <section> <h1>Bölüm 2</h1> <p> <img src="img/mozilla.png" width="100" height="100" alt="" /> </p> </section> <section> <h1>Bölüm 3</h1> <ul> <li><a href="https://www.mintik.com/?p=12465" target="_blank">Mintik.com</a></li> </ul> </section> <ul class="pager"> <li class="next"><a href="#vol2">Sekme 2 >></a></li> <ul> </section> <!-- / #1. sayfa --> <section id="vol2" class="content"> <header> <p class="label">Sek.2</p> <h1>İkinci Sekme İçeriği</h1> </header> <section> <p> Lorem ipsum dolor sit amet,<br> </p> </section> <section> <h1>Bölüm 1</h1> <p> <img src="img/safari.png" width="100" height="100" alt="" /> </p> </section> <section> <h1>Bölüm 2</h1> <p> <img src="img/opera.png" width="100" height="100" alt="" /> </p> </section> <section> <h1>Bölüm 3</h1> <ul> <li><a href="https://www.mintik.com/?p=12465" target="_blank">Tutorial</a></li> </ul> </section> <ul class="pager"> <li class="prev"><a href="#vol1"><< Sekme 1</a></li> <li class="next"><a href="#vol3">Sekme 3 >></a></li> <ul> </section> <!-- / #Sekme 2 --> <section id="vol3" class="content"> <header> <p class="label">Sek.3</p> <h1>Üçüncü Sekme İçeriği</h1> </header> <section> <p> Lorem ipsum dolor sit amet,<br> </p> </section> <section> <h1>Bölüm 1</h1> <p> <img src="img/ie.png" width="100" height="100" alt="" /> </p> </section> <section> <h1>Bölüm 2</h1> <p> Lorem ipsum dolor sit amet,<br> </p> </section> <section> <h1>Bölüm 3</h1> <ul> <li><a href="https://www.mintik.com/?p=12465" target="_blank">Tutorial</a></li> </ul> </section> <ul class="pager"> <li class="prev"><a href="#vol2"><< Sekme 2</a></li> <ul> <!-- / #vol3 --></section> </div> <!-- / #container --></div>