[]
css3+html5 background images geçişleri
css3 ve html5 ile arka planda değişen farklı üç arka plan bırakmışlar şu örnekte:
themeforest.net
bir benzerini yapmak için ne gerekiyor? bir de buton bırakmışlar, bir öncekine dön, bir sonrakine git veya animasyonu durdur diye. bu konuda yardımcı olabilecek birileri varsa müthiş olur.
themeforest.net
bir benzerini yapmak için ne gerekiyor? bir de buton bırakmışlar, bir öncekine dön, bir sonrakine git veya animasyonu durdur diye. bu konuda yardımcı olabilecek birileri varsa müthiş olur.
- kirkkarakterlikkirikayakliakillikirkayak
(08.09.13 21:10:35)
chrome' da inspector ile bakinca soyle bir sey ortaya cikiyor:
iki tane div var; class="headerimg" ve id=headerimg1 ve id=headerimg2 olan. iki div de ayni class'a sahip oldugu icin ikisi de cakisiyor(ust uste geliyor). ilk basta headerimg1' e resim ataniyor. belirli bir sure sonra headerimg2' ye resim atanip z-index degeri headerimg1' den 1 az olarak ayarlaniyor ve headerimg1' in opacity degeri yavas yavas(muhtemelen setInterval fonksiyonunu kullanarak) 1' den 0' a (opaktan saydama) azaltiliyor. headerimg1 100% saydam olunca da kullanici headerimg2' yi gormus oluyor. headerimg2' ye resim atandiktan sonra, z-index degerinin, headerimg1' den 1 az olmasinin sebebi de, resim atandigi zaman direkt headerimg1' in onunde gorunmemesi. aksi halde headerimg2, headerimg1' in onunde gorunecegi icin, headerimg1' in opacitiy degerini azalttigimiz zaman kullanici bunu goremezdi.
bir sonraki resim icin de headerimg1 ile headerimg2 yer degistiriyor. yani animasyonun her adiminda headerimg1 ve headerimg2 yer degistirerek yukarida yazdigim seyler tekrarlaniyor.
iki tane div var; class="headerimg" ve id=headerimg1 ve id=headerimg2 olan. iki div de ayni class'a sahip oldugu icin ikisi de cakisiyor(ust uste geliyor). ilk basta headerimg1' e resim ataniyor. belirli bir sure sonra headerimg2' ye resim atanip z-index degeri headerimg1' den 1 az olarak ayarlaniyor ve headerimg1' in opacity degeri yavas yavas(muhtemelen setInterval fonksiyonunu kullanarak) 1' den 0' a (opaktan saydama) azaltiliyor. headerimg1 100% saydam olunca da kullanici headerimg2' yi gormus oluyor. headerimg2' ye resim atandiktan sonra, z-index degerinin, headerimg1' den 1 az olmasinin sebebi de, resim atandigi zaman direkt headerimg1' in onunde gorunmemesi. aksi halde headerimg2, headerimg1' in onunde gorunecegi icin, headerimg1' in opacitiy degerini azalttigimiz zaman kullanici bunu goremezdi.
bir sonraki resim icin de headerimg1 ile headerimg2 yer degistiriyor. yani animasyonun her adiminda headerimg1 ve headerimg2 yer degistirerek yukarida yazdigim seyler tekrarlaniyor.
- sterimar (08.09.13 21:22:16 ~ 21:24:10)
hocam slider ile aynı mantık.
tek tek açıklamim de, bildiğin tıkaldığında body resmini animate komutu ile değiştiriyor.
anahtar kelimeler: animate background image jquery
tek tek açıklamim de, bildiğin tıkaldığında body resmini animate komutu ile değiştiriyor.
anahtar kelimeler: animate background image jquery
- kamera motor (08.09.13 21:38:25)
1
