Resimleri oran orantısını bozmadan bir alan içinde ortalamak / jQuery img load

Merhaba arkadaşlar,

Birkaç yıl olmuştur bu kodu yazalı ama arada gidip alıp kullanıyorum, sizinle de paylaşmak istedim umarım işinize yarar. Buraya tıklayarak aşağıdaki kodun ne işe yaradığını anlayabilirsiniz // Sayfada büyük resim olduğu için yüklenmesi uzun sürebilir.

Burada asıl önemli olan kısım resmin yüklenip yüklenmediğini kontrol etmek (jquery img load). Burada kullandığım resim yüklenme kodunu stackoverflow‘dan buldum ( Nick Craver )

 

Resimlerin kesin yüklendiğini anladıktan sonra, resmin orjinal boyutlarını alıyorum, ondan sonra resmi kapsayan element’in boyutlarını alıp oran / orantı yapıp resme yeni boyutunu ve pozisyonunu veriyorum. Burada img’i kapsayan elementin width, height ve overflow:hiden değerinin olması gerekir.

 

 

Jade Nedir, Nasıl Kullanılır?

Jade Nedir?

Jade kolay html yazımını sağlayan ve tag sonlarını kapatmayı unutma ya da hata yapma payını en aza indirgeyen bir node.js eklentisidir. Aynı zamanda html yazım hızınızı da arttırmakta. Tek yapmanız gereken Tab yapısına göre yazıma dikkat etmeniz. Gerisini jade sizin için yapacaktır. Bir örnek üzerinde inceleyecek olursak;

jade1

Jade Nasıl Kurulur?

Jade’ yi kurup kullanmanız için 2-3 yöntem mevcuttur. Okumaya devam et Jade Nedir, Nasıl Kullanılır?

jQueryEasing ile .animate() efektleri

Merhaba arkadaşlar, jQuery’nin verdiği swing , linear artık güzel görünmüyor o yüzden sık kullandığım ama fırsat bulamadığım bir kod parçasını paylaşacağım.

Öncelikle yazarına teşekkür edelim :  gdsmith

jquery.easing.js  jQuery .animate() fonskiyonu biraz renklendirmek diyebiliriz ancak html5 de de bu animate’leri verebiliyoruz.

Js kodlarda select’den gelen veriyi çağırmak ve sürekli tetiklemek için birkaç şey yaptım kafanız karışmasın, dikkatli incelerseniz anlarsınız.

 

Yarın birgün rastgele animate efekt isteyeceksiniz o yüzden dizi halinedede veriyorum efektleri

 

Random seçtirme

 

 

Ön izleme

See the Pen jQueryEasing ile .animate() efektleri ~ www.aycan.net by Aycan BÜLBÜL (@AycanB) on CodePen.

 Aycan.net Ön izleme -> http://calismalar.aycan.net/jQueryEasing/

jQuery ile rastgele renk

Geçenlerde ruh halimi yansıtan bir kod diye bişiyler yazdım, sizlerlede bunu paylaşmak istiyorum.

Kodun yaptığı iş, her 1 saniyede random bir renk seçiyor.

Css (geçişler yumuşak olsun diye.)

 

Js

 

See the Pen Ruh Halimiz by Aycan BÜLBÜL (@AycanB) on CodePen.

Bu kodu paylaşırkende bu müziği dinliyorum, sizede tavsiye ederim
http://www.youtube.com/watch?v=mrziYF6bVAE

jQuery Rating Uygulaması

Merhaba arkadaşlar, her projede farklım farklı yazmaktan yoruldum ve burada paylaşıyorum.

Html Kodları

 Css Kodları

Js Kodları

 

Codepen:

See the Pen jQuery Rating Uygulaması by Aycan BÜLBÜL (@AycanB) on CodePen.


Aycan.net demo -> http://calismalar.aycan.net/rating/