Web sitelerinde artık bildiğiniz gibi Flash animasyonlar yerlerini yavas yavaş HTML5 tabanlı animasyonlara bırakıyorlar. Flash animasyonların gerek işlemci gücünü %100 kullanması gerekse sistem kaynaklarını aşırı zorlaması nedeniyle tercih oranı git gide düşüyordu. Bu noktada HTML5 imdada yetişti. Mobil cihazlar da artık bu teknolojiye destek vermeye başladılar.
Hello word tarzı bir deneme de ben yapayım dedim, HTML5 gerçekten keyif verici.
Örnek 1) HTML5 Örnek - 1
Örnek 2) HTML5 Örnek - 2
Kaynak dosya
HTML5 Örnek |
11 Mesajlar | 4.875 Okunma | ||
- Üyelik 23.02.2012
- Yaş/Cinsiyet - / E
- Meslek Web
- Konum
- Ad Soyad ** **
- Mesajlar 17
- Beğeniler 1 / 3
- Ticaret 0, (%0)
- Üyelik 05.04.2011
- Yaş/Cinsiyet 31 / E
- Meslek Yazılım Geliştirici
- Konum Konya
- Ad Soyad İ** U**
- Mesajlar 4900
- Beğeniler 1419 / 2962
- Ticaret 45, (%100)
Nasıl yaptın bunu? Çok güzel olmuş. :)
- Üyelik 12.02.2012
- Yaş/Cinsiyet 39 / E
- Meslek Grafiker
- Konum Diğer
- Ad Soyad C** Ş**
- Mesajlar 1930
- Beğeniler 1527 / 1150
- Ticaret 25, (%100)
:) güzel olmuş cidden nasıl yaptın
- Üyelik 11.09.2011
- Yaş/Cinsiyet 29 / E
- Meslek Elektrik-Elektronik Mühendisi
- Konum Eskişehir
- Ad Soyad E** K**
- Mesajlar 1223
- Beğeniler 243 / 336
- Ticaret 2, (%100)
O Değilde bu javascript ile yapılmamış mı ? Kodlarda hiç HTML5 kodu yok .s
herenkeskin.com - Elektrik ve Elektronik Mühendisi - Gömülü Sistemler üzerine çalışıyorum.
- Üyelik 02.04.2011
- Yaş/Cinsiyet 34 / E
- Meslek Web Developer
- Konum Antalya
- Ad Soyad B** K**
- Mesajlar 930
- Beğeniler 60 / 102
- Ticaret 3, (%100)
O Değilde bu javascript ile yapılmamış mı ? Kodlarda hiç HTML5 kodu yok .s
Aynen dediğin gibi ek bir js ile yapılmış :)
- Üyelik 23.11.2011
- Yaş/Cinsiyet 31 / E
- Meslek öğrenci
- Konum İzmir
- Ad Soyad Ö** G**
- Mesajlar 1647
- Beğeniler 347 / 570
- Ticaret 8, (%100)
Sadece resimler tepeden düşüyor, ben HTML5 olduğunu sanmıyorum.Pek de bir bilgim yok bu konuda yanlışım varsa affola..
ozergul.net/com
- Üyelik 07.01.2012
- Yaş/Cinsiyet 34 / E
- Meslek Öğrenci
- Konum Diyarbakır
- Ad Soyad T** E**
- Mesajlar 189
- Beğeniler 6 / 27
- Ticaret 2, (%100)
Güzel ama html5 degil sanırım.
www.fullfilmindir.gen.tr
- Üyelik 23.02.2012
- Yaş/Cinsiyet - / E
- Meslek Web
- Konum
- Ad Soyad ** **
- Mesajlar 17
- Beğeniler 1 / 3
- Ticaret 0, (%0)
İlk mesajıma bir örnek daha ekledim, kaynak dosyayı da ekledim.
Adobe Edge Preview programıyla Html5, CSS3 ve Javascript kullanarak bu şekilde çalışmalar hazırlayabilirsiniz. Zaten Html5'in mantığı animasyon olaylarını farklılaştırarak Divlerin hareketi vasıtasıyla görüntüler elde etmek. Burada da sadece efekt olarak Flash'tan bildiğimiz easeOutBounce efekti var. Edge içerisinde 20 kadar hazır hareket efekti mevcut. Çalışmak isteyen arkadaşlar için kaynak dosyayı gönderiyorum.
Adobe Edge Download: http://labs.adobe.com/technologies/edge/
Örnek:http://www.erdiyilmaz.com/puntotr/
Kaynak dosya: http://www.erdiyilmaz.com/puntotr/ornek-html5.rar
Adobe Edge Preview programıyla Html5, CSS3 ve Javascript kullanarak bu şekilde çalışmalar hazırlayabilirsiniz. Zaten Html5'in mantığı animasyon olaylarını farklılaştırarak Divlerin hareketi vasıtasıyla görüntüler elde etmek. Burada da sadece efekt olarak Flash'tan bildiğimiz easeOutBounce efekti var. Edge içerisinde 20 kadar hazır hareket efekti mevcut. Çalışmak isteyen arkadaşlar için kaynak dosyayı gönderiyorum.
Adobe Edge Download: http://labs.adobe.com/technologies/edge/
Örnek:http://www.erdiyilmaz.com/puntotr/
Kaynak dosya: http://www.erdiyilmaz.com/puntotr/ornek-html5.rar
- Üyelik 11.09.2011
- Yaş/Cinsiyet 29 / E
- Meslek Elektrik-Elektronik Mühendisi
- Konum Eskişehir
- Ad Soyad E** K**
- Mesajlar 1223
- Beğeniler 243 / 336
- Ticaret 2, (%100)
İlk mesajıma bir örnek daha ekledim, kaynak dosyayı da ekledim.
Adobe Edge Preview programıyla Html5, CSS3 ve Javascript kullanarak bu şekilde çalışmalar hazırlayabilirsiniz. Zaten Html5'in mantığı animasyon olaylarını farklılaştırarak Divlerin hareketi vasıtasıyla görüntüler elde etmek. Burada da sadece efekt olarak Flash'tan bildiğimiz easeOutBounce efekti var. Edge içerisinde 20 kadar hazır hareket efekti mevcut. Çalışmak isteyen arkadaşlar için kaynak dosyayı gönderiyorum.
Adobe Edge Download: http://labs.adobe.com/technologies/edge/
Örnek:http://www.erdiyilmaz.com/puntotr/
Kaynak dosya: http://www.erdiyilmaz.com/puntotr/ornek-html5.rar
Adobe Edge Preview programıyla Html5, CSS3 ve Javascript kullanarak bu şekilde çalışmalar hazırlayabilirsiniz. Zaten Html5'in mantığı animasyon olaylarını farklılaştırarak Divlerin hareketi vasıtasıyla görüntüler elde etmek. Burada da sadece efekt olarak Flash'tan bildiğimiz easeOutBounce efekti var. Edge içerisinde 20 kadar hazır hareket efekti mevcut. Çalışmak isteyen arkadaşlar için kaynak dosyayı gönderiyorum.
Adobe Edge Download: http://labs.adobe.com/technologies/edge/
Örnek:http://www.erdiyilmaz.com/puntotr/
Kaynak dosya: http://www.erdiyilmaz.com/puntotr/ornek-html5.rar
Bilgilendirmen için teşekkürler..Bende 3-4 ay önce Adobe Edge ile ufak uygulamalar yapmıştım ama sonra beni sarmadı bende başka yönlere yöneldim :)
herenkeskin.com - Elektrik ve Elektronik Mühendisi - Gömülü Sistemler üzerine çalışıyorum.