Saç reklamlarındaki önceki-sonraki uygulaması : BeforeAfter.js

0
50
views

resmin-önceki-hali-sonraki-hali
Tam olarak hatırlamıyorum ama sanırım saç reklamlarında buna benzer bir örnek vardı. İlaç kullanılmadan önceki hali ve ilaç kullanıldıktan sonraki halini gösteren yan yana birleştirilmiş iki tane resimden oluşuyordu bu reklamlar.  Gerçi görünüm olarak jQuery BeforeAfter.js  eklentisi ile hiç alakası yok ama bu tarz örneklerde kullanabilmeniz için hazırlanmış.

BeforeAfter.js uygulamasında bir div içerisine eklemiş olduğunuz iki tane resimden biri görünüyor ve hemen sağında da yukarıdan aşağıya uzanmış yeşil bir çizgi bulunuyor. Birinci resmin içinde bulunduğu dive class=”before”, ikinci resmin içinde bulunduğu dive de class=”after” ekleniyor. Bu şekilde before sınıfı atanmış olan resim yani resmin önceki hali üstte çıkıyor, yeşil çizgiyi  tutup mouse ile sola doğru kaydırdığınızda resmin sonraki hali ekrana geliyor.

Photoshop dersleri yayınlayan kişiler  için çok ideal bir uygulama. Düzenlediğiniz resimlerin sonuna  bu eklenti ile resimlerin önceki halini ve sonraki halini eklerseniz eğer ziyaretçileriniz  resimlerde yapmış olduğunuz değişiklikleri daha iyi inceleyebilecekler. Şimdilik aklıma sadece photoshop dersleri aklıma geldiği için  böyle bir örnek  verdim.  Bu gibi buna benzer bütün çalışmalar üzerinde jQuery BeforeAfter.js eklentisini kullanabilirsiniz.

jQuery.ui.touch-punch.js uygulaması ile beraber kullandığınızda dokunmatik cihazlar  üzerinde de çalışmasını sağlayabilirsiniz. BeforeAfter.js için kullanılabilir  birçok parametre bulunuyor. Detay butonuna tıklayarak  parametrelerin tamamını açıklama yazısından bulabilirsiniz.

Kullanım 

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

Js dosya adresleri : 

 JavaScript : 

Bir kaç tane parametre eklenmiş olan JavaScript : 

  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

 

 

1 oy (No Ratings Yet)
Loading...
Önceki İçerikHook.js – Aşağı kaydırıldığında otomatik yenilenme
Sonraki İçerikWheelZoom.js
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Please enter your comment!
Please enter your name here