Lecție: răsfoirea unui document. Secrete și tehnici ale efectului de întoarcere a paginii de înaltă calitate

Multe site-uri folosesc pluginuri jQuery ca acestea pentru a oferi cataloage de produse, broșuri de vânzare și așa mai departe, și toate acestea dintr-un motiv. Soluțiile jQuery care vă permit să defilați prin blocuri de conținut oferă utilizatorilor dvs mod convenabil vezi ce ai de oferit. Dacă sunt făcute corect, astfel de broșuri electronice nu vor funcționa mai rău decât cele imprimate reale pe care le puteți ține în mâini. Cu ajutorul unor plugin-uri speciale, puteți permite vizitatorilor site-ului dvs. să întoarcă cu ușurință paginile și să simtă că citesc o carte adevărată.

Folosirea pluginurilor cu efect de glisare jQuery vă va permite să prezentați conținutul site-ului dvs. într-un mod mai atractiv. Înainte de a alege soluția potrivită pentru tine, ar trebui să câștigi niște abilități tehnice. Unele plugin-uri sunt încă bazate pe Flash și, prin urmare, nu permit utilizatorilor să caute material într-un mod adecvat și, în plus, nu vor funcționa pe dispozitivele iOS. Acest lucru are un impact negativ asupra optimizării SEO și, de asemenea, va duce la utilizatorii pur și simplu să nu găsească informațiile de care sunt interesați. Răsturnarea pluginurilor Baza jQuery vă permit să evitați toate aceste probleme. Pentru a vă ajuta să găsiți scriptul potrivit, astăzi am decis să vă oferim o selecție a unora dintre cele mai bune plugin-uri jQuery pentru implementarea efectului de răsturnare.

Această colecție constă din peste 20 de plugin-uri jQuery cu scopul corespunzător, care vă vor permite să implementați un mecanism de întoarcere a paginii. Fiecare plugin prezentat are propriile sale proprietăți unice, așa că vă sugerăm să vă familiarizați cu fiecare pe rând. După aceea, aș dori să vă exprimați părerea despre pluginul pe care l-ați ales pentru a-i ajuta pe alți cititori să evite căutări de rutină. Vă avertizăm în avans că unele dintre soluțiile oferite sunt plătite.

Acest plugin creează o galerie pentru o imagine sub forma unei reviste. Puteți întoarce paginile unei cărți pentru a vizualiza anterioară sau următoarele imagini pur și simplu trăgând colțurile animate care apar când treci cu mouse-ul peste galerie.

Booklet este un instrument jQuery pentru afișarea conținutului pe pagini inversate. A fost dezvoltat pe baza bibliotecii jQuery. Se raspandeste sub acord de licențiere MIT și GPL.

jPageFlip este un plugin jQuery pentru simularea procesului de răsturnare a paginilor. Pentru a utiliza jPageFlip va trebui să încorporați fișierul jQuery.js. jPageFlip este foarte personalizabil. Este planificat să se adauge mai multe opțiuni de setări în versiunile viitoare. jPageFlip activat acest moment se bazează pe „canvas”, care este acceptat numai în Firefox, Chrome, Opera și Safari (și în cele mai recente versiuni).

Flippy este un plugin jQuery pentru crearea unui efect de răsturnare a paginii între browsere, care vă permite să „întoarceți” orice element HTML doriți.

Pluginul imBookFlip poate încărca o carte într-un iframe sau direct pe o pagină. Puteți comuta paginile cărții la întoarcerea manuală, puteți activa rotirea automată imediat după ce pagina este încărcată sau puteți seta funcția pentru a activa întoarcerea după ce faceți clic pe copertă. De asemenea, puteți adăuga cu ușurință sunet folosind Sound Manager.

Flip este un plugin jQuery care poate inversa cu ușurință elemente de pe paginile dvs. în 4 direcții.

FlipPage este un plugin jQuery care simulează răsturnarea paginilor ca într-o carte.
Pluginul a fost dezvoltat inițial pentru prezentări; și-a găsit locul și în dispozitive precum carte electronică. Acest plugin a fost conceput pentru a valorifica puterea hardware-ului grafic pentru a juca animații netede pe HTML5/CSS3.

Glisorul este capabil să schimbe imaginile din portofoliu, răsfoind prin ele atunci când utilizatorul face clic pe comenzi. Adică, atunci când utilizatorul face clic pe o imagine, aceasta începe să se rotească la 360 de grade, iar când animația se termină, utilizatorul vede o nouă imagine.

Turn.js este o bibliotecă JavaScript care vă va transforma conținutul într-o carte sau o revistă aproape reală, cu toate beneficiile HTML5. Internetul s-a schimbat dramatic odată cu apariția interfețelor bazate pe HTML5. turn.js este ideal pentru publicarea de reviste, cărți sau cataloage bazate pe HTML5.

Acest plugin creează un efect de întoarcere a paginii deasupra sau în interiorul imaginilor afișate, care seamănă cu grafica 2D.

În fiecare zi, jQuery devine din ce în ce mai popular datorită confortului, flexibilității și vitezei sale. Această animație în stil blocnotes este ideală pentru prezentarea informațiilor pe un site web.

BookBlock este un plugin jQuery pe care îl puteți folosi pentru a crea componente în stil broșură care vă oferă posibilitatea de a implementa navigarea la întoarcerea paginii. Puteți folosi orice conținut aici, fie el imagini sau text. Pluginul transformă structura doar atunci când este necesar (de exemplu, la întoarcerea unei pagini) și folosește suprapuneri sub formă de umbre pentru pagini, ceea ce dă un sentiment de realism.

FlipBook este capabil să colecteze mai multe imagini și apoi să le anime. Fiecare imagine este afișată pentru o perioadă scurtă de timp și apoi înlocuită cu o altă imagine din listă. Animația începe când prima imagine este complet încărcată, iar imaginile care nu au fost încă descărcate de pe server sunt pur și simplu sărite. Sunt incluse în animație numai după ce sunt încărcate complet de browser.

Metro JS este un plugin javascript pentru jQuery conceput pentru a vă oferi posibilitatea de a crea interfețe în stil Metro. Această versiune este centrată pe Live Tiles, Application Bar și Theming. În prezent este în dezvoltare timpurie, dar toate funcțiile ar trebui să funcționeze pe IE7+ (Win/WinPhone), Firefox, Chrome, Android, Opera și Safari (OSX/iOS).

Efectul de întoarcere a paginii este cel mai adesea creat cu folosind Flash animaţie. Pe Internet, acest efect câștigă popularitate în reviste onlineși prezentări. Acest lucru se datorează implementării acestui efect în cărți electronice și dispozitive mobile.

În acest articol, vom folosi PHP și pluginul turns.js pentru a implementa un efect de întoarcere a paginii folosind CSS3 pur și jQuery. Vom face cele mai populare poze de pe Instagram.com și vom crea o revistă frumoasă.

HTML

În primul rând, trebuie să înțelegem elementele de bază ale acestui exemplu. Vom folosi un design simplu de pagină care combină marcajul HTML5 și PHP într-un singur fișier. Acest lucru va face mai ușor de înțeles. Rezultatul execuției îl puteți vedea mai jos:

index.php

Aici ne conectăm stil.css, în cap, și fișiere javascriptîn partea de jos. În continuare, includem încă 3 fișiere js: biblioteca jQuery, turn.js, script.js, în care vom inițializa pluginul și vom primi evenimente de la tastatură. Codul PHP pe care îl vom scrie puțin mai târziu va fi executat în #magazine bloc div. PHP va genera paginile noastre de jurnal, care vor fi necesare pentru turn.js.

Ca exemplu, puteți privi primele trei pagini ale jurnalului generat cu folosind PHP:

1 // 32 2 // 32 3 // 32

Codul pe care l-ați văzut se află în întregime în blocul div #magazine. Acesta este singurul lucru de care are nevoie turns.js. Nu trebuie să creați niciunul clase speciale sau atribute de dată pentru elementele care vor fi interpretate în pagini. Cu asta suntem gata să începem scriind PHP cod!

PHP

PHP se va conecta la API-ul Intagram, va stoca în cache rezultatele și va genera marcajul pe care l-ați văzut mai sus.

Primul pas va fi Înregistrare Instagram site-ul dezvoltatorului. După care veți primi o cheie client_id, pe care o vom introduce ca valoare într-o variabilă $instagramClientID, în dosar index.php. Nu avem nevoie de funcționalitate API avansată, vom solicita doar cele mai populare imagini. Acest lucru ne va elibera de a utiliza autentificarea OAuth suplimentară, ceea ce va face codul mai dificil de înțeles.

Mai jos este un exemplu de răspuns JSON al imaginilor populare curente de pe Instagram. Am ascuns câteva atribute pentru a face codul mai clar.

( „meta”: ( „cod”: 200), „date”: [( „etichete”: [„frumos”, „cer”], „locație”: „null”, „comentarii”: ( „număr”: 31, „date”: [...] ), „filtru”: „Normal”, „created_time”: „1331910134”, „link”: „http:\/\/instagr.am\/p\/IPNNknqs84\ /”, „aprecie”: ( „număr”: 391, „date”: [..]), „imagini”: ( „rezoluție_low”: ( „url”: „http:\/\/distilleryimage8.instagram.com \ /03c80dd86f7911e1a87612313804ec91_6.jpg "," lățime ": 306," înălțime ": 306)," thumbnail ": (" url ":" http: \/\/distilleryimage8.instagram.com \/03c80dd86f7911e1a87613131380dd86f7911e1a8761231313804. jpg "," lățime ": 150, "înălțime": 150 ), "rezoluție_standard": ( "url": "http:\/\/distilleryimage8.instagram.com\/03c80dd86f7911e1a87612313804ec91_7.jpg", "lățime": 61":2 612 )), „caption”: ( „created_time”: „1331910148”, „text”: „Noapte bună.\ue056”, „de la”: ( „nume de utilizator”: „jent99”, „profile_picture”: „http:\/ \ /images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg", "id": "6227738", "full_name": "jent99" ), "id": "148395540733414783:" ), "type":" ), "image" , "id": "148395420004568888_6227738", "user": ( "nume de utilizator": "jent99", "site-ul web": "", "bio": "În mare parte, fotografii din natură.\ue32b\ue32b\ue32b Sper că vă plac.\ ue056 \ue32a \ue334gi\ue334 ", "profile_picture": "http:\/\/images.instagram.com\/profiles\/profile_6227738_75sq_1319878922.jpg", "full_name": "jent98" "27": "jent96" "277":38922.jpg ) ), ( /* Mai multe fotografii vin aici... */ )] )

API-ul este limitat la cele mai recente 32 de imagini, dar acest lucru este suficient pentru exemplul nostru. Puteți vedea că fiecare fotografie are trei dimensiuni, dar vom folosi doar una. Prezent și aici Informații suplimentare despre etichete, comentarii și așa mai departe.

PHP va stoca în cache rezultatele acestei solicitări API. În acest fel vom primi cele mai recente poze în fiecare oră. Acest lucru va face aplicația noastră mai rapidă și va limita numărul de apeluri API.

index.php

// Puteți obține ID-ul clientului de la API-ul Instagram page $instagramClientID = "-- introduceți aici cheia de identificare a clientului --"; $api = "https://api.instagram.com/v1/media/popular?client_id=".$instagramClientID; $cache = "cache.txt"; if(file_exists($cache) && filemtime($cache) > time() - 60*60)( // Dacă fișierul cache există și // este mai recent de 1 oră, îl vom folosi $images = unserialize( file_get_contents($cache )); ) else( // Creați o solicitare API și generați un fișier cache // Obțineți 32 de fotografii populare pe Instagram $response = file_get_contents($api); $images = array(); // Decode răspunsul și creați o matrice foreach(json_decode($response)->data ca $item)( $title = ""; if($item->caption)( $title = mb_substr($item->caption->text, 0,70,"utf8"); ) $src = $articol->imagini->rezoluție_standard->url; $imagini = matrice("titlu" => htmlcaracterele speciale($titlu), "src" => htmlcaracterele speciale($src )); ) // Ștergeți ultima imagine, dar vom avea // ​​32 de imagini când vom adăuga cover array_pop($images); // Adăugați coperta la începutul matricei array_unshift($images,array( "title"=>"Copertă", "src"=>"assets/img /cover.jpg")); // Actualizați fișierul cache file_put_contents($cache,serialize($images)); ) // creează un marcaj $ totalPages = count($imagini); foreach($imagini ca $i=>$imagine)( ?> " />