Banner de animație pentru site
Acum voi descrie în detaliu cum funcționează glisorul, apoi vă voi spune cum să îl puneți pe site și ce trebuie să știți pentru a schimba imaginea sau a schimba dinamica și diagrama fiecărui diapozitiv. În primul rând, voi spune că am petrecut mult timp cu acest glisor, curățându-l de o grămadă de gunoi inutile (sub formă de imagini, fișiere css și js și cod suplimentar). În al doilea rând, voi spune că acest slider animat m-a ajutat să fac o prezentare pe un site, care s-a dovedit a fi destul de bună și funcțională. Bannerul este format din patru diapozitive, în care există câteva informații sub formă de text și imagini. Fiecare imagine și bloc de text alunecă ușor de sus, jos, dreapta sau stânga, iar fiecare element are propriul său timp să apară. Și astfel sunt afișate patru diapozitive cu animații diferite ale informațiilor care părăsesc.
Din navigare există săgeți pentru a vizualiza următorul diapozitiv sau a reveni la cel anterior. Există, de asemenea, gloanțe, cu care puteți controla și bannerul, și un indicator al timpului de schimbare a diapozitivei sub forma unui cerc cu o bară roșie în mișcare.
Instalarea unui banner animat pe site
1. Descărcați arhiva de pe site-ul meu făcând clic pe butonul „Descărcare”.
2. Despachetați arhiva la rădăcina site-ului dvs
3. Noi prescriem căile către fișierele css și js pe pagina în care veți plasa acest banner. Între și introduceți următorul cod:
În următoarele rânduri:
se va putea șterge, deoarece aceasta este conexiunea fonturilor latine și cel mai probabil veți avea fonturi românești în glisor
4. Lipiți acest cod unde veți avea un glisor:
Glisorul este gata! Acum să vorbim despre gestionarea acestuia și schimbarea diapozitivelor. Voi spune doar de ce sunt responsabil și tu însuți vei încerca deja și experimenta. Nu uitați că toate numerele din codul html sunt prezentate înca pixeli, iar elementele sunt poziționate relativ la marginea din stânga și sus.
data-initial-stânga - este responsabil pentru poziția din care coordona va ieși blocul din partea stângădata-inițial-sus - este responsabil pentru poziția din care coordonate blocul va ieși de sus 6>data-final-left - poziția finală a elementului în glisor, relativ la marginea din stângadata-final-top - poziția finală a elementului în glisor, în raport cu partea de susdata-duration - cât de repede va apărea imaginea sau textuldata-fade-start - transparență la pozitia de start a elementului (valoarea este indicata ca procent)data -delay - dupa ce ora va incepe sa apara elementul (in secunde)