3D hareketli web-sayfası tasarımı

0
227
views

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 :

Body etiketleri arasına eklemeniz gereken bölüm.

Html :

 

 

1 oy (No Ratings Yet)
Loading...
Önceki İçerikSocial media icons
Sonraki İçerikBasit bir akordeon tasarımı
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Please enter your comment!
Please enter your name here