Orei de timp a zilei 🙂
Recent am văzut un scenariu interesant în ochii mei. Mulți dintre voi l-ați văzut. Esența scriptului este că un obiect indică locația cursorului pe pagină. Acest efect este aplicat pe site-urile Ucoz la pagina 404. Acolo este făcută astfel încât atunci când mutați cursorul, pisica pictată, prin binoclu, vă urmărește mișcarea. De fapt, acest script este pur și simplu o animație frumoasă pentru a atrage atenția vizitatorului. Mi-a placut foarte mult si am decis sa-l modificam putin, sa-l remake si sa fac un alt foarte asemanator, dar un pic cu o alta animatie.
Acest articol va arăta prima animație, iar în următorul timp vă voi spune despre cea de-a doua. Va exista un pointer sub forma unei busole. Am luat scenariul, am corectat-o ușor și am schimbat principiul de ieșire a imaginii. De asemenea, în loc de o pisică care se uită prin binocluri, am adăugat o pisică faimoasă - Simon din cartea lui Simon's Cat. Ca și în sursă, propun să folosesc acest script pe pagini ca 404. Desigur, totul depinde de imaginația ta. Puteți să-l adaptați pentru alt scop. Ce se va întâmpla după ce vă instalați pe site-ul acestui material, puteți vedea mai jos în exemplu, precum și puteți descărca sursa.
Îi plăcea? Dacă da, vom continua să descriem cum funcționează acest lucru și cum să îl adăugați pe site-ul dvs.
Mai întâi, să adăugăm marcajul HTML al animației noastre.
Prin marcare, totul este simplu. Avem un bloc parental cu id-cat. În interiorul acestuia există două blocuri responsabile pentru ochi, în interiorul căruia blocurile sunt responsabile pentru elevi. Se pare că definim întreaga noastră pisică, apoi două zone, și anume zonele oculare în interiorul cărora elevii se vor mișca. Acest cod este adăugat la site-ul în care doriți să vedeți imaginea cu animația.
Următorul pas este să adăugați stiluri pentru a afișa corect animația viitoare.
Dacă știți puțin despre CSS, atunci totul este simplu și sper că acest lucru se întâmplă deoarece, dacă decideți să adăugați script-uri pe site-ul dvs., cel puțin să studiați și să înțelegeți conceptele elementare inițiale. Altfel, vă recomand să învățați mai întâi elementele de bază, apoi să efectuați revizuiri similare ale site-ului dvs. Să ne întoarcem la material.
Este important să rețineți că fundalul cu pisica este setat la pseudo-element: înainte pentru blocul #cat. Ar trebui să specificați calea spre imagine. Pentru a obține toate imaginile - descărcați sursele de la linkul de mai sus. Acum pentru ochi și pentru elevi.
- #cat - blocul principal, zona în care va fi o imagine și o animație a ochilor.
- #cat: înainte - Pseudo-element pentru a adăuga un fundal general. În acest caz, pisica lui Simon. Puteți adăuga o altă imagine, dar trebuie să plasați corect zona de ochi pe ea.
- .cat-eye - Aceasta este o clasă comună pentru doi ochi (nu o imagine, ci o zonă pentru elevi). Specifică dimensiunea cu care elevul va rula. În această situație, -60x61px
- .cat-eyeball - deja elevii înșiși. Setați poziția relativă la ochi, dimensiunea și, cel mai important, specificați calea către imagine - eyes.png. Dacă imaginile nu se află în același folder ca și stilurile, specificați calea corectă.
- # pisică-stânga și # pisică-dreapta-dreapta - ID pentru ochii stângi și drepți. Localizarea zonelor pentru mișcarea elevilor. Dacă modificați imaginea principală, acești parametri vor trebui să schimbe locația în raport cu blocul parental - #cat
Acum este rândul scenariului, dar pentru munca sa, mai întâi aveți nevoie de biblioteca jQuery. Dacă ați conectat-o, puteți trece peste acest pas. În sistemele de management, este implicit, dacă site-ul este auto-explicativ, atunci trebuie să te uiți. Dacă nu este acolo, atunci trebuie să o adăugați. se face fie în antet fie în subsolul sitului, adăugând această linie:
Dacă biblioteca pe care ați adăugat-o în antet, scriptul trebuie să fie în subsol. Dacă biblioteca este, de asemenea, în subsol, atunci după ce adăugați de aici codul:
Nu voi picta lucrarea scriptului, voi acorda atenție doar anumitor puncte. Prima este prima linie. Acestea indică calea piciorului stâng și drept. dacă le redenumiți în stiluri și HTML, atunci trebuie să faceți acest lucru în script-ul în sine.
Al doilea este zona de urmărire a cursorului. În acest script, linia 7 specifică - html. Aceasta este, de fapt, întreaga pagină. Uneori se folosește corpul. Dar dacă pagina nu este plină și subsolul nu este fixat în partea de jos a paginii, se întâmplă că corpul are doar o jumătate de pagină și trece dincolo de acesta, scriptul nu va mai funcționa, deci este mai bine - html. De asemenea, puteți specifica un anumit bloc în care cursorul va fi urmărit, în timp ce pe restul paginii acest lucru nu se va întâmpla. În astfel de cazuri, în loc de html, trebuie să specificați blocul idi, de exemplu #block_name. Puneți codul HTML din acest articol în interiorul blocului cu idi - #block_name și tot.
Asta e tot ce ai nevoie pentru a instala acest script pe site-ul tău. După cum am scris la început, acest script nu aduce multă valoare și există doar pentru a face site-ul să arate neobișnuit.
Asta e tot, vă mulțumesc pentru atenția acordată. 🙂
Dacă ai putea folosi munca mea, poți susține site-ul :)
Bună dragă prietenă
Aveți extensia AdBlock sau altele asemenea. Adăugați site-ul meu pe lista albă și, prin urmare, contribuiți la dezvoltarea acestuia. Instrucțiunea cum să dezactivați AdBlock Vreau aceeași fereastră
Articole similare
Trimiteți-le prietenilor: