Sitenizdeki dinamik bir arayüz, kullanıcıların dikkatini çekecek ve trafiği artıracaktır. Bir web sitesi için hareketli bir başlık oluşturmak ilk bakışta göründüğü kadar zor değildir.
Talimatlar
Aşama 1
Fare imleci üzerine geldiğinde yapılandırmasını değiştirecek animasyonlu bir başlık oluşturmaya çalışalım. Örneğin, bir başlıktaki siyah beyaz bir resim, etkileşim üzerine renge dönüştürülür veya başka bir resimle değiştirilir.
Adım 2
Resmi web sitesinden (jquery.com) indirdikten sonra jQuery kitaplığını bilgisayarınıza kurun.
Aşama 3
Komut dosyası etiketini kullanarak kitaplığı kafa etiketleri arasında html dosyanıza bağlayın:
4. Adım
Kullanıcı başlıkla etkileşim kurduğunda birbirinin yerini alacak iki resim seçin. Siyah beyazdan renkliye geçiş yapmak istiyorsanız, resmin bir kopyasını oluşturun ve Photoshop'ta desaturasyon yapın.
Adım 5
Html belgesinde iki öğeden oluşan bir liste oluşturun ve resim etiketini kullanarak her birine resim ekleyin. Örneğin, listenin kendisine bir stil sınıfı uygulayın
6. Adım
Bunu site başlığınızdan sorumlu olan div'de yapın. Önce, statik durumda yansıtılması gereken görüntünün adresini ve ardından üzerine gelindiğinde görünen adresi belirtin.
7. Adım
İlk resme class = "pervaya" ve ikinci resme class: "vtoraya" ekleyin.
8. Adım
Ekli css dosyasında, bu sınıflar için öğelerin mutlak konumlarını (konum: mutlak;), sabit yükseklik ve genişlik (yükseklik ve genişlik) belirtin.
9. Adım
Resimleri üst üste koyun. Bunun için z-endeksi stilini kullanın. Ekranın derinliklerinde bizden uzaklaşan z ekseni boyunca öğeleri hizalamanıza olanak tanır.
Adım 10
Listenin kendisi için, ihtiyacınız olan girintiyi, hizalamayı belirtin ve liste öğelerini kaldırın (list-style-type: none;).
11. Adım
Bir.js dosyası oluşturun ve içine aşağıdaki kodu yapıştırın:
$ (belge).ready (işlev () {
$ ("img.grey"). fareyle üzerine gelin (işlev () {
$ (bu).stop ().animate ({"opacity": "0"}, "yavaş");
}, işlev () {
$ (bu).stop ().animate ({"opacity": "1"}, "yavaş");
});
});
Adım 1/2
Bu kod, başlığınızı harekete geçirecek..js dosyasını html belgesine bağlamayı unutmayın.
