ZooMooz.js

0
195
Görüntülenme

ZooMooz

Daha önceleri buna benzer bir JavaScript kütüphanesi paylaşmıştım sizlerle. Impress.js kütüphanesi ile jQuery kullanmadan klavye yön tuşlare ve boşluk tuşlarını kullanarak hareket eden görsel efektler kullanabiliyorsunuz. jQuery ZooMooz eklentisi de sayfa efektleri bakımından Impress ile benzer özelliklere sahip ama daha gelişmiş örnekleri de bulunuyor.

Svg formatında hazırlanmış bir ağaç düşünün ve bu ağacın her bir dalında farklı başlıklar olsun, bu başlıklara tıklandığında da yazı düz bir görünüm alıp yaklaşsın ve tekrar tıklandığında ağaç eski konumuna dönerek uzaklaşsın. Böyle uçuk bir animasyonu bile yapabilecek türden bir efektleri bulunuyor. Toplamda 3 tane demosu var ve SVG formatı sadece birincisiydi.

Svg-Tree

İkinci demosu Flickr sitesinden resimler çekebilen ve bu resimlerle sayfanın döndürülmesini sağlayan efektlere sahip. Demo sayfasında arama yapmanız için bir input alanı bulunuyor ve hemen altında da arama sonuçlarının gösterileceği bir çerçeve bulunuyor. Herhangi bir kelime yazıp enter tuşuna bastıktan sonra çerçeve yakınlaşıyor ve aradığınız kelime ile eşleşen resimler üst üste yığılmış ve her biri farklı derecede döndürülmüş bir şekilde görünüyorlar. Düz olmayan resimlere tıkladığınızda resmin kendisi düzelmiyor, pozisyonu aynı şekilde kalıyor ama herhangi bir resme tıkladığınızda web sayfası tamamen dönerek, resmin düz görünmesini sağlayıp daha da yakınlaşıyorlar. Bu da çok uçuk bir örnek. Düşünsenize resmi düzgün göstermek için bütün web sayfası dönüyor 🙂

Flickr-Stack

Üçüncü ve son örneğimiz de 3D küp şeklinde bir görünüme sahip ve her küp çerçevesi içinde tıklanılabilir dört tane başlık ve konu bulunuyor. Tıklamış olduğunuz her konu çerçevesi yakınlaşıp ekranın tam ortasında görünüyor. Tabi bu yakınlaşma sırasında da küp yerinde durmuyor o da dönüyor.   Janne Aukia gerçekten çok faydalı bir uygulama geliştirmiş. Benzerleri de pek bulunmayan bir uygulamadır. Bu yüzden kesinlikle arşivinizden eksik etmemeniz gerektiğini düşünüyorum.

3D-cube-effect

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

Js Dosya adresleri : 

  •  Flickr Demosu

Stil kodları : 

JavaScript : 

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

Html : 

  •  3D küp demosu

Stil kodları : 

JavaScript :

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

Html : 

  • Svg Demosu

Stil kodları

JavaScript :

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

Html : 

CEVAP VER

Lütfen yorumunuzu yazın.
Lütfen İsminizi bu alana yazın.