Merhabalar arkadaslar bu soyleyecegım sanırsam hover ile yapılıyor fakat nasıl yapıldıgını bılmek ıstıyorum ben degısık baslıklarda arattım fakat adını bılmedıgım ıcın tam sonuc alamadım yanı cevabı bulamadım bu tür efektlerin nasıl yapıldıgını bılıyorsanız , adının ne oldugunu bılıyorsanız ya da anlatımının nerede yapıldıgını biliyorsanız paylasır mısınız rıca etsem ? :)
Örnek TIKLA
Yukarıdaki örnekte site yüklenirken loading ekranında ki adacıgın ustune gelmeye calıstıgınızda ada tam tersı yonde hareket edıyor bu tur efekti nasıl yapabılırım ?
Hover efecti ile ilgili |
9 Mesajlar | 2.255 Okunma | ||
- Üyelik 20.01.2014
- Yaş/Cinsiyet 29 / E
- Meslek -
- Konum Adana
- Ad Soyad B** K**
- Mesajlar 511
- Beğeniler 152 / 44
- Ticaret 0, (%0)
- Üyelik 13.12.2013
- Yaş/Cinsiyet 30 / E
- Meslek Web/Desktop Coder
- Konum İstanbul Avrupa
- Ad Soyad O** E**
- Mesajlar 210
- Beğeniler 20 / 20
- Ticaret 3, (%100)
Verdiğiniz örnekteki hover özelliği ile mi yapılıyor bilemiyorum fakat yalnızca css ile yapılmadığını düşünüyorum. Belki css3 olabilir.
css'de hover kullanımı gayet basittir.
Yukarıda da gördüğünüz gibi "hover" özelliğini kullanmak için ":hover" yazmak yeterli oluyor tabi kullanmak istediğiniz etiketin (yapının) değerleri benzer olmalı.
Şöyle ki eğer yukarıda ki örnekten gidecek olursak #h1'in yazı boyutu 36 olursa fakat #h1:hover'ın ki 12 olursa düşünebileceğiniz gibi abes kaçacaktır. Üzerine geldiğinde aşırı derece boyut farkı olacaktır. Bu sebeple ikisinin de aynı büyüklükte olması gerekir ama renk, stil olarak farklılıklar olabilir.
css'de hover kullanımı gayet basittir.
#h1 {
color: #84ac49; //Yazı rengini, yeşil yapar.
}
#h1:hover {
color: #ffffff; //Yazı rengini beyaz yapar.
}
Yukarıda da gördüğünüz gibi "hover" özelliğini kullanmak için ":hover" yazmak yeterli oluyor tabi kullanmak istediğiniz etiketin (yapının) değerleri benzer olmalı.
Şöyle ki eğer yukarıda ki örnekten gidecek olursak #h1'in yazı boyutu 36 olursa fakat #h1:hover'ın ki 12 olursa düşünebileceğiniz gibi abes kaçacaktır. Üzerine geldiğinde aşırı derece boyut farkı olacaktır. Bu sebeple ikisinin de aynı büyüklükte olması gerekir ama renk, stil olarak farklılıklar olabilir.
- Üyelik 20.01.2014
- Yaş/Cinsiyet 29 / E
- Meslek -
- Konum Adana
- Ad Soyad B** K**
- Mesajlar 511
- Beğeniler 152 / 44
- Ticaret 0, (%0)
Verdiğiniz örnekteki hover özelliği ile mi yapılıyor bilemiyorum fakat yalnızca css ile yapılmadığını düşünüyorum. Belki css3 olabilir.
css'de hover kullanımı gayet basittir.
Yukarıda da gördüğünüz gibi "hover" özelliğini kullanmak için ":hover" yazmak yeterli oluyor tabi kullanmak istediğiniz etiketin (yapının) değerleri benzer olmalı.
Şöyle ki eğer yukarıda ki örnekten gidecek olursak #h1'in yazı boyutu 36 olursa fakat #h1:hover'ın ki 12 olursa düşünebileceğiniz gibi abes kaçacaktır. Üzerine geldiğinde aşırı derece boyut farkı olacaktır. Bu sebeple ikisinin de aynı büyüklükte olması gerekir ama renk, stil olarak farklılıklar olabilir.
css'de hover kullanımı gayet basittir.
#h1 {
color: #84ac49; //Yazı rengini, yeşil yapar.
}
#h1:hover {
color: #ffffff; //Yazı rengini beyaz yapar.
}
Yukarıda da gördüğünüz gibi "hover" özelliğini kullanmak için ":hover" yazmak yeterli oluyor tabi kullanmak istediğiniz etiketin (yapının) değerleri benzer olmalı.
Şöyle ki eğer yukarıda ki örnekten gidecek olursak #h1'in yazı boyutu 36 olursa fakat #h1:hover'ın ki 12 olursa düşünebileceğiniz gibi abes kaçacaktır. Üzerine geldiğinde aşırı derece boyut farkı olacaktır. Bu sebeple ikisinin de aynı büyüklükte olması gerekir ama renk, stil olarak farklılıklar olabilir.
Bana hover gıbı geldı tabı bu konuda benım pek bır bılgım yok :) Yinede teşekkür ederim , sağolun.
- Üyelik 18.11.2011
- Yaş/Cinsiyet 35 / E
- Meslek Web Developer
- Konum İstanbul Avrupa
- Ad Soyad B** Ç**
- Mesajlar 3270
- Beğeniler 1014 / 1983
- Ticaret 53, (%100)
- Üyelik 25.10.2013
- Yaş/Cinsiyet 41 / E
- Meslek Php Coder
- Konum Antalya
- Ad Soyad K** I**
- Mesajlar 476
- Beğeniler 22 / 87
- Ticaret 7, (%100)
Jquery parallax ile farklı layerlar oluşturup değişik taraflara hareket etmesini sağlayabilirsiniz.Sadece css ile yapılabilir mi bilmiyorum ama jquery'nin bunla ilgili çözümü basit ve kısa tercih sizin tabiki :)
- Üyelik 06.11.2013
- Yaş/Cinsiyet 36 / E
- Meslek Grafiker
- Konum Ankara
- Ad Soyad M** P**
- Mesajlar 189
- Beğeniler 2 / 53
- Ticaret 0, (%0)
http://matthew.wagerfield.com/parallax/ parallax nimetleri. Sadece css ile yapılmaz çünkü div kaydırma da söz konusu. Orta derece Jquery bilgisiyle yapılabilir.
http://bit.ly/1dY0Cf6
- Üyelik 20.01.2014
- Yaş/Cinsiyet 29 / E
- Meslek -
- Konum Adana
- Ad Soyad B** K**
- Mesajlar 511
- Beğeniler 152 / 44
- Ticaret 0, (%0)
Teşekkür ediyorum , verdiğiniz kaynakları inceliyorum :)
Ek Olarak:
Bu site çok hoşuma gitti :D
Ek Olarak:
mustafanart adlı üyeden alıntı
http://matthew.wagerfield.com/parallax/ parallax nimetleri. Sadece css ile yapılmaz çünkü div kaydırma da söz konusu. Orta derece Jquery bilgisiyle yapılabilir.Bu site çok hoşuma gitti :D
- Üyelik 20.01.2014
- Yaş/Cinsiyet 29 / E
- Meslek -
- Konum Adana
- Ad Soyad B** K**
- Mesajlar 511
- Beğeniler 152 / 44
- Ticaret 0, (%0)
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)