Ang isang pabago-bagong interface sa iyong site ay kukuha ng pansin ng mga gumagamit at magpapataas ng trapiko. Ang paggawa ng isang animated na header para sa isang website ay hindi mahirap tulad ng tila sa unang tingin.
Panuto
Hakbang 1
Subukan nating gumawa ng isang animated na header, na magbabago ng pag-configure nito kapag ang mouse cursor ay lumalagay dito. Halimbawa, ang isang itim-at-puting larawan sa isang header ay ginawang kulay sa pakikipag-ugnayan o binago sa isa pa.
Hakbang 2
I-install ang jQuery library sa iyong computer pagkatapos i-download ito mula sa opisyal na website (jquery.com).
Hakbang 3
I-link ang library sa iyong html file sa pagitan ng mga head tag gamit ang script tag:
Hakbang 4
Pumili ng dalawang larawan na papalit sa bawat isa kapag nakikipag-ugnay ang gumagamit sa header. Kung nais mong magkaroon ng isang paglipat mula sa itim at puti sa kulay, pagkatapos ay lumikha ng isang kopya ng larawan at i-desaturate ito sa Photoshop.
Hakbang 5
Lumikha ng isang listahan ng dalawang item sa html-document at maglakip ng mga larawan sa bawat isa gamit ang image tag. Mag-apply ng isang klase ng estilo sa mismong listahan, halimbawa
Hakbang 6
Gawin ito sa div na responsable para sa header ng iyong site. Una, tukuyin ang address ng imahe na dapat na masasalamin sa isang static na estado, at pagkatapos ay ang isa na lilitaw sa hover.
Hakbang 7
Magdagdag ng klase = "pervaya" sa unang larawan, at klase: "vtoraya" sa pangalawang larawan.
Hakbang 8
Sa naka-attach na file na css, tukuyin ang ganap na pagpoposisyon ng mga elemento (posisyon: ganap;), naayos na taas at lapad (taas at lapad) para sa mga klaseng ito.
Hakbang 9
I-layer ang mga larawan sa tuktok ng bawat isa. Gamitin ang istilo ng z-index para dito. Pinapayagan ka nitong ihanay ang mga elemento kasama ang z-axis, na kung saan ay papalayo sa amin sa lalim ng screen.
Hakbang 10
Para sa listahan mismo, tukuyin ang indentation, pagkakahanay na kailangan mo at alisin ang mga item sa listahan (lista-style-type: wala;).
Hakbang 11
Lumikha ng isang.js file at i-paste ang sumusunod na code dito:
$ (dokumento). handa na (pagpapaandar () {
$ ("img.grey"). i-hover (pagpapaandar () {
$ (ito).stop (). buhayin ({"opacity": "0"}, "mabagal");
}, pagpapaandar () {
$ (ito).stop (). buhayin ({"opacity": "1"}, "mabagal");
});
});
Hakbang 12
Ang code na ito ay bubuhayin ang iyong header sa pagkilos. Huwag kalimutang ikonekta ang.js file sa html na dokumento.
