Lejupielādējiet lapas pagriešanas efekta skriptu. JQuery flipping — lapu pagriešanas efekts jquery
Сodrops ir labākais tīmekļa dizaina emuārs. Tur vienmēr var atrast daudz radošāko lietu tīmekļa dizaineriem. Milzīgs pluss ir tas, ka viņi arī stāsta, kā piestiprināt vai izveidot šo vai citu efektu. Ārzemēs tas ir ļoti populārs, bet Krievijas internetā nez kāpēc ne tik ļoti. Kopumā dizaineram ļoti noderīga vietne, tur var smelties daudz iedvesmas un daudz ko iemācīties, jo tur tiešām ir uzlabotas CSS nodarbības.
Šodien es vēlos iepazīstināt jūs ar 15 foršām nodarbībām no šīs brīnišķīgās vietnes. Visas “mikroshēmas” ir pilnīgi bez maksas, un tās var viegli lejupielādēt. Nu, tagad paskatīsimies tuvāk.
Jūs varētu interesēt arī šis:
Dinamisks režģis ar skaistu animācijuTas ir lielisks risinājums jūsu bloku kārtošanai vietnē, un šo režģi var viegli izmantot arī attēliem. Šis režģis ir izveidots, izmantojot tīru CSS.
Kā izveidot foršus attēla lidojuma efektus, izmantojot CSSŠajā pamācībā ir parādīts, kā attēlam izveidot izcilus kursora novietošanas efektus. Piemērā ir iekļauti pat 7 pilnīgi atšķirīgi piemēri, kā arī instrukcijas, kā izveidot šo brīnumu, izmantojot CSS.
Daudz piemēru CSS pogām ar lieliskiem kursora efektiem, šīs pogas var pielāgot atbilstoši savai gaumei.
Lieliska nodarbība, kurā pastāstīts, kā savai vietnei izveidot īstas elektroniskas klavieres.
Šajā nodarbībā ir 9 piemēri, kuriem ir dažādi stili, virzot kursoru virs ikonām, viss izskatās ļoti stilīgi un moderni. Piemēram, varat brīvi izmantot šos efektus sociālo grāmatzīmju ikonām savā vietnē.
Šeit jūs uzzināsit, kā efektīvi apgriezt bloku, izmantojot CSS. Ir arī 5 pilnīgi atšķirīgi piemēri.
Šeit ir 4 piemēri, kas detalizēti parāda, uz ko spēj CSS animācija.
Piemēram, es vēl nekad neesmu redzējis šo, piemēram, jūs vēlaties ēst restorānā, tāpēc meklējat vajadzīgo restorānu Google, ievadiet vēlamo vietu meklēšanas laukā. Tagad paskatieties, kā to var īstenot daudz radošāk un ērtāk.
Šeit jūs uzzināsit, kā ieviest dažādu attēlu attēlošanu atkarībā no tā, kurā ierīcē tiek skatīts jūsu resurss.
Lieliska nodarbība, kurā uzzināsiet, kā izveidot skaistu un atsaucīgu izvēlni, izmantojot CSS ar Retina ekrānu atbalstu.
Skaisti efekti, ar kuriem var īstenot pilnekrāna lappušu pārvēršanu
Daudzās vietnēs tiek izmantoti jQuery spraudņi, piemēram, šie, lai nodrošinātu produktu katalogus, pārdošanas brošūras un tā tālāk, un tas viss ir iemesla dēļ. jQuery risinājumi, kas ļauj ritināt satura blokus, piedāvā lietotājiem ļoti ērtu veidu, kā izpētīt to, ko jūs viņiem piedāvājat. Ja tas tiek izdarīts pareizi, šādas elektroniskās brošūras darbosies ne sliktāk kā īstas drukātās brošūras, kuras varat turēt rokās. Ar īpašu spraudņu palīdzību jūs varat ļaut vietnes apmeklētājiem viegli pāršķirt lapas un justies tā, it kā viņi lasītu īstu grāmatu.
Izmantojot jQuery vilkšanas efekta spraudņus, varēsiet parādīt savas vietnes saturu pievilcīgākā veidā. Pirms izvēlaties sev piemērotāko risinājumu, jums vajadzētu iegūt dažas tehniskas iemaņas. Daži spraudņi joprojām ir balstīti uz Flash, un tāpēc tie neļauj lietotājiem meklēt materiālu atbilstošā veidā un turklāt tie nedarbosies iOS ierīcēs. Tas negatīvi ietekmē SEO optimizāciju, kā arī novedīs pie tā, ka lietotāji vienkārši neatradīs viņus interesējošo informāciju. Uz jQuery balstīti flipping spraudņi ļauj izvairīties no visām šīm problēmām. Lai palīdzētu jums atrast pareizo skriptu, šodien mēs nolēmām jums piedāvāt dažus no labākajiem jQuery spraudņiem flipping efekta ieviešanai.
Šī kolekcija sastāv no vairāk nekā 20 atbilstoša mērķa jQuery spraudņiem, kas ļaus realizēt lappušu pavēršanas mehānismu. Katram piedāvātajam spraudnim ir savas unikālas īpašības, tāpēc iesakām iepazīties ar katru no tiem pēc kārtas. Pēc tam es vēlētos, lai jūs izteiktu savu viedokli par jūsu izvēlēto spraudni, lai palīdzētu citiem lasītājiem izvairīties no ikdienas meklēšanas. Jau iepriekš brīdinām, ka daži no piedāvātajiem risinājumiem ir maksas.
Šis spraudnis izveido galeriju attēlam žurnāla formā. Varat pāršķirt grāmatas lappuses, lai skatītu iepriekšējos vai nākamos attēlus, vienkārši velkot animētos stūrus, kas parādās, virzot kursoru virs galerijas.
Buklets ir jQuery rīks satura parādīšanai lappušu pāršķiršanā. Tas tika izstrādāts, pamatojoties uz jQuery bibliotēku. Tas tiek izplatīts saskaņā ar MIT un GPL licences līgumu.
jPageFlip ir jQuery spraudnis, kas simulē lappušu pārvēršanas procesu. Lai izmantotu jPageFlip, jums būs jāiegulst fails jQuery.js. jPageFlip ir ļoti pielāgojams. Nākamajās versijās plānots pievienot vairāk iestatījumu opciju. jPageFlip pašlaik ir balstīts uz “audekls”, kas tiek atbalstīts tikai pārlūkprogrammās Firefox, Chrome, Opera un Safari (un jaunākajās versijās).
Flippy ir jQuery spraudnis, lai izveidotu starppārlūkprogrammu lapu apvēršanas efektu, kas ļauj "apgriezt" jebkuru vēlamo HTML elementu.
Spraudnis imBookFlip var ielādēt grāmatu iframe vai tieši lapā. Varat pārslēgt grāmatas lapas uz manuālu virpošanu, iespējot automātisko pāršķiršanu tūlīt pēc lapas ielādes vai iestatīt funkciju, lai pēc noklikšķināšanas uz vāka tiktu iespējota pāršķiršana. Varat arī viegli pievienot skaņu, izmantojot Sound Manager.
Flip ir jQuery spraudnis, kas var viegli pagriezt elementus jūsu lapās 4 virzienos.
FlipPage ir jQuery spraudnis, kas simulē lappušu pāršķiršanu it kā grāmatā.
Spraudnis sākotnēji tika izstrādāts prezentācijām, tas atrada savu vietu arī tādā ierīcē kā e-lasītājs. Šis spraudnis tika izstrādāts, lai izmantotu grafikas aparatūras jaudu, lai renderētu vienmērīgas HTML5/CSS3 animācijas.
Slīdnis spēj mainīt portfeļa attēlus, pāršķirot tos, kad lietotājs noklikšķina uz vadīklām. Tas ir, kad lietotājs noklikšķina uz attēla, tas sāk griezties par 360 grādiem, un, kad animācija beidzas, lietotājs redz jaunu attēlu.
Turn.js ir JavaScript bibliotēka, kas pārvērš jūsu saturu gandrīz īstā grāmatā vai žurnālā ar visām HTML5 priekšrocībām. Internets ir dramatiski mainījies līdz ar HTML5 balstītu saskarņu parādīšanos. turn.js ir ideāli piemērots žurnālu, grāmatu vai katalogu publicēšanai, pamatojoties uz HTML5.
Šis spraudnis rada lappušu pārvēršanas efektu parādīto attēlu augšdaļā vai to iekšienē, kas atgādina 2D grafiku.
Ar katru dienu jQuery kļūst arvien populārāks, pateicoties tā ērtībai, elastībai un ātrumam. Šī piezīmju bloka stila animācija ir ideāli piemērota informācijas prezentēšanai vietnē.
BookBlock ir jQuery spraudnis, ko varat izmantot, lai izveidotu bukleta stila komponentus, kas sniedz iespēju ieviest lappuses pāršķiršanas navigāciju. Šeit varat izmantot jebkuru saturu, neatkarīgi no tā, vai tie ir attēli vai teksts. Spraudnis pārveido struktūru tikai nepieciešamības gadījumā (piemēram, pāršķirot lapu), un lapām izmanto pārklājumus ēnu veidā, kas rada reālisma sajūtu.
FlipBook spēj savākt vairākus attēlus un pēc tam tos animēt. Katrs attēls tiek parādīts īsu laiku un pēc tam tiek aizstāts ar citu attēlu sarakstā. Animācija sākas, kad pirmais attēls ir pilnībā ielādēts, un attēli, kas vēl nav lejupielādēti no servera, tiek vienkārši izlaisti. Tie tiek iekļauti animācijā tikai pēc tam, kad pārlūkprogramma tos ir pilnībā ielādējusi.
Metro JS ir jQuery javascript spraudnis, kas paredzēts, lai sniegtu jums iespēju izveidot Metro stila saskarnes. Šis laidiens ir vērsts uz Live Tiles, Application Bar un Theming. Pašlaik tas ir izstrādes sākumā, taču visām funkcijām vajadzētu darboties operētājsistēmās IE7+ (Win/WinPhone), Firefox, Chrome, Android, Opera un Safari (OSX/iOS).
Flash albums ar lappušu pagriešanas efektu
Nesen internetā atradu brīnišķīgu programmu fotoalbumu veidošanai. Un ne tikai fotoalbumus, bet arī Flash albumus, kuriem ir lappušu pāršķiršanas efekts! Tādu albumu var ievietot Youtube swf formātā un savā mājaslapā kā html lapu, no tā var izveidot exe failu utt... Ko lai saka, paskaties ko saņēmu tikai 20 minūtēs!
Flip Album ir programma, kas pārveido parastos fotoattēlus izcilos zibatmiņas albumos + lapu pagriešanas efekts! Tagad jūs varat izveidot brīnišķīgus tiešsaistes fotoalbumus no savu fotoattēlu un attēlu kolekcijas.
1. Pēc programmas palaišanas noklikšķiniet uz "Fons", atlasiet "Atlasīt no fona..." - ja mēs izmantojam programmas iebūvēto fonu.
Ja jums ir savs fons, atlasiet “Atlasīt no sava datora”. Un ievietojiet savu fotoattēlu
2. Noklikšķiniet uz “Foto” un pievienojiet mums vajadzīgo fotoattēlu. To var izstiept, samazināt un pagriezt
3. Noklikšķinot uz “Mask”, atlasiet vienu no kadrēšanas efektiem.
4. Noklikšķinot uz “Teksts” varat pievienot fotoattēlam parakstu, atzīmējot izvēles rūtiņu “Ēna” mēs pievienojam tekstam ēnu
Mēs iegūstam pirmo gatavo lapu.
5. Tādā pašā veidā mēs pievienojam tik daudz lapu, cik mums nepieciešams. Pēc tam noklikšķiniet uz “Publicēt”
6. Mēs nokļūstam jaunā logā, zem uzraksta “Veidnes” izvēlamies veidni, iestatījumos (Opcijas) varat mainīt fotoattēlu kvalitāti utt. Tālāk noklikšķiniet uz “Convert To Flipping Book”
7. Konversijas logā atlasiet izvades faila formātu, piemēram, EXE. Izvēlieties saglabāšanas mapi, faila nosaukumu un noklikšķiniet uz "Konvertēt".
Tas būtībā arī viss...
Pārslēdzot slaidus ar pārejas efektu, kas sasaucas ar PowerPoint prezentācijas tēmu, skatītāju var uzreiz apburt slaidu pārslēgšanas veids. Tas ne tikai piešķir prezentācijai novitāti un stilu, bet arī novērš vienmuļību un garlaicību.
Pārejas efekti, lai programmā PowerPoint pievienotu lapas pagriešanas efektuLapas efekts ir jaudīga metode animēta satura izveidei neatkarīgi no tā, vai tā ir video animācija vai prezentācija. Pēc noklusējuma PowerPoint nodrošina dažādus pārejas efektus, ko var izmantot, lai prezentācijas slaidiem piešķirtu lappuses pārvēršanas efektu, tostarp Off Peel, Page Curl un Drape efektu.
Kāpēc izmantot Page Turn efektu?Lappuses pārvēršanas efekts var būt simbolisks, lai pārietu uz nākamo lapas vai sadaļas tēmu. Sniedzot prezentācijas par tādām tēmām kā vēsture, izglītība un filozofija, varat izmantot nolobīšanas, lappušu čokurošanās un pārklājuma pārejas, lai radītu auditorijai piemērotu noskaņojumu tā, it kā dotu viņus ceļojumā. Izmantojot šādus pārejas efektus, varat prezentēt savu prezentāciju kā stāstu, kas auditorijai varētu šķist interesants un atsvaidzinošs, nevis izturēt garlaicīgu amerikāņu kalniņu skrējienu.
Lai prezentācijām lietotu lappuses pagriešanas efektu, varat izmantot Mizošanas un Lapas saritināšanas efektu. Vēl viens labs pārklājuma efekts ir tas, kas ir izskaidrots šajā ziņojumā. Tāpat kā jebkuru efektu, šīs pārejas varat lietot programmā PowerPoint, izmantojot cilni Pāreja. Lai skatītu demonstrāciju, kā lietot šo efektu programmā PowerPoint, noskatieties tālāk esošo video.
Drapērijas pārejas efekts ir vēl viena laba pāreja, lai izmantotu efektu, kas līdzīgs lappušu pāršķiršanai. Šī pāreja vairāk atgādina kalendāra vai piezīmju grāmatiņas lapu šķirstīšanu. Tālāk esošajā videoklipā ir parādīts pārklājuma efekts programmā PowerPoint 2013.
Saistīts: Skatiet arī mūsu ziņu par cirtas efekta lapas izveidošanu programmā PowerPoint 2010.
Ir arī citas pārejas, kas atbilst rēķinam un var šķist pietiekami piemērotas, lai atgādinātu lapas pāršķiršanu. Šādas pārejas varat papildināt, izmantojot bezmaksas PowerPoint veidni, piemēram, Page Flip PowerPoint Template vai Page Curl Effect PowerPoint veidni.
Datortehnoloģijas ir dziļi iekļuvušas mūsu dzīvē. Katru darbību, ko veicam ar datoru palīdzību, pavada īpašu aplikāciju darbs. Pat saīsnes, kuras saglabājam darbvirsmā, apstrādā īpaša programma. Mūsdienās daudzi no mums, kad paņemam rokās pildspalvu, domā, ka pamazām aizmirstam, kā rakstīt.
Kaut kas līdzīgs notiek ar grāmatām. Arvien mazāk paliek to, kas lasa papīra grāmatas. Daudz vienkāršāk ir lasīt e-grāmatas, kas ir daudz lētākas par papīra vai pat ir pieejamas bezmaksas lejupielādei.
Ja jūs piederat vecajai skolai un lasāt papīra grāmatas, abonējat laikrakstus un pārlūkojat savu iecienītāko publikāciju vietnes internetā, iespējams, jūs būtu vairāk pieraduši, ka jūsu iecienītākais projekts ir ērtā un pazīstamākā formā. PageFlip (lappuses pagriešanas) efekts - grāmatu imitācija. Tālāk tiks parādītas dažas pamācības, spraudņi un piemēri, izmantojot PageFlip efektu. Tātad, sapratīsim dažus spraudņus.
SpraudņijQuery spraudņi ar lapu pagriešanas efektu ir piemēroti vietnēm, kurās ir daudz teksta un attēlu. Vietnes lapās monotonas un garlaicīgas tekstu, saišu un attēlu attēlošanas vietā ar lapu pāršķiršanas efektu var padarīt projekta prezentāciju interaktīvāku un animētāku.
1.Grāmatas šķirstīšana
Šis spraudnis ļaus vienā darbībā iegult publikācijas, kas izveidotas ar FlippingBook Publisher un FlippingBook Online, neveicot nekādas koda izmaiņas.
***
2. Vienkārša lapas apvēršana
Easy Flip Flip ir spraudnis, ar kuru jūs varat izveidot virtuālu žurnālu ar dažiem klikšķiem.
3. Interaktīva 3D flipBook
3D FlipBook ir PDF skatītājs vai WordPress spraudnis, kas ļauj skatīt attēlus, PDF vai HTML failus apvērsta skatā.
***
4. Lappuses pāršķiršanas grāmata
Lapas apvēršanas grāmata pakalpojumam WordPress ir vienkāršākais veids, kā pārvaldīt virtuālās 3D grāmatas, kuras varat skatīt ar peli.
Ja nepieciešams, varat izvēlēties arī fona attēlu vai tekstūru.
5. Fotoattēlu grāmatu galerija
Fotoattēlu grāmatu galerija ļauj no attēliem izveidot atsaucīgas pāršķiramas grāmatas. Varat pielāgot savas grāmatas, izmantojot opciju kopu. Spraudnis ir viegli lietojams un lieliski darbojas mobilajās ierīcēs.
6. GoWorks Flip Clock
GoWorks Flip Clock jūsu lapās un ziņās parāda elegantu, retro pulksteni. Spraudnis ir ideāls, lai pievērstu uzmanību svarīgai informācijai, un tam ir pievilcīgs vizuālais efekts.
1. Pilnekrāna lappuses izkārtojums, izmantojot spraudni BookBlock
Apmācība par to, kā izveidot pilnekrāna PageFlip izkārtojumu, izmantojot BookBlock. Ideja ir tāda, ka vietnes grāmatu stila saturam var piekļūt, izmantojot izvelkamo sānjoslas izvēlni.
2. CSS lapas apvēršana
Apmācība iepazīstina ar tīru CSS un 3D lapas apvēršanas rāmi.
Varat konvertēt, izmantojot īpašu kodu:
1 2 Lapa 1 3 Lapa 2 4 Lapa 3 5
Lapas apvēršana, izmantojot CSS3 animāciju, pašlaik darbojas pārlūkprogrammā Safari un iPhone.
3. Lappuses apvēršanas efekts
Šī apmācība palīdzēs jums izveidot savu lapas pagrieziena efektu, izmantojot JavaScript.
4. Izveidojiet efektu lapā
Džo Lamberts iepazīstina jūs, kā izveidot satriecošu jūsu attēlu galerijas vietņu lapu dizainu.
5. 3D apgriešanas aplis ar CSS3 un jQuery
Šajā apmācībā jūs uzzināsit, kā izveidot apli ar rokturi, kas tiek atvērts, noklikšķinot uz tā, izveidot reālistiskus 3D efektus un pāršķirt lapas, izmantojot CSS 3D transformācijas un ēnas.
6. Izkārtojums programmā InDesign
Izmantojot Adobe InDesign CS4, tīmekļa lapu konvertēšana mūsdienās ir kļuvusi daudz vienkāršāka.
1. Fitnesa pasaule
2. Arcīdi
3.Pawelwojcik.com
4. P-e-e-l.com
5. 20 interesanti fakti par pārlūkprogrammām un internetu
Gaidām jūsu atbildes!
Prezentējot prezentāciju, iespējams, vajadzēs izcelt elementu ar vairāk nekā tikai rāmjiem vai izmēru. Programmai PowerPoint ir savs redaktors, kas ļauj dažādiem komponentiem pievienot papildu animācijas. Šis gājiens ne tikai piešķir prezentācijai interesantu izskatu un unikalitāti, bet arī palielina tās funkcionalitāti.
Animācijas veidiIr vērts nekavējoties apsvērt visas pieejamās efektu kategorijas, ar kurām jums jāstrādā. Tie ir sadalīti atkarībā no lietošanas jomas un veiktās darbības veida. Kopumā tie visi ir sadalīti 4 galvenajās kategorijās.
IeejaDarbības grupa, kas izspēlē elementa izskatu kādā no tālāk norādītajiem veidiem. Prezentācijās visizplatītākie animācijas veidi, ko izmanto, lai uzlabotu katra jauna slaida sākumu. Apzīmēts zaļā krāsā.
Kā jūs varētu nojaust, šī darbību grupa, gluži pretēji, kalpo elementa pazušanai no ekrāna. Visbiežāk tas tiek izmantots kopā un secīgi ar identisku komponentu ieejas animāciju, lai tie tiktu noņemti pirms slaida pārtīšanas uz nākamo. Norādīts sarkanā krāsā.
IzlaseAnimācija, kas kaut kādā veidā norāda uz izvēlēto elementu, pievēršot tam uzmanību. Visbiežāk tas tiek attiecināts uz svarīgiem slaida aspektiem, pievēršot tam uzmanību vai novēršot uzmanību no visa pārējā. Norādīts dzeltenā krāsā.
Ceļojumu ceļiPapildu darbības, ko izmanto, lai mainītu slaidu elementu atrašanās vietu telpā. Parasti šī animācijas metode tiek izmantota ārkārtīgi reti un īpaši svarīgu momentu papildu vizualizācijai kombinācijā ar citiem efektiem.
Tagad varat sākt apsvērt animācijas instalēšanas procedūru.
Animācijas izveideDažādām Microsoft Office versijām ir dažādi veidi, kā izveidot šos efektus. Lielākajā daļā vecāku versiju, lai konfigurētu šāda veida elementus, ir jāizvēlas nepieciešamais slaida komponents, ar peles labo pogu noklikšķiniet uz tā un atlasiet “Animācijas opcijas” vai līdzīgas vērtības.
Microsoft Office 2016. gada versijā tiek izmantots nedaudz atšķirīgs algoritms. Ir divi galvenie veidi.
1. metode: ātriVienkāršākā iespēja, kas paredzēta vienas darbības piešķiršanai konkrētam objektam.
Šī metode nodrošina ātru efektu pievienošanu. Ja lietotājs noklikšķina uz citas opcijas, vecā darbība tiks aizstāta ar atlasīto.
2. metode: pamataVarat arī atlasīt vajadzīgo komponentu un pēc tam sadaļas “Animācija” galvenē noklikšķināt uz pogas “Pievienot animāciju”, pēc tam atlasīt vajadzīgo efekta veidu.
Šī metode ir daudz labāka, jo tā ļauj slāņot dažādus animācijas skriptus vienu virs otra, radot kaut ko sarežģītāku. Turklāt tas neaizstāj vecos iekļauto vienumu darbību iestatījumus.
Papildu animācijas veidiSarakstā galvenē ir redzamas tikai populārākās animācijas opcijas. Pilnu sarakstu var iegūt, paplašinot šo sarakstu un atlasot opciju “Papildu efekti...” pašā apakšā. Tiks atvērts logs ar pilnu pieejamo efektu opciju sarakstu.
Skeleta izmaiņasTrīs galvenajiem animāciju veidiem — ievadīšanai, atlasei un iziešanai — nav tā sauktā “animācijas skeleta”, jo tie vienkārši parāda efektu.
Bet “Kustības ceļi”, kad tie ir pārklāti uz elementiem, slaidā attēlo tieši šo “skeletu” - maršruta zīmējumu, ko elementi veiks.
Lai to mainītu, ir jānoklikšķina ar peles kreiso taustiņu uz uzzīmētā kustības maršruta un pēc tam jāmaina, velkot galu vai sākumu vēlamajā virzienā.
Lai to izdarītu, jums vajadzēs satvert apļus animācijas atlases apgabala malu stūros un vidū un pēc tam izstiept to uz sāniem. Varat arī “satvert” pašu auklu un vilkt to jebkurā vēlamajā virzienā.
Lai izveidotu ceļojuma ceļu, kuram nav veidnes, jums būs nepieciešama opcija Custom Travel Path. Parasti tas ir pats pēdējais sarakstā.
Tas ļaus jums patstāvīgi uzzīmēt absolūti jebkuru jebkura elementa kustības trajektoriju. Protams, jums būs nepieciešams visprecīzākais un vienmērīgākais zīmējums, lai attēlotu labu kustību. Kad maršruts ir uzzīmēts, iegūtās animācijas skeletu var mainīt arī pēc vēlēšanās.
Efektu iestatījumiDaudzos gadījumos nepietiek tikai ar animācijas pievienošanu, tā ir arī jāpielāgo. Šim nolūkam tiek izmantoti visi elementi, kas atrodas šīs sadaļas galvenē.
- Animācijas vienums pievieno efektu atlasītajam elementam. Šeit ir vienkāršs, ērts saraksts, kuru vajadzības gadījumā var paplašināt.
- Poga “Efektu opcijas” ļauj precīzāk konfigurēt šo atlasīto darbību. Katram animācijas veidam ir savi iestatījumi.
- Sadaļā “Slaidrādes laiks” varat konfigurēt efektus pēc ilguma. Tas ir, jūs varat izvēlēties, kad tiks sākta konkrētās animācijas atskaņošana, cik ilgi tā darbosies, ar kādu ātrumu tā darbosies utt. Katrai darbībai ir atbilstošs vienums.
- Sadaļā “Papildu animācija” ir iespējams konfigurēt sarežģītākus darbību veidus.
Piemēram, poga Pievienot animāciju ļauj vienam elementam lietot vairākus efektus.
“Animācijas apgabals” ļaus jums izsaukt atsevišķu izvēlni sānos, lai skatītu viena elementa konfigurēto darbību secību.
Vienums “Animācija pēc parauga” ir paredzēts, lai izplatītu viena veida specefektu iestatījumus tiem pašiem elementiem dažādos slaidos.
Poga Trigger ļauj piešķirt sarežģītākus nosacījumus darbību aktivizēšanai. Tas ir īpaši noderīgi elementiem, kuriem ir piemēroti vairāki efekti.
- Poga “Priekšskatījums” ļauj jums redzēt, kā slaids izskatīsies, kad to skatīsit.
Ir noteikti standarta kritēriji animācijas izmantošanai prezentācijā profesionālā vai konkursa līmenī:
- Kopējais visu animācijas elementu atskaņošanas ilgums slaidā nedrīkst pārsniegt 10 sekundes. Ir divi populārākie formāti – vai nu 5 sekundes ieejai un iziešanai, vai 2 sekundes ieejai un iziešanai, un 6, lai izceltu svarīgus procesa punktus.
- Dažiem prezentāciju veidiem ir savs animācijas elementu laika dalīšanas veids, kur tie var aizņemt gandrīz visu katra slaida ilgumu. Bet šādam dizainam tā vai citādi sevi ir jāattaisno. Piemēram, ja visa slaida un tajā esošās informācijas vizualizācijas būtība balstās uz šo pieeju, nevis tikai to izmantošanu dekorēšanai.
- Šādi efekti arī noslogo sistēmu. Mazos paraugos tas var nebūt pamanāms, jo mūsdienu ierīcēm ir laba veiktspēja. Tomēr nopietniem projektiem, kas ietver milzīgu multivides failu paketi, var rasties grūtības.
- Izmantojot kustības ceļus, jums rūpīgi jāpārliecinās, ka mobilais elements pat uz sekundes daļu nepārsniedz ekrāna robežas. Tas liecina par prezentācijas veidotāja profesionalitātes trūkumu.
- Nav ieteicams izmantot animāciju video failiem un GIF attēliem. Pirmkārt, nav nekas neparasts, ka pēc sprūda palaišanas multivides fails tiek bojāts. Otrkārt, pat ar augstas kvalitātes iestatījumiem var rasties kļūme un fails tiks atskaņots, kamēr tas joprojām notiek. Aptuveni runājot, labāk neeksperimentēt.
- Lai ietaupītu laiku, animāciju nevajadzētu padarīt pārāk ātru. Ja ir stingri noteikumi, labāk no šī mehāniķa atteikties vispār. Efekti galvenokārt ir vizuāls papildinājums, tāpēc tiem vismaz nevajadzētu kairināt cilvēkus. Pārāk ātras un ne vienmērīgas kustības nerada skatīšanās prieku.
Nobeigumā vēlos atzīmēt, ka PowerPoint pirmsākumos animācija bija papildu dekoratīvs elements. Mūsdienās neviena profesionāla prezentācija nevar iztikt bez šiem efektiem. Ir svarīgi praktizēt efektīvu un funkcionālu animācijas elementu izveidi, lai katrs slaids iegūtu vislabāko kvalitāti.
Mēs esam priecīgi, ka varējām jums palīdzēt atrisināt problēmu.
Uzdodiet savu jautājumu komentāros, detalizēti aprakstot problēmas būtību. Mūsu speciālisti centīsies atbildēt pēc iespējas ātrāk.
Pēdējā laikā apgriešanas efekts ir kļuvis diezgan populārs daudzās vietnēs. Tāpēc būtu diezgan svarīgi panākt šo efektu, izmantojot jQuery un CSS3. Veidosim blokus ar attēliem, kas vēlāk tiks pārvērsti grāmatā. Mūsu slīdnim būs arī pogas, ar kurām lietotājs var redzēt, kurā lapā viņš pašlaik atrodas. Slīdošās lapas tiks parādītas kā attēli HTML formātā, bet katra no tām tiks sadalīta divās lapās, izmantojot jQuery.
Mēs rakstīsim šo kodu kā JQuery spraudni, tāpēc mums vispirms ir jāiespējo jQuery. Tālāk mēs iekļaujam Modernizr bibliotēku. Mums ir nepieciešamas tikai 3D transformācijas, un jūs varat lejupielādēt nepieciešamo skriptu no šejienes. Tas nodrošinās, ka pārlūkprogrammās, kas neatbalsta 3D transformācijas, viss darbojas labi. Tālāk mums ir jāizveido fails ar nosaukumu jquery.pictureflip.js, kas tiks ievietots tajā pašā vietā, kur mūsu spraudņa kods. HTML vajadzētu izskatīties šādi:
Ķermenis
HTML marķējums ir diezgan vienkāršs. Viss, kas mums jādara, ir jāievieto div elementu grupa, kas attēlos mūsu attēlus HTML formātā. Un pēc tam izveidot citu bloku ar noteiktu ID? piemēram #flipbook.
Ziedi: Ko jūs nezinājāt Ziedi: īsti vai daiļliteratūra? Zieds manam mazulim! Vai ziedi iznīcinās Zemi?
Tagad pāriesim pie stiliem.
CSSKopā ar dažiem standarta CSS stiliem mēs izmantosim 3D transformācijas, lai panāktu lapas apvēršanas efektu. Programmā JQuery mēs sadalīsim attēla bloku divos atsevišķos divos un pēc tam pagriezīsim vienu tā, lai izskatās, ka mēs pāršķiram lapu. Vispirms pievienosim dažus pamata stilus.
#container ( polsterējums : 10px ; box-shadow: 0px 0px 10px rgba(0 ,0 ,0 ,0 .1 ) ; margin: 20px auto ; platums : 600px ; augstums : 330px ; ) /* 0px.fx inbook 3/0 60px.fx ( pozīcija : relatīvā ; platums : 600 pikseļi ; augstums : 300 pikseļi ; z-indekss : 999 ; ) .flipbook > div ( platums : mantot ; augstums : mantot ; pozīcija : absolūts ; augšā : 0 pikseļi ; pa kreisi : 0 pikseļi ; teksta līdzinājums ; ) .flipbook .hide ( displejs : nav ; ) .flipbook > div > div ( platums : mantot ; augstums : mantot ; fona izmērs : 600 pikseļi 300 pikseļi ; platums : 50 % ; augstums : 100 % ; pozīcija / absolūts ; ) * Bloku ar attēlu sadalām divos atsevišķos. */ /* Otrajam jābūt labajā pusē, bet pirmajam kreisajā pusē */ .flipbook div[ class$="-fend" ] ( background-position : 100% 0 ; left : 50% ; )
Sadaļā jQuery mēs pārvietosim divas attēlu daļas nākamajā div, kas tiks saukts par move-div. Mēs tos novietosim tā, lai tie kopumā radītu vienotu attēlu, un pēc tam tos pagriezīsim. Lai to izdarītu pareizi, pielietojiet 3D transformāciju kustībai-div.
/* Saglabāt 3D */
Flipbook .moving-div ( z-index : 99999 ; platums : 50 % ; -webkit-perspective: 1000 ; -webkit-transform-style: reserve-3d; -webkit-transform-origin: 0 0 ; -moz-perspective: 1000 - moz-transform-style: saglabāt-3d; -3d; -ms-transform-origin: 0 0 ; -backface-visibility : slēpts ; pareizā pozīcija */ .flipbook .moving-div > div[ class$="-fend" ] (pa kreisi : 0 ; ) /* Pagrieziet pēdējo kartīti tā, lai tā būtu vērsta pret aizmuguri ar pirmo */ .flipbook .moving -div > div[ class$="-fstart" ] ( -webkit-transform: rotateY(180deg) ; -moz-transform: rotateY(180deg) ; -o-transformācija: pagriezt Y(180°); -ms-transformācija: pagriezt Y(180°); pārveidot: pagriezt Y(180°); )
Moving-div iekšpusē tiks ievietoti divi laidumi, kas radīs ēnu efektu. Tie tiks animēti jQuery daļā.
/* Abi laidumi ir dziļuma ēnas */ .flipbook .moving-div span ( box-shadow: inset 60px 0 60px -60px rgba(0 ,0 ,0 ,0 .1 ) ; platums : 100 % ; augstums : 100 % pozīcija: necaurredzamība: 0, 0, 0. 1; paslēpts : 0 - Webkit-transform: rotateY(180deg) 0 ,0 .1 ) ;
Ir arī dažas citas klases, kas tiks pievienotas, lai izveidotu kustīgu-div rotāciju. Viņiem mēs izmantojam vienkāršas 3D transformācijas
Flipbook .rotateYForward ( -webkit-transform: rotateY(180deg) ; -webkit-transition: -webkit-transform 1s easy-in; -moz-transform: rotateY(180deg) ; -moz-transition: -moz-transform 1s easy- in -o-transform: rotateY(180deg) ; pa kreisi: 50% .flipbook .beginMove (pa kreisi: 50%; -webkit-transform: rotateY(180deg) ; -moz-transform: rotateY(180deg) ; -o-transform: rotateY(180deg) 180° grādu) transform 1s vieglums-in: rotateY(360deg) : -o-transform 1s ease-in; ; )
Nākamais posms ir diezgan vienkāršs. Mēs vienkārši pievienojam stilus priekšējām un aizmugurējām bultiņām un maziem apļiem, kas lietotājam pateiks, kuras lapas ir atvērtas.
Flipbook .back-bultiņa , .flipbook .forward-bultiņa (
Platums: 100 pikseļi; augstums: 100 pikseļi; kastes izmēra noteikšana: apmale-box; -moz-box-sizing: border-box; polsterējums: 8px 28px; fonta izmērs: 7em; fonta svars: treknrakstā; z-indekss: 10; pa kreisi: -140 pikseļi; krāsa : #fff ; augšā: 30%; apmales rādiuss: 100 pikseļi ; pozīcija: absolūta; kursors: rādītājs; z-indekss: 999999; fona krāsa : #396275 ; ) .flipbook div[ class$="-arrow" ] :hover ( box-shadow: inset 0px 0px 30px rgba(0 ,0 ,0 ,0 .2 ) ; ) .flipbook div[ class$="-bultiņa" ] :active ( fona krāsa : #2e505f ; box-shadow: inset 0px 0px 30px rgba(0 ,0 ,0 ,0 .1 ) ; ) .flipbook .forward-bultiņa ( pa labi : -140px ; pa kreisi : auto ; polsterējums : 8px 34px ; fonta svars : treknraksts ; .flipbook .buttons (platums : 98% ; polsterējums : 7px 1% ; augstums : 16px ; fons : #ffff ; pozīcija : relatīvs ; augšā : 300px . .fsbook . : #fff ; -color : #47b1e2 ; box-shadow: inset 0 0 10px rgba(0 ,0 ,0 .1) ; absolūts ; apakšā: 0; platums: 50%; fonta izmērs: 2em; ). ;)
Visbeidzot, mēs pievienosim attēlus, kurus izmantosim. Ja vēlaties, varat pievienot vairāk. Piemērā būs 4 no tiem. Tie attieksies uz attēla elementiem, ko mēs definējām iepriekš HTML.
/* ATTĒLI, KO VĒLATIES IZMANTOT */
/* == pievienojiet vairāk, ja vēlaties == */ /* == atjauniniet arī HTML! == */ div[ class^="image-1-" ] ( fons : url ("images/1.jpg" ) ; ) div[ class^="image-2-" ] ( fons : url ( "attēli /2.jpg" ) ; ) div[ class^="image-3-" ] ( fons : url ("images/3.jpg" ) ; ) div[ class^="image-4-" ] ( fons : url("attēli/4.jpg" );
Pārejam pie JQuery!
jQueryAtveriet failu jquery.pictureflip.js. JQuery spraudņa galvenajai struktūrai vajadzētu izskatīties šādi:
(funkcija ($) ( $.fn .extend (( // Jūsu spraudņa nosaukums pictureflip: function (options)) ( // Dažas noklusējuma vērtības. Lietotājs varēs mainīt šos vari defaults = ( laiks: 1000 , start : 1 ) // Savienojiet noklusējuma vērtības ar funkcijas mainīgajiem var options = $.extend (defaults, options) // Šis bits ir svarīgs, tas nodrošina jQuery ķēdes spēju // Mums ir jāatgriež katrs objekts, šis spraudnis; attiecas uz , lai // lietotājs joprojām varētu pievienot vairāk jQuery funkciju beigās, t.i., // $("#item").pictureflip().appendClass("pictures" atgriež šo .each (funkcija ()); var o = opcijas var obj = $(this ) ; // Šeit ir pieejams mūsu spraudņa kods.
Spraudņa izveideLai sāktu veikt noteiktas darbības, mums ir jādeklarē daži pamata mainīgie, piemēram, attēlu skaits un attēla animācijas pārbaude.
// Daži mainīgie, lai sāktu
Var laiks = o.laiks ; var imageNumber = $("div" , obj) .length ; var animēts = 0 ;
Nākamais solis ir pievienot lietotāja interfeisu. Mēs to darīsim, izmantojot JQuery, lai lietotājam to padarītu pēc iespējas vienkāršāku.
// Pievienot lietotāja interfeisu obj.append ("" ) ; obj.addClass("flipbook"); // Pievienot pogu atkarībā no atlasītā fotoattēla, kamēr (imageNumber > 0 ) ( $("" ) .appendTo ($(".buttons" ) ) ; --imageNumber; ) // Pāriet uz teksta saturu $(, obj ) fadeIn(); // Šo funkciju mēs pievienosim vēlāk selectCircle() ;
Tālāk mums ir jādefinē dažas vienkāršas funkcijas. Šīs funkcijas ietver animāciju, z-indeksu, slaidu restartēšanu un pareizā apļa atlasi.
// Mainīt z indeksa funkciju zIndexFix() ( $("" ) .each (funkcija (indekss) ( zindex = index * -1 ; $(this ) .css ("zIndex" , zindex) ; ) ; ) // Restartē slaidus parastajā pozīcijā, lai tie "būtu gatavi apvērst // vēlreiz! funkcija restartSlides() ( var $moveFirst = $(".moving-div div:first") .attr ("klase" ) .split ( "-" ) [ 1 ] var $moveLast = $(".moving-div div:last" ) .attr ( "class" ) .split ( "-" ) [ 1 ] ; .appendTo ($("> #image-" +$moveFirst, obj) ) ; $("> .moving-div div:last" , obj) .appendTo ($("> #image -" +$moveLast, obj) ) ; $(.moving-div" ) .removeClass ("rotateYForward rotateYBackward beginMove" ) .removeAttr ("style" ) .addClass ("hide" ) ; ēnas funkcija shadowAnimate(time) ( $(.moving-div span" ) .animate (( necaurredzamība: 1 ), laiks/2 ) ; setTimeout(function () ( $(".moving- div span" ) .animate (( necaurredzamība: 0 ) , laiks/2 ) ) , laiks/2 ) // Izvēlieties atbilstošo apli, pamatojoties uz atlasītajiem attēliem. funkcija selectCircle() ( var imageID = parseFloat($("> div:first" , obj) .attr ("id" ) .split ("-" ) [ 1 ] ) ; $(.buttons span" ) .removeClass ("atlasīts" ) ; $(.buttons .button-" +imageID).addClass ("atlasīts" ) ;
Tagad pāriesim pie animācijas funkcijas. Ir pievienots mainīgais, kas pārbaudīs, vai ir poga uz priekšu vai atpakaļ. Ja pamanījāt, mainīgais prev tiks izmantots, lai pārbaudītu, kura poga ir nospiesta. Pašlaik tas nedarbojas pārlūkprogrammā Safari, tāpēc pārlūkprogrammā Safari ir atspējots vilkšanas efekts.
// Animācijas funkcija
Funkciju animācija(iepriekšējā, laiks, pogas) ( // Izbalināt tekstu $("div:first .content" , obj) .fadeOut (50 ) ; // Ja animācija nedarbojas, tad varam sākt if (animēts == 0 ) ( // Animācija darbojas animēti = 1 ; // Nākamais slaids if (iepriekšējais != true ) ( var $nextSlide = $("div:first ~ div:first" , obj) .attr ("id" ) ; ) else ( var $nextSlide = $("div:last" , obj) .attr ("id" ) ) // Pašreizējais slaids var $thisSlide = $("div:first" , obj) .attr ("id" ) ; / Ja 3D pārveidojumi netiek atbalstīti, mēs vienkārši // izbalēsim slaidos, taču tos // joprojām varēs izmantot, ja (Modernizr.csstransforms3d == "" || .userAgent .indexOf ("Safari" ) != -1 && navigator.userAgent .indexOf ("Chrome" ) == -1 ) ) ( $("> #" +$nextSlide, obj) .prependTo (obj) ; ja (iepriekšējais != true ) ( $("> #" +$thisSlide, obj) .appendTo (obj) ; ) animated = 0 selectCircle() return false ) ( // Divu pievienošana kustīgajam divam; ("> #" +$nextSlide+" > div, > #" +$thisSlide+" > div" , obj).appendTo ($(".moving-div" ) ) ; // Pagrieziet kustīgo div turētāju un mainiet laiku // pamatojoties uz to, kas ir iestatīts, izmantojot Javascript $(.moving-div" , obj) .addClass ("rotateYForward" ) .css (( : time/1000 +"s" , "-moz-transition-duration" : laiks/1000 +"s" , "-ms-transition-duration" : laiks/1000 +"s" , "-o-transition-duration" : laiks/1000 +"s " , "transition-duration" : laiks/1000 + "s" ) ) ; // Pagriezt div, lai būtu redzams nākamais div // Un iepriekšējais div ir zem tā $("> #" +$nextSlide, obj) .prependTo (obj) ; $("> #" +$thisSlide, obj) .appendTo (obj) ; ) else ( // Citādi šī ir poga Atpakaļ // Tāpēc ievietojiet divelementus pareizajā secībā, lai mēs varētu radīt // ilūziju par $("> #" +$thisSlide, obj) pārvēršanu .prependTo ($(obj) ) ; $("> #" +$nextSlide, obj) .insertAfter ($("div:first" , obj) ) ) // Pēc tam pievienojiet pareizos div $("> #" +$nextSlide+"; > div, > #" +$thisSlide+" > div" , obj) .appendTo ($(".moving-div") ) ; // Ātri labojiet z indeksu, jo mēs esam pārvietojuši lietas ap zIndexFix() // Pagriezt kustīgo div turētāju $(.moving-div" ) .addClass ( "beginMove" ) ; // Ļoti mazs taimauts, lai šī funkcija netraucētu // citām funkcijām setTimeout(function () ( /) / Rotation /1000 +"s" , "-ms-transition-duration" : laiks/1000 +"s" , "-o-transition-duration" : laiks/1000 +"s" , "transition-duration" : laiks/1000 +"s" ) ) , laiks/50) ; ) // Ēnu animācija! shadowAnimate(laiks) ; // Vēl viens noildze, kas jāpalaiž animācijas beigās setTimeout(function () ( // Atgrieziet slaidus uz to noklusējuma klasēm un vērtībām restartSlides() ; if (buttons != true ) ( $(). move- div" ) .addClass ("slēpt" ) ; ) // Attiecīgi ievadiet pirms if (iepriekšējais == true ) ( $(" > #" +$nextSlide, obj) .prependTo ($(obj) ) ; ) // Izlabojiet z-indeksu un mainiet apli zIndexFix() , laiks) ; ) )
Tagad viss, kas mums jādara, ir izraisīt noteiktu reakciju, kad tiek nospiesta poga.
$(.uz priekšu-bultiņa" ) .click (funkcija () ( $(.moving-div" ) .removeClass ( "slēpt" ) ; setTimeout(function () ( animācija(false , time) ; ) , 1 ) ) ; $(.atpakaļbultiņa" ) .click (funkcija () ( $(.moving-div" ) .removeClass ( "slēpt" ) ; setTimeout(function () ( animācija(true , time) ; ) , 1 ) ) ;
Nākamais solis ir izveidot nelielu apli apakšā. To izdarīt nav tik grūti, kā varētu šķist. Mēs vēlamies, lai pogas pozīcija atbilstu attēla numuram. Šim nolūkam mēs izmantojam setInterval.
$(.buttons span" , obj) .click (function () ( // Noņemt slēpšanas klasi no kustīgā div $(".moving-div") .removeClass ("hide" ) ; // Iegūt pogas ID var buttonID = parseFloat($(this) .attr ("class" ) .split ("-" ) [ 1 ] ) ) // Iegūt pašreizējo attēla ID var currentImageID = parseFloat($("> div:first" , obj); ) .attr ( "id" ) .split ( "-" ) [ 1 ] ) // Aprēķināt ātrāku laiku var reduxTime = time/10 // Un iestatīt intervālu mainīgajā, izmantojot funkciju rotateImages var interval = setInterval (rotateImages, reduxTime) funkcija rotateImages() ( // Atjauniniet pašreizējo attēlu ikreiz, kad tiek palaists intervāls currentImageID = parseFloat($("> div:first" , obj) .attr ("id" ) .split ("-" ) [ 1 ] ) // Ja pogas numurs ir vienāds ar pašreizējā attēla numuru if (buttonID == currentImageID) ( // Animācija ir beigusies, notīriet intervālā clearInterval(interval) ; // Slēpt move-div $ (.moving-div" ) .addClass ( "hide" ) // Atcelt funkciju return false ; ) else ( // Pretējā gadījumā turpiniet palaist animācijas animāciju (false , reduxTime, true ) ; ) ) ) ;
Visbeidzot, jums vienkārši jāpārbauda z-indekss un jāiestata pirmais attēls, ja lietotājs to definē.
// Noteikti izlabojiet arī z-indeksu! zIndexFix() ; // Ak, un mainiet sākuma attēlu, ja lietotājs to definē. $(.buttons .button-" +o.start , obj) .click () ;
Tagad, kad esam pabeiguši, varam palaist mūsu spraudni.
SavienojumsLai palaistu spraudni, vienkārši pievienojiet šo dokumenta virsrakstam:
$(document).ready(function () ( $("#flipbook" ) .pictureflip (( laiks: 1000 , sākums: 1 ) ) ; ) );
Tulkojums – dežūrtelpa
