jQuery ile Kaydırma Çubuğu Seviyesi Barı

scroll-progressÖzellikle uzun yazıları barındıran blog sitelerinde kullanıcıya makalenin hangi aşamasında olduğunu göstermek faydalı olabilir. Böylece web sayfanızın kullanıcı etkileşimini de güçlendirebilirsiniz.

Bu makalemizde Brett Smith tarafından hazırlanmış, ekran aşağı scroll edildikçe dolan ve uzun yazıların okunma seviyesini gösteren bir bar oluşturacağız.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


html5-scroll-video

Scroll ile bir ilerleyen video nasıl yapılır?

Özellikle teknoloji firmaları yeni ürünleri tanıtırken hazırladıkları web tasarımlarında HTML5‘in video oynatıcısı aracılığıyla küçük çaplı şovlar yapmakta. Siz ön katmanda ürünle ilgili detaylı bilgileri okurken alt katmanda gizli bir video yapısı kaydırma çubuğuyla eş zamanlı olarak ileri/geri ilerleyebilmekte.

Bu anlatımımız gözünüzde bir tasarım canlandırmadıysa aşağıdaki örneği görüntüleyerek işe başlayabilirsiniz. Daha sonrasında ise bu yeni teknoloji ürünü tasarımı oluşturacağız.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Sayfa açılışında div’in en altı nasıl gösterilir?

Otomatik overflow öğenin alt kısmına odaklanmaBir tasarım üzerine son sürat çalışırken karşınıza küçük bir engel çıkar ve saatlerinizin boş yere uçup gitmesine sebep olur. Bu makalenin çıkış noktası da bu minik sorunlardan birinin çözümü ile alakalı.

Web sayfanız açıldığında overflow tanımlı bir öğenizin kaydırma çubuğunun (scroll) en altta olmasını istiyorsanız doğru makaledesiniz.

Örneğin bir chat sistemi hazırladığımızı varsayalım. Yeni yazılan mesajlar bir div’in içerisine otomatik olarak ekleniyor. Yukarıdan aşağıya doğru eskiden güncele bir listeleme yapılıyor. Kullanıcılar bu chat sistemine girdiğinde o div’in en üstündeki eski mesajı değil, en alttaki güncel mesajı görüntülemeli. İşte sizlerle birlikte hazırlayacağımız JavaScript kodu da tam olarak bu işlevi görüyor. (daha&helliip;)

Devamını Oku

CSS3 ile Geçiş Efekti (Transition) Kullanarak Windows 8 Tarzında Kutucuklar Hazırlamak

Her geçen gün JavaScript pastasından bir ısırık daha alan CSS gelişimini sürdürüyor. Bu makalemde ise CSS’in öne çıkan elementlerinden olan geçişleri (transitions) konuşacağız.

Bu yeni kod sistemi sayesinde iki renk, boyut, ölçeklendirme gibi birimler arasında geçiş sağlayabiliyoruz.

Özellikle son günlerde herkesin beğenisini kazanan Windows 8 benzeri menü örnekleri de konumuzun bir parçası.

Makalemize önemli örneklerle ve incelenmesi gereken kaynaklarla devam edelim :

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku