Modern Tasarımlar İçin Kullanılan Kütüphaneler

Modern Tasarımlar İçin Kullanılan Kütüphaneler

  Aralık 12, 2017    Gökhan Krl

---

Modern olarak nitelendirilen son zamanların trendi haline gelmiş çeşitli tasarımlar ister istemez çeşitli yerlerde karşımıza çıkıyor. Nette gördüğümüz bu tasarımlar bizde şu soruyu da bırakmadan gitmiyor tabi. Nasıl ?

Bir siteye giriş yapıyorsunuz ve bir de bakıyorsunuz ana sayfada kendi kendine horon tepen bir paragraf var. Aynı şekilde aşağı iniyorsunuz ve otomatik bir sayaç işliyor. Az daha iniyorsunuz ve sağdan soldan sütunlar animasyon ile önünüze geliveriyor.

Evet aslında sadece hazır temalar değil, ticari anlamda öne çıkan web sitelerinde de bu yenilikleri görmek mümkün. Sonuçta geliştirici demek yenilikleri de takip etmek demek. Bu yenilikleri de kullanıcıya sunması demek. Burada trend dedik ama aslında bir tasarımcı olarak bakacak olursak trendin adı JavaScript. Evet JS son zamanlarda öyle bir gelişim gösterdi ki bu durum GitHub gibi Git teknolojisi kullanan sitelerin adeta bir JS kütüphanesine dönmesine yol açmış durumda.

Bugün burada bu kütüphaneleri ve işlevlerini açıklayacağım. Eksik olan kütüphaneler olabilir yazıyı elimden geldiğince kısa zaman aralıklarında güncellemeye çalışacağım.

Animate.css

Animate.css 'ten başlamazsak olmaz. Son zamanlarda kullanım oranı belirli oranda düşse de halen kullanılmaya devam eden bir animasyon kütüphanesidir. Çok çeşitli efektleri resmi arayüzü üzerinden inceleyebilirsiniz.

Detaylı kullanım dökümanlarını da Github üzerinden inceleyerek uygulayabilirsiniz.


Wow.Js

Wow ise Animate.css ile birlikte çalışan bir kütüphanedir. Aslında Animate 'i anlamlandıran JS kütüphanesidir de diyebiliriz. Nette dolaşırken çeşitli web sayfalarında gördüğümüz scroll hareketi ile gösterime giren alanlar gibi, Wow.Js ile de HTML etiketi içerisinde belirttiğimiz alanlar tetiklenir ve aktif olan alan ile beraber Animasyonlar gösterime girer.

Detaylı kullanım dökümanı için Github


Sticky.Js

Bu kütüphane ile CSS 'te yaptığımız fixed işlevini otomatik olarak yapıyoruz. Ancak kütüphane olarak çok önemli farklılıkları var. Bunlardan en önemlisi JS 'nin dinamik şekilde çalışmasından dolayı kullanıcı tarafının daha iyi olmasıdır. Örneğin bir web sayfasının ortasına gelin ve tarayıcınızın yenile düğmesine basın. Eğer sabitleme işlemini CSS ile yaptıysanız elementin tekrar karşınıza gelmesi için bir scroll veya yön hareketi belirtmeniz gerekir. Sticky 'de ise sayfayı yenileseniz de sizin sayfa konumunuz otomatik olarak bilineceğinden sabit element direkt karşınıza gelecektir.

Bunların yanında efekt olarak ta Sticky, CSS kullanımından avantajlıdır. Detaylı kullanım dökümanı için Github


Loading Page ve Img

Ufak bir çalışmayla web sayfalarınıza yükleniyor simgesi ekleyebilirsiniz. Aynı zamanda web sayfanızdaki resimlere de yükleniyor ibaresi ekleyerek tasarımınızı daha gösterişli hale getirebilirsiniz. Gerekli bilgiler ve dökümanlar için burayı ziyaret edin.

Farklı loading image 'leri edinmek için https://icons8.com/preloaders/ adresinde çeşitli ücretsiz .gif 'ler edinebilirsiniz. http://loadergenerator.com/ ve https://loading.io/ adreslerinden de istediğiniz bir .gif 'i özelleştirip edinebilirsiniz.


OwlCarousel.Js

Yoğun olarak kullanımda olan bu kütüphane ile çeşitli gösterimlerle modern sliderlar üretebiliyorsunuz. Hem de çok basit HTML kodlamaları ile bu işlemler yapılabilmekte. Resmi sitesi üzerinden slider çeşitlerini inceleyebilirsiniz.

Bunlarla beraber slick.js ve react-slick olarak farklı seçenekler de mevcut. Owlcarousel.js dökümanlarına ulaşmak için Github


Typed.Js

Yine son zamanların popüler kütüphaneleri arasını girmiş olan dinamik yazı özelliği. Bu özellik ile ekranda belirlediğiniz bir yazıyı dinamik bir biçimde gösterime koyabilir, film şeridi gibi kullanıcıya yazdırarak gösterebilirsiniz.

Typed.Js dökümanları için Github


Stellar.Js

Stellar.Js ise elementlere ekranda parallax efekti vermeye yarayan bir kütüphanedir. Aynı şekilde kullanmak isteyeceğiniz en hoş özelliklerden birisi de Parallax Backgrounds özelliğidir.

Stellar.Js dökümanları için Github


Nette daha bir çok kütüphane mevcut ve halen de yeni özellikler çıkmaya devam etmekte. Bu gelişmelere bakarak, ilerleyen zamanlarda konunun bir ikincisini de yayımlayabilirim.