Mutarea fundaluri jQuery, proiectare și dezvoltare a site-ului

Bună ziua. 🙂

Am avut un loc de muncă atunci când clientul a cerut să adăugați la site-ul un anumit efect, cu contextul general acest lucru nu a fost doar o imagine statică. Căutarea un pic pe întinderi de Internet, găsit pe unul dintre script forumuri, deși la început el nu a funcționat, pentru că acolo și a lovit, oamenii care caută o soluție cum să-l rulați. Un pic mai dur și înlocuirea unor siruri de caractere, acesta a lucrat. Acest script se realizează mișcarea de fond orizontal sau vertical. Puteți muta o imagine lung de către o anumită distanță, și puteți face o imagine scurtă care poate fi curbat, și veți obține un sentiment de mișcare continuă. Mai jos puteti vedea un exemplu.

Pentru a face o mișcare pe orizontală sau pe verticală a fundalului de pe site-ul, aveți nevoie pentru a adăuga unele noi elemente în sine.

La început, trebuie să știi unde va merge fundal. Acesta este contextul general al site-ului sau a unui anumit div-bloc. În cazul în care div-bloc

El are nevoie pentru a seta stilul de imagine de fundal. De asemenea, trebuie să fie determinate cu imaginea. În cazul nostru, este o imagine de 277 pixeli lățime, înălțime - 272, și infinit, cel care, atunci când unirea cu sine nu are limite. Mișcarea va fi orizontală - la stânga la dreapta, în acest scop, specificați setările - repeta-x.

Dacă doriți să faceți mișcare un fundal general, pur și simplu setați stiluri - corp

Dacă face o mișcare în, apoi un fundal infinit pe verticală, setați repetare-y.

Acum aveți nevoie în antetul site-ului dvs. înainte de a capului de închidere. bine, sau în subsol, înainte de zakryvayuschimsyabody. mai întâi conectați biblioteca jQuery. apoi script-ul în sine. Dacă ați conectat anterior la bibliotecă pentru a face acest lucru nu mai este necesar, astfel încât să nu provoace un conflict.

Conectarea bibliotecii jQuery

Script-ul are câteva setări:

1. A cincea linie prezinta clasa - .ret - această clasă unitate la care se va face mișcare de animație de fundal. Dacă doriți să mutați fundalul general al site-ului, apoi înlocuiți .ret pe corp
2. 277 - este dimensiunea imaginii în pixeli. Dacă aveți o mișcare orizontală, aceasta indică lățimea imaginii, în cazul în care verticală, înălțimea.
3. Valoarea 50 - acesta este întârzierea în milisecunde, între mișcările de imagini. Inferioară numărul, cu atât mai rapid fundal în mișcare, și vice-versa.

Așa cum a spus, acest exemplu se deplasează orizontal de la stânga - dreapta. Pentru a schimba direcția de deplasare trebuie să fie înlocuită cu 3 sau 4 linii

Același accent pentru a face o schimbare a mișcării verticale. Inițial - de sus în jos. Se inserează un al doilea cod, dacă doriți să mutați de jos în sus.

Pentru a face mișcarea pe verticală, este necesar să se înlocuiască complet linia pyatoyu.

O mulțime de text este scris, dar voi înțelege, dificil, mai ales nimic. Dacă este făcută corect, veți vedea o mișcare pe orizontală sau pe verticală ciclică a fundalului.

Asta e tot, vă mulțumesc pentru atenție. 🙂

Se aplică pentru fiecare imagine o skript.Tolko schimba numele clasei și numele funcției. În primul și al doilea .ret .ret2 ex
scroll_bg și scroll_bg2
bg_Offset și bg_Offset2
Articolul spune, de asemenea, modul de a schimba direcția napravo.V a părăsit primul script pentru a fi -
bg_Offset = bg_Offset + 1;
if (bg_Offset> 277) bg_Offset = 0;
În al doilea vice-versa
bg_Offset = bg_Offset - 1;
în cazul în care (bg_Offset <0) bg_Offset = 277;
Firește 277 este lățimea imaginii, modificați dimensiunea celor care vor fi în imagini.

Bună ziua dragi prieteni

Ai instalat extensia AdBlock sau altele asemenea. Adaugă site-ul meu pe lista albă, și, astfel, vnesesh contribuie la dezvoltarea acesteia. Instrucțiuni despre cum să dezactivați AdBlock doriți această fereastră