Ayman Teryaki tarafından geliştirilen jMotion resimlerinizi sırasıyla değiştirerek gif benzeri görüntüler elde etmenizi sağlıyor. Photoshop yada diğer programlarda bütün resimleri ard arda ekleyip gif formatında kaydettikten sonra ortaya hareketli bir resim çıkıyordu. Bu jQuery uygulamasında ise websayfası üzerinde resim klasörünü, resim uzantısını ve tekrar edilecek resim sayısını da girdikten sonra jMotiın klasör içinden resimleri bulup teker teker sıralandırıyor. Yanlız buradaki önemli husus resimlerinizi rakamlarla isimlendirin. Örneğin birden yirmiye kadar resim eklediniz ve resim isimleri 1.jpg, 2.jpg, ……….. 20.jpg gibi adlandırdınız bu resimleri amount=”20″ kısmında belirttiğiniz sayıya göre jMotion sırasıyla resimleri tekrar edecektir.
- Download
- Demo
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Js adresleri :
<script language="javascript" src="jquery-1.7.2.min.js"></script> <script language="javascript" src="jmotion.js"></script> <script language="javascript" src="jmotion-ex.js"></script>
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div class="jmotion" folder="fighter" type="gif" amount="124" speed="200" fade="0" width="500", height="500"></div>
Buraya kadarki kısmı pek açıklayıcı olmadı sanırım. Kullanımı diğer örneklerden farklı olduğu için biraz daha açıklık getirelim
Öncelikle örnek bir çerçeve oluşturalım örnek çerçevemizin içinde eklentinin resimleri hareket ettirebilmesi için class ismi jMotion olması gerekiyor.
<div class=”jmotion” bu kısma anlatacağımız değerler gelecek > </div>
- Resimlerimizi eklenti-resimleri adında bir klasörde barındırdık diyelim. jMotion’un resimlerimizi bulabilmesi için folder”eklenti-resimleri” ekledikten sonra jMotion resimlerimizin hangi klasörde olduğunu bilecek ve o klasördeki resimleri kullanıcak.
- Oluşturduğumuz klasöre eklediğimiz resimlerin formatını seçmek için type=”jpg” ekliyoruz. Eğer png yada başka formatlarda resim kullanıyorsanız jpg yerine kullandığınız resim formatını girmeniz gerekiyor. Uygulamamız bu şekilde belirlediğiniz formattaki resimleri çekecektir.
- 104 tane resim sıraladınız mesela ve resimlerin ismi 1,2,3,……. 104 şeklinde belirlediniz. 1’den 124’e kadarki bütün resimleri sıralaması için sayacı amount=”104″ şeklinde girmeniz gerekiyor. Eğer daha az bir rakam kullanırsanız örneğin 70 rakamını kullanırsanız 70’ten sonraki resimleri jMotion görmeyecektir.
- Aynı klasör içine birden fazla demo için örnek resim eklerseniz resimlerin karışmasını engellemek için resimlere ön ek ekleyebilirsiniz. Mesea 1.jpg diye adlandıracağınıza mintik_1.jpg diye adlandırabilirsiniz. Uygulamanın bunu ayırt edebilmesi için pref=”mintik_” eklemeniz gerekiyor. Bu şekilde mintik_ ismi ile başlayan bütün resimleri bulabilecektir.
- Resimler arası geçiş hızı için speed=”2000” veya daha hızlı olmasını istiyorsanız speed=”100” yada daha aşağı bir numara bellirleyebilirsiniz. Numaralar küçüldükçe resimler arası değişim hızlanacaktır.
- Fade efekti için fade=”700“
- diğer efektler içinde effect=”efektadı” kullanmanız gerekiyor. Kullanabileceğiniz efektler ; reverse, revind, top, left, center, bigger, turn-h ve turn-v. Örnek kullanım : efect=”turn-v”
- Eğer isterseniz çerçeve boyunuda kendiniz belirleyebiliyorsunuz. Çerçeve boyuna göre resimde otomatik olarak büyüyor. Genişlik ayarı için width=”500″ yükseklik ayarı için width=”500” şeklinde kullanabilirsiniz.
Birleştirilmiş hali şuşekilde olacaktır :
<div class="jmotion" folder="fighter" type="gif" amount="25" speed="200" fade="0" width="500", height="500"></div>
Birleştirdiğimiz bu kodlar sayesinde ortaya aşağıdaki gibi bir görüntü çıkacaktır. Toplamda 25 farklı karenin tekrar etmesi ile oluşan bir çizgi film sahnesi.