parallax

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="http://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 &gt;&gt;</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">&lt;&lt; Sekme 1</a></li>
                <li class="next"><a href="#vol3">Sekme 3 &gt;&gt;</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">&lt;&lt; Sekme 2</a></li>
            <ul>
        <!-- / #vol3 --></section>
	</div>

<!-- / #container --></div>

 

 


Ali senin düşüncelerini merak ediyor. Bir yorum yaz