Tutorial Javascript/CSS: Fade pe poze

Oct 9, 2008 Tutoriale, Web Design

Stau de ceva vreme cu “Design” in titlu si in tagline, dar pana acum n-am prea scris nimic in sensul asta. De fapt, pentru ca sunt doar un designer amator, o sa ma limitez probabil in sectiunea asta sa scriu mici tutoriale grafice, hackuri de CSS/Javascript si Flash. Pentru inceput am un hack CSS/JS, pe care l-am si implementat pe site (butoanele alea sexy de la sfarsitul postului): cum sa creezi un efect de fade-in/fade-out pe o poza, la hover.

Ok, hai sa iau pe post de cobai o poza cu moaca mea:

Pasul 1 – Javascript

Daca aveti deja un fisier Javascript extern pe blog, puteti sa copiati functiile de mai jos acolo, dar daca nu, creati un fisier .js, sa ii zicem effects.js, si dati copy/paste la codul de mai jos:

function opacity(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;

//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i–) {
setTimeout(”changeOpac(” + i + “,’” + id + “‘)”,(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout(”changeOpac(” + i + “,’” + id + “‘)”,(timer * speed));
timer++;
}
}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = “alpha(opacity=” + opacity + “)”;
}

E un hack pe care l-am gasit mai demult pe net, dar din pacate nu pot da sursa pentru ca nu o mai tin minte (si la o cautare a codului, apare pe vreo 20 de siteuri diferite). Prima functie are 4 parametrii:

Id – id-ul obiectului care foloseste functia
opacStart – valoarea initiala a opacitatii
opacEnd – valoarea finala a opacitatii, dupa fade
millisec – timpul in care se produce fade-ul, in milisecunde

Nu ne bagam mai mult in cod, parametrii de mai sus e important sa intelegeti ce fac, pentru ca o sa ii folosim imediat cand chemam functia. A doua functie, changeOpac are rolul de a optimiza javascriptul pentru toate browserele (pentru ca nu toate interpreteaza la fel filtrul de opacitate).

Apoi, deschideti header.php in directorul temei si scrieti (copiati) asa:

<script type=”text/javascript” src=”<?php bloginfo(’template_directory’); ?>/effects.js”></script>

Evident, inlocuiti effects.js cu fisierul vostru de javascript, daca nu se cheama asa. Bun, acum daca totul a fost facut corect, putem chema functia de fade de pe orice pagina a site-ului.

Pasul 2 – CSS

Deschideti fisierul CSS al temei (style.css de obicei) si scrieti asa:

.opac {
opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);
}

Inlocuiti opacity=40 cu valoarea intiala de opacitate pe care vreti sa o dati imaginii (preferabil ar fi ca valoarea din CSS sa fie aceeasi cu cea a parametrului opacStart pe care il setam imediat). Salvati si uploadati CSS-ul.

Pasul 3 – Poza

Deschideti pagina unde vreti sa apara efectul, cautati poza si dati-i urmatorii parametrii in tag-ul <img> (evident inlocuiti cu datele voastre):

<img id=”moaca” src=”/adresapozei/moaca.jpg” alt=”moaca” class=”opac” onMouseOver=”javascript:opacity(’moaca’, 40, 100, 300);” onMouseOut=”javascript:opacity(’moaca’, 100, 40, 300);” />

Trebuie musai sa ii dati un ID unic (in cazul asta “moaca”) si sa ii aplicati clasa “opac” pe care am definit-o mai devreme in CSS. Cu onMouseOver si onMouseOut creem efectul la hoverul mouseului si cu javascript:opacity(id, opacStart, opacEnd, millisec) chemam functia care am definit-o in effects.js.

opacStart e bine sa fie, dupa cum am zis, la aceeasi valoare cu cea care am dat-o in CSS la filter: alpha(opacity=40); si parametrul millisec undeva intre 1 si 2000 (1=instant, 2000 fade pe durata a 2 secunde). Voila (hover pe poza):

Jucati-va eventual cu valorile si vedeti care cum arata, pana gasiti fade-ul perfect. Ah si inca o chestie, daca nu va iese ceva, va rog nu imi dati mail, scrieti aici un comment, mai usor rezolvam Seara faina!

Alte articole care s-ar putea sa iti placa

1. 131 Layer Styles Gratuite pentru Photoshop
2. Se Cauta Web Developer
3. Cum te tratezi de writer’s block
4. Cum sa cresti marimea Speed Dial-ului in Opera
5. Duplicate Content si Cum Ne Ferim de Plagiat