Este posibilă animația pentru jpg sau cum să organizați cea mai simplă prezentare de diapozitive

Dupa cum probabil stiati deja, designul grafic are o mare importanta pentru orice site. Pentru o pagină de start (în special pentru fete), una dintre cele mai bune opțiuni de umplere poate servi drept galerie foto. Există nenumărate moduri de a organiza albume foto online, dintre care multe am spus deja de mai multe ori în edițiile anterioare ale revistei noastre. Astăzi vă oferim în atenția dumneavoastră una dintre căile rare de a crea o astfel de galerie.

Afișaj continuu de diapozitive.

Puteți vedea versiunea de lucru aici.

Ideea este foarte simplă. Creați o arhivă de imagini cu mai multe imagini. Elementele acestei imagini de arhivă [i] sunt numele fișierelor grafice corespunzătoare. Folosind funcția scroll_image (), suntem capabili să actualizăm galeria noastră (cu o anumită periodicitate, în cazul nostru, un secundă și jumătate). Dacă eliminăm stare n = 0, atunci nu vom avea o afișare ciclică a imaginilor, adică galeria va fi afișată o singură dată. Și ce se va întâmpla dacă reduceți timpul de tranziție la următoarea imagine de la o jumătate de secundă la câteva zecimi dintr-un ritm?

Crearea unei animații fără a folosi vechiul GIFA.

Mulți designeri web au foarte multe întrebări și ce trebuie să facă dacă imaginile gif sunt folosite în mod inconfundabil, iar animația trebuie să fie creată. De obicei, astfel de inconveniente se datorează faptului că GIF comprimă foarte slab imaginile fotografice. Desigur, întâlniți adesea pe bannerele gif animate de Internet de calitate proastă, în paleta de 32 și chiar 16 culori, în care se face o încercare de a transfera fotografia. În tot timpul, vreau să le spun creatorilor unor astfel de bannere că preferă să folosească jpg-compresie, chiar sacrificând animația. Se întâmplă de multe ori că jpg o calitate mult mai bună ocupă mai puțin spațiu pe disc. Dar, din păcate, jpg are un dezavantaj uriaș: nu poate fi făcut animat. Din fericire, folosind Java Script, în special scriptul pe care îl vedeți câteva linii de mai sus, puteți rezolva cu ușurință această problemă. Pentru a face acest lucru, trebuie doar să reducem timpul pentru actualizarea galeriei la câteva zeci de milisecunde. Veți vedea o secvență de jpg-uri care sunt actualizate cu viteza animației GIF. Deci, acum, folosind acest script, puteți face mici desene animate pe site-ul dvs.

Varianta de lucru puteți vedea aici.




Puteți vedea versiunea de lucru aici.

Pentru memorarea numărului cifrei care a fost afișat când a fost apăsat butonul "Pauză", a fost introdusă variabila rec. Este important să rețineți că de această dată funcția scroll_image este utilizată împreună cu parametrul. Deoarece este transmis numărul secvenței în imagine. Atunci când acest parametru este setat la "-1", funcția se oprește din execuție, adică slideshow-ul se termină aici. Puteți vedea modificările în scrierea funcției scroll_image salvând pagina cu versiunea de lucru.

Creați subtitrări în imagini.

com = array nou ()
pentru (i = 0; i<3;i++)
comm [i] = imagine nouă ();
dacă (i == 0) comm [i] = "imagine 1";
dacă (i == 1) comm [i] = "imagine 2";
dacă (i == 2) comm [i] = "imagine 3";
>

Vom actualiza valoarea acestui câmp utilizând aceeași funcție scroll_image. Pentru aceasta, trebuie să adăugați o linie la ea:

Puteți vedea versiunea de lucru aici.

Acest mod de a crea galerii nu este foarte comun pe Internet și este foarte rar să folosiți Java Script pentru a implementa secvența animată jpg-in. Primul mod este rezonabil de utilizat cel puțin pentru motivul că nu necesită o trecere la o pagină nouă, ceea ce mărește semnificativ viteza site-ului. Al doilea vă permite să măriți semnificativ calitatea imaginilor cu o dimensiune a fișierului echivalentă cu un gif animat de o calitate mai scăzută.