pillinetwork hesabınızla giriş yapın.

javascript ile Sinema Tarzında Efekt Yapalım

Bazı image gallery'lerde veya lightBox diye piyasaya sürülen javascript aparatlarında sık sık rastladığımız bir efekt vardır. Hani şu yavaşça opaklığı artın resim ya tamamen kaybolur ve hemen ardından bir sonraki resim aynı yavaşlıkla opaklık arttırarak (0'dan başlayıp) sahneye gelir yada ilk resim kaybolurken aynı anda altında duran resim git gide belirginleşir vs vs.. Çeşitli yöntemler mevcut ama nasıl yapılacağını hiç düşündünüz mü? Hazır library'lerde çok basit bir şekilde ve türlü olaylar (event) karşısında cevap verebilecek şekilde bu özellik verilebiliyor. Ama nedir bu hadisenin mantığı? Derhal aktaralım efem!..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var kontur = 0;

var timeOut;

function opakOut(yer,hiz){

  if(kontur>0){

    hiz = hiz * 1000

    var yer = document.getElementById(yer);

    mozOp = kontur * 0.01;

    yer.style.opacity = mozOp;

    yer.style.filter = "alpha(opacity="+kontur+")";

    kontur--

    timeOut = setTimeout("opakOut("+yer+","+hiz+")",hiz);}

  else{

    clearTimeout(timeOut);}

}

1
 
<img src="resim.jpg" id="foto" onClick="opakOut(this.id,0.7)" />

Öncelikle ilk bloktaki javascript kodumuzda bir hususu belirtmek isterim.. Resimlere opak efekti vermeyi tarayıcı program sağlar. Bu olanağı da javascript ile tetikleriz. Ama her tarayıcının tetikleme kodu malesef aynı değil (bıktırdı bı standartlaşamama) Bu durumda siz eğer yukarıdaki kodları firefoxta deneyecekseniz yer.style.opacity = mozOp; kısmını explorer için yer.style.filter = "alpha(opacity="+kontur+")"; kullanacaksınız. Diğer browserlar için de az araştırmayla hangi sentax geçerli olduğunu bulabilirsiniz. (amaç mantık sunmak)

Sayfaya eklediğiniz resime tıkladığınızda resim yavaşça ekrandan silinip gidecektir. Çoğu yerde olduğu gibi burada da işin özü setTimeout fonksiyonundan faydalanıldığını sanırım fark ettiniz.. Anlatacaklarım bu kadar. Geliştirip kullanmak size bağlı..

Saygılar..

Spacer
Spacer
/* Etiketler: , , , , , , , , , , */
/* lazaronnie yazdı. 24 Aralık 2008 19:15. 13 yorum var */

Yorumlar

eline sağlık.
ayrıca jQuery gibi kütüphaneler ile çok kestirme yöntemlerle yapılabiliyor.

verdiği örneği jquery'ye çevirirsek: (her ne kadar inline event yazmak jquery için sevilmese de)

<img src="resim.jpg" id="foto" onClick="$(this).fadeOut(700)" />

/* ncankirik | 25 Aralık 2008 09:33 */

jquery aşmış bir kütüphane..

Bu arada makalede yer alan kodlarda hata var. Yani görevini yapmıyor ama mantık yine aynı şekildedir..

/* porno sektörü | flash öldü | iphone temaları | winamp temaları | eczanede utanma arkadaş */
/* lazaronnie | 25 Aralık 2008 14:04 */

ugras için tesekkur ancak dedigi gibi jquery, prototype gibi kutuphaneler ile cok daha basit oluyor. evet kodda hata var.

/* infoman | 25 Aralık 2008 17:53 */

denemedim ama sanırım, kontur'un ilk değeri 0 olduğu için çalışmıyor.

/* ncankirik | 26 Aralık 2008 08:54 */

afedersiniz olaya fransız olduğumdan birşey soracağım; orta derece delphi biliyorum kodlar çok benzer geldi gözüme ben mi yanılıyorum?

/* lost a | 04 Ocak 2009 02:24 */

aksine ben de hiç delphi görmedim ama delphi bir c tabanlı dil ise benzemesi çok doğal çünkü javascript bir c tabanlı dil.

/* porno sektörü | flash öldü | iphone temaları | winamp temaları | eczanede utanma arkadaş */
/* lazaronnie | 04 Ocak 2009 13:09 */

delphi pascal tabanlı.

/* tanrı'nın bildiği kadarını bilmiyorum ama tanrı'nın benim yaşımdayken benim kadar bildiğini biliyorum diyen bir matematikçi tanıyorum. */
/* tga | 08 Ocak 2009 03:25 */

Birileri bana yardımcı olabilir mi acaba ? arabam . com'daki gibi java slaytlar hazırlamak istiyorum, veritabanından resim cekebilecegim tarzda.Bildiğiniz makale, yada buna benzer yazılar varsa, benide bilgilendirirseniz çok sevinirim. + Java hiç bilmiyorum, teşekkürler..

/* Zeybek | 10 Ocak 2009 08:04 */

biliyorum konu dısı bır soru olacak ama sizce geleceğin programlama dili hangisi olacak fikri olan varmı

/* www.makkale.blogcu.com */
/* makkale | 13 Ocak 2009 18:33 */

bence gelecekte programlama dili kavramı kalmayacak :))

/* porno sektörü | flash öldü | iphone temaları | winamp temaları | eczanede utanma arkadaş */
/* lazaronnie | 13 Ocak 2009 22:54 */

Dostum çalışmıyor

/* s4l1h | 05 Haziran 2009 14:41 */

biz farklı bir şey demedik zaten

Bu arada makalede yer alan kodlarda hata var. Yani görevini yapmıyor ama mantık yine aynı şekildedir..
/* porno sektörü | flash öldü | iphone temaları | winamp temaları | eczanede utanma arkadaş */
/* lazaronnie | 05 Haziran 2009 21:30 */

var kontur = 100;
var timeOut;
function opakOut(id,hiz)
{ if(kontur>0) { var yer = document.getElementById(id); mozOp = kontur * 0.01; yer.style.opacity = mozOp; yer.style.filter = "alpha(opacity="+kontur+")"; kontur = kontur - 10; timeOut = setTimeout("opakOut('"+id+"','"+hiz+"')",hiz); } else { clearTimeout(timeOut); }
}

bu şekilde yaptım çalışıyor arkadaşlar :)
kontur - 10 ve opaout ta giden 100 değeri verilen hız parametresi ile efektin hareketliliğini değişmek mümkün

/* saho10 | 23 AÄŸustos 2009 09:20 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork