Efekti i kthimit të faqeve. Programe për kthimin e faqeve. Si të tregoni imazhe të ndryshme për pajisje të ndryshme

Ju mund të përdorni çdo përmbajtje, të tilla si imazhe ose tekst. Ky plugin krijon një galeri të imazheve, të bëra në formën e një libri. Ideja është të shfletoni përmbajtjen, si faqet e librave, dhe të hyni në faqet përmes menusë anësore, e cila do të dalë në të majtë. Personalizimi është konfiguruar në skriptin. Edhe pse scrolling ka kuptim për pajisjet me prekje, zvarritja do të bëhet për shfletues të rregullt. A keni parë vende në të cilat fotografitë e të punësuarve janë kthyer me kokë poshtë?

Ju rri pezull miun mbi imazhin e punonjësit dhe imazhi do të rrokulliset për të treguar emrin e punonjësit.

• Dekompresoni skedarin.
• Ngarko skedarin në faqen tuaj te internetit.

• Klasa, të cilën ne do t'i thërrasim më vonë në klasën e kontejnerëve me gjurmë.
• Imazhi për tu shfaqur si parazgjedhje. prapa klasës enë.
• Përmbajtja duhet shfaqur kur ndodh një rrokullisje.

Brenda tag titullin, shkarko kodin më poshtë në rendin e treguar më poshtë. Hapni faqen tuaj në një shfletues për të parë rezultatin përfundimtar. Rri pezull mbi imazhin për të parë efektin e reflektimit horizontal. Ju duhet ta shkarkoni veçmas. Kjo bibliotekë është e lirë për përdorim personal. Duke kthyer një faqe të një libri dixhital është një mënyrë e shkëlqyeshme për të paraqitur përmbajtje dhe për të tërhequr më shumë lexues. Si të sillni efektin e kthimit të faqes për dokumentet tuaja?

Krijo një flipbook me përvojën më të mirë të kthimit të faqes dhe ndërfaqen e librit. Ju mund të rrokullisni manualisht secilën faqe të librit ose të luani automatikisht duke shijuar animacionin.

Mbështetni formate të shumta të importit. Definoni një faqe të importit për të gjithë ose një pjesë të faqes.

Compatible me shfletuesit modern dhe pajisje të lëvizshme.



Ju mund ta shkarkoni dhe ta përdorni këtë program falas. Përdoruesit e lirë mund ta shkarkojnë librin në internet.

Së pari, duhet të shikosh dhe të hapësh dokumentin tënd në panelin "Import Files" dhe pastaj kliko butonin "Import Tani".

Formulari i kërkimit të pazakontë

Së dyti, zgjidhni një shabllon në panelin e modelit. Së treti, bëni një temë të mrekullueshme me një sfond dhe ngjyrë unike të butonit të ndeshjes. Nëse doni të kurseni kohë, programi ofron shumë tema të para-instaluara. Së katërti, ky hap është opsional. Thjesht hapni panelin e Shënimit për të ndryshuar titullin për secilën faqe. Së fundi, le të shkarkoni në internet dhe të ndani librin e rrokullisjes që kemi krijuar me njerëz.

Funksionaliteti kryesor do të jetë krijimi i një lloji të ri të galerisë bazuar në disa imazhe dhe madhësitë e tyre përmes një kodi të shkurtër. Mënyra më e mirë  duke parë atë në veprim është instaluar atë vetë. Instaloni dhe aktivizoni plugin, atëherë të gjithë ju duhet të bëni është të shtoni një kod të shkurtër në faqe, për shembull.

Dhe kjo është rezultati që ju merrni. Por çfarë magji e zezë po ndodh? E pra, në fakt është shumë e thjeshtë. Le të mësojmë të krijojmë diçka të tillë. në këtë moment  Do të ishte mirë nëse do të kishit një mjedis testimi, kështu që mund të prisni dhe të provoni materialin. Dosja dhe dosja duhet të kenë një emër të thjeshtë dhe unik, kështu që të shmangni konfliktet me shtojcat ekzistuese. Pastaj përmbajtja kryesore e dosjes sonë duket si kjo.

Tani ne duhet të përfshijmë disa aseteve të rëndësishme të jashtme. Dosjet e jashtme të kërkuara për funksionet themelore  Ata janë. Nëse ju vetëm shtoni tags script dhe stil, ju do të keni disa probleme. Ne i quajmë elementë të jashtëm me tre në mënyra të ndryshme: këtu ata janë.

Një nga gjërat e rëndësishme që duhet marrë parasysh kur thirret me skedarë të jashtëm është të kesh më shumë kod që do të varet nga ky plugin. Kjo në thelb përcakton nëse dosja juaj do të thirret në kokë ose në këmbë.

Le të fillojmë me hapat për të krijuar një kod të shkurtër. Është mjaft e thjeshtë, vetëm duhet të shtoni një çelës të shkurtër të kodit dhe një funksion që do të ekzekutohet. Tani duhet të krijojmë funksionin tonë dhe të marrim atributet tona. Por disa atribute mund të jenë opsionale, që do të thotë se do të duhet të krijojmë vlera të paracaktuara për ta.

Ju mund t'i shihni ato në veprim në pjesën e parë të funksionit tonë. Një tjetër pikë e rëndësishme këtu është përshtatja e madhësisë nëse përdorim stilin e revistës. Tani mund ta rregulloje dhe ta ndryshosh atë sipas dëshirës, ​​duke shtuar parametra shtesë, duke redaktuar atë që nuk funksionon për ju ose duke e kombinuar atë me shtojca të tjera.

Ndoshta doni të mësoni se si të bëni? Si duhet ta përdorë e-librin përdoruesit? Me kaq shumë lexues të kualitetit të lartë në treg sot, duket sikur kjo veçori kuptohet mjaft mirë. Megjithatë, pyesnim veten nëse do të ishte e mundur të përshtatej perceptimi i leximit elektronik. Do të jenë ata që thjesht duan të shkojnë në faqen tjetër sa më shpejt të jetë e mundur. Pastaj do të ishin ata që dëshironin që faqja të transformohej në të njëjtën mënyrë si në formë të shtypur.

Vendosja e aeroplanit të referencës

A e keni vënë re ndonjëherë këtë kur lexoni një libër të shtypur, disa njerëz kalojeni butësisht mbi faqen kur lexojnë, ndërsa të tjerët e drejtojnë një faqe me një manovër më agresive? Nëse preferoni të kaloni detajet, ekziston një demonstrim interaktiv në pjesën e poshtme të faqes. Gjëja e parë që ne kishim nevojë për të vendosur ishte pika referimi për algoritmin e rrotullimit të faqes. Meqë algoritmi ynë mbështetet tërësisht në gjeometrinë e sheshtë, do të ishte mirë të rregulloje lidhjen tonë duke përdorur vetëm dy dimensione.

Shifra e sipërme në figurën në të djathtë është një sistem koordinativ tre-dimensional standard me një "faqe" nga një libër hipotetik. Efekti, megjithatë, nuk është tërheqës vizual, por në të vërtetë është mjaft i papërshtatshëm dhe i vështirë, sikur ka pasur faqe kartoni në librin tuaj. Rrjedhimisht, algoritmi bëhet një nga gjeometrinë euklidiane të thjeshtë. Cili trekëndësh që keni në kryqëzim varet tërësisht nga lloji i efektit të rrotullimit të faqes, ne kemi vendosur të zhvillojmë algoritmin tonë në mënyrë që kryqëzimi i dy faqeve të formojë një trekëndësh të drejtë isosceles.

Shembuj të ftohtë të përdorimit të animacionit CSS

Ishte gjithashtu e mundur të përdoreshin forma të tjera gjeometrike të tre faqeve të cilat mund të ofrojnë një efekt vizual edhe më interesant, por këndi i djathtë me një kënd është ndoshta më i thjeshtë dhe ndoshta më i lehtë për t'u ilustruar. By default kjo është qendra e skenës. Nëse doni që rotacioni t'i referohet ndonjë pike tjetër, do t'ju duhet të rregulloni perspektivën e projektimit. Trekëndëshi i pjerrët ka dy anët e barabarta. Përveç kësaj, ne shkallëzojmë gjerësinë e secilës faqe në përputhje me këndin e saj të rrotullimit nga pozicioni i tij origjinal.

Nëse normalizon këtë duke shumëzuar të gjitha tri anët me √2, mund të shihni se kemi një raport aspekt, të cilin e përmendëm më lart për trekëndëshin e saktë isoscel. Në këtë moment, faqja tjetër fillon "curl" e saj në faqen aktuale, kur përpiqemi të kapim pamjen dhe kthesën e faqes në libër. Një shënim, që do të shihni në demonstratën interaktive, është se ne kemi nevojë të shtojmë drejtkëndëshat me ngjyra për të pasqyruar drejtkëndën e faqes vetë.

Formimi i një trekëndëshi të rregullt isosceles

Sapo faqet të ndërpresin dhe faqja e ardhshme fillon të "zbukurojë" mbi faqen aktuale, ne duhet të kemi një mënyrë për të llogaritur jo vetëm shkallëzimin e faqes tjetër, por edhe vendosjen e saktë të maskave që lejojnë faqen tjetër të shfaqë ose fshehë faqen aktuale, e cila është e shaded. Duke përdorur ilustrimin në të djathtë, shpresojmë se mund ta bëjmë të qartë.

Prandaj, vendosëm të thjeshtonim matematikën me një përafrim që është pak vizual. Dallimi në mes të pikave të fundit është mezi i dukshëm. Kjo na lë me një shprehje për gjerësinë e maskës, e cila "hap" faqen tjetër. Gjithashtu shkallëzimi i faqes tjetër në mënyrë që të kthehet në gjerësinë e saj të plotë deri në kohën kur përfundon kthesa, është vetëm një çështje e "kthimit" të asaj që bëmë kur këndi i kthesës ishte më pak se 45 °. Edhe në qoftë se doni të rrotulloni maskat tuaja në dimensionin e tretë, nuk mund ta bëni flashin thjesht të shfaqni grafikat sikur të mos ketë maska.

Kjo është arsyeja kryesore pse kemi shtuar rectangles fiktive me gjerësi fikse për të simuluar lëvizjen e faqeve aktuale dhe për të siguruar një "hint" të përcaktuar mirë për maska ​​për të rregulluar pozicionin e tyre në lidhje me. Për të krijuar efektin, ne do të përdorim shtresën e rregullimit të mbushjes së ngjyrës, maskën e shtresës së gradientit dhe deformimin.

Ju mund ta aplikoni këtë efekt në një imazh ekzistues, ose mund ta aplikoni në një bllok ngjyre që mund të përdorni në shiritin anësor në një faqe interneti, për shembull. Është e rëndësishme që imazhi i qenit ishte shtresa e poshtme në pirg. Nëse ka një shtresë sfondi, thjesht fshini atë në mënyrë që të keni vetëm një shtresë. Rezultati duhet të jetë diçka e tillë.

Vetem maska ​​e shtreses do te zgjidhet. Tani duhet të shihni një rrjet të vogël të pikës së ankorimit në këndin e poshtëm të majtë të imazhit. Këto ditë gjëra të ngjashme kanë ndodhur me libra, pothuajse askush nuk lexon libra të bërë nga letra, sepse është shumë më e lehtë të lexosh një libër elektronik, i cili kushton më së shumti si një mbulesë libri ose një shkarkim falas. Por nëse prekim çmimet; librat elektronikë janë më të lirë se librat e letrës dhe disa lexues të librave kanë më pak vlerë se një libër të tërë letre.

Rehabilitimi i faqes tënde

Në vend që të shfaqni të gjithë tekstin, lidhjet dhe imazhet në një faqe të gjatë të mërzitshme, ju mund ta bëni prezantimin më interaktiv dhe të animuar me efektet e faqeve të rrokullisjes. Disa nga kodi rudimentar, siç janë deklaratat e ndryshueshme dhe abonimi i dëgjuesve të ngjarjes, janë përjashtuar nga copëzat në këtë artikull, prandaj sigurohuni që t'i referoheni shembullit të punës. Joe Lambert ju fton për të krijuar një efekt mahnitës të rrotullimit të faqes për të rritur galerinë e imazhit në portofolin tuaj.