Sequence.js – Animation framework

1
120
views

Png-resimler-ile-kullanılan-slider
Bir ara moda siteleri için bir slider paylaşmıştım sizlerle. Aslında paylaşacağım desem dana doğru olacak. Çünkü sitemin içeriklerine en baştan itibaren yeni bir çeki düzen vermeye çalışıyorum. Bu yüzden moda siteleri için paylaştığım örneğin tarihi de değişmiş oldu. Uykusuzluk böyle bir şey işte. Sabahın körü ama ben geceden kalmayım. Bu yazının da tarihi değişmiş hatta sitemin en yeni yazısı olmuş  bunu da yeni fark ettim. İki tane örneği bulunan bir tanesi tek resim kaydıran diğeri de aynı anda 3 tane resmi kaydırabilen  özelliğe sahipti. Çalışma şekli olarak moda siteleri için oldukça uygundu.

Şu an sizlere tanıtmaya çalıştığım jQuery eklentisi de tam anlamıyla moda siteleri için çok uygun görünüyor. Sitenizin manşet bölümüne yeni hazırladığınız tasarımları tanıtmak için kullanabileceğiniz en güzel ve en kullanışlı örneklerden biri diyebilirim. Özellikle modellerin soldan sağa doğru kayarak gelmesi bir hayli dikkat çekici. Sağ alt tarafta bulunan 3 tane model  resmi bildiğimiz  resimler arası geçiş işlemine yarayan kaydırma butonları görevi görüyorlar.

Ian Lunn tarafından geliştirilmiş olan jQuery  Sequence uygulamasını kullanmak biraz zahmetli. Herhangi bir resmi olduğu gibi kesmeden, biçmeden alıp slidere ekleyemiyorsunuz. Ekleyebilirsiniz de ortaya berbat bir görüntü çıkacaktır. Örnek olarak eklediğim resme dikkat ederseniz bir modelin arkasından diğer model görünebiliyor. Bunlar png formatında hazırlanmış olan resimler. Bildiğiniz gibi png formatındaki resimlere boşluklar bırakılabilir bu şekilde.  Modelin her tarafını dikkatlice kesip sildikten sonra model.png şeklinde kaydetmeniz gerek. 100’den fazla ücretsiz slider örneği paylaştım sizlere bu güne kadar. Diğer örnekler ile karşılaştırdığımda Sequence  gerçekten benzersiz. Bu tarz benzersiz bir örneği sanırım ücretsiz bulamazsınız. Aşağıdaki butondan örneğin demosunu inceleyebilirsiniz. ayrıca download linki de aynı sayfada olacaktır.

Sequence’nin diğer özellikleri arasında responsive ve mobil cihazlarla (dokunmatik cihazlarla) uyumlu olması da var. Ayrıca IE7 üstü ve diğer tarayıcılarda sorunsuz bir şekilde çalışmaktadır.

Kullanımı :

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

Js ve Css dosya adresleri :

 Html : 

 

1 oy (1 votes, average: 4,00 out of 5)
Loading...
Önceki İçerikMosaiqy
Sonraki İçerikayaSlider
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

1 Yorum

CEVAP VER

Please enter your comment!
Please enter your name here