CodePen’de Yapılmış En Etkileyici 10 Çalışma

codepen-logoAdobewordpress ailesi olarak CodePen‘i çok seviyoruz ve sık sık örneklerimizi orada oluşturuyoruz. Biz web geliştiriciler için hazırlanmış interaktif bir oyun sahası olan CodePen’de milyonlarca fikri barındırmakta. Ama bunlardan bazıları var ki yaratıcılık ve teknik bilginin birlikte tavan yaptığında ne sonuçlar doğurabileceğini bize gösteriyor.

Bugün sizler için CodePen’in en dikkat çekici 10 çalışmasını derledik. (daha&helliip;)

Devamını Oku


JavaScript Kütüphanesi ile Etkileşimli Parçacıklar

js-particlesParticles.JS, birden çok etkileşimli parçacığı oluşturan bir JavaScript kütüphanesi.

Kullanıcılarınızın ilgisini çekebilecek bu partikül yapısı birçok JavaScript kütüphanesinin aksine web sayfanızda ağır bir performans kaybına sebep olmuyor.

Örneği görüntüleyerek başlayabilirsiniz.

Ö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

Web sayfanız için en iyi Video Player hangisi?

Video PlayerOnlarca sebepten ötürü tasarımcılar web sayfalarında Video Player (oynatıcı) kullanmakta. Hazırlanmış onlarca Flash, HTML ve JavaScript ile hazırlanmış onlarca video oynatıcı kullanılmak için beklemekte.

Liste bu kadar genişken Adobewordpress olarak detaylı bir liste hazırlamaya karar verdik. Hangi oynatıcı web sayfanız için daha uygun? Seçimi size bırakıyoruz. (daha&helliip;)

Devamını Oku

Sadece CSS ile Göster/Gizle Buttonu

CSS DersleriDivlerin veya herhangi bir elemanın görünürlüğünü açıp kapatmak için JavaScript ile birkaç satır kod karalamanız gerekmekte. Fakat bu makalemizde size küçük bir sır vereceğiz.

Bildiğiniz gibi form öğesi olan checkbox‘ın işaretlenip işaretlenmediğini CSS ile denetleyebiliyoruz. Kafanızda bir ampul yandı mı? Hadi konuyu biraz detaylandıralım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

JavaScript ile Rastgele Veri

JavaScriptMerhaba arkadaşlar. Bugün JavaScript ile rastgele veri üreten bir döngü hazırlayacağız. Bu işlem için rasgele veri yayınlayan bir fonksiyon ve gösterilmesini istediğimiz kayıtları hazırlayacağız. Bunu hazırlarken Dave Rupert’ın eğlenceli örneği üzerinden gideceğiz.

Bir proje üzerine yoğun bir şekilde çalışırken sizi arayarak dışarı çağıran arkadaşlarınız artık sorun değil. Mazeret üretici hizmetinizde !

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

jQuery ile Minimum ve Maksimum Karakter Limitli Form Oluşturalım

Karakter LimitiMerhaba arkadaşlar.

Bu makalemde içerisinde maksimum ve minimum karakter limiti barındıran bir form öğesi hazırlayacağız. Böylece oluşturduğumuz form alanlarına ziyaretçilerin minimum ve maksimum kaç karakter girebileceğini belirleyebileceğiz.

Bu işlem için jQuery desteği almamız gerekecek. Çünkü anlık olarak yazılan karakter sayısını belirtmemiz gerekiyor. Ben jQuery.min.js kullanacağım. Versiyon olarak ise 1.5.1 ve daha günceli yeterli olacaktır. Şimdi arkanıza yaslanın ve formumuzu hazırlamaya başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

jQuery Desteğiyle Harika Metin Sunumu

Machine Gun Text EfektiÇok değil, birkaç yıl önce sağdaki animasyonun dosya tipinin ne olduğunu sorsalardı SWF veya herhangi bir video formatı olduğunu iddia ederdim.

Günümüzdeki kod sistemleriyle bu tarz sunumları hazırlamak için çok fazla çaba sarfetmenize gerek yok. Birkaç satır JavaScript kodu ve tasarım unsurlarına az da olsa hakim olmanız neredeyse yeterli. Nasıl mı? Hadi derse başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku