CSS3 lapas pagriešanas animācija

Buržuāzijā es izspiegoju CSS3 ieviesto lapu pārvēršanas tehniku. Ļoti iespaidīgi! Pamatojoties uz šo paņēmienu, es nolēmu izveidot savu piemēru šādas CSS3 grāmatas demonstrēšanai ar lapas pagriešanas animāciju.
Šis paņēmiens ir balstīts uz CSS3 īpašībām, piemēram, pārveidot un pāreja kā arī tagu nestandarta izmantošana ievade ar izvēles rūtiņu. Ieviešana izrādījās neērta, jo pārlūkprogrammas joprojām pilnībā neatbalsta visiespaidīgākos CSS3 rekvizītus to tiešajā formā. Bet, paldies, mēs varam mēģināt izmantot šīs īpašības tieši tagad.
Izrādījās iespaidīgi, tas priecē, ka tuvākajā nākotnē pārlūkprogrammas sāks izprast jaunos CSS3 standartus un tīmekļa pārziņi varēs droši ieviest šādu skaistumu savās vietnēs, kļuva iespējams pārlūkot lapas CSS3.
Piemēru vislabāk var apskatīt pārlūkprogrammā Mozilla Firefox jaunākā versija- viss darbojas bez problēmām. Pārlūkprogrammās Safari un Chrome piemērs darbojas, taču ar skrāpējumiem. Opera animācijas laikā apēd procesoru utt vāji datori piemērs vienkārši to nedarīs. IE ir IE prieka pēc, jūs varat tos skatīties.
Mēs skatāmies pārlūkprogrammā Mozilla Firefox- mēs nebojājam iespaidu!

Nesen internetā atradu vienu lielisku programmu lai izveidotu foto albumus. Un ne tikai foto albumi, bet Flash albumi, kurā ir Šādu albumu var augšupielādēt Youtube formātā swf un uz jūsu vietni HTML lapa, no tā var izveidot failu - exe un tā tālāk ... Bet ko teikt, paskatieties, ko es izdarīju tikai 20 minūtēs!

Vienkārši noklikšķiniet uz attēla, lai apskatītu:

Pārvērst albumu- programma, kas parastos fotoattēlus pārveido par izciliem flash albumi+ lapas pagriešanas efekts! Tagad no savas fotoattēlu un attēlu kolekcijas varat izveidot brīnišķīgus tiešsaistes foto albumus.

Tā kā programma ir balstīta uz "know-rush", es uzrādu nelielu rīcības ceļvedi:

1. Pēc programmas palaišanas noklikšķiniet uz "Fons"(fons), atlasiet "Atlasīt no fona ..."- ja mēs izmantojam programmas iebūvēto fonu.

Ja jums ir sava izcelsme, izvēlieties "Atlasīt no sava datora".Un ievietojiet savu fotoattēlu.

2. Push "Foto" un pievienojiet mums nepieciešamo fotoattēlu. To var izstiept, samazināt un pagriezt.

3. Spiešana "Maska" izvēlieties vienu no kadrēšanas efektiem.

4. Noklikšķinot "Teksts" atzīmējot izvēles rūtiņu, fotoattēlam varat pievienot parakstu "Ēna" pievienot tekstam ēnu

Mēs iegūstam pirmo pabeigto 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 etiķetes "Veidnes" iestatījumos atlasiet veidni (Iespējas) jūs varat mainīt fotoattēlu kvalitāti utt. Pēc tam noklikšķiniet uz "Pārvērst par flipping book"

7. Pārvēršanas logā atlasiet, piemēram, izvades faila formātu EXE... Atlasiet saglabāšanas mapi, faila nosaukumu un noklikšķiniet "Pārvērst"

Būtībā tas tā ...

Izstrādātājs: Flip PDF studija
Platforma: Windows XP / Vista / 7
Saskarnes valoda: Angļu
Faila lielums: 17.05 MB

Sveiki visiem! Es šeit bieži apmeklēju to pašu emuāru, un reiz nāca runa par īpaša programma lai izveidotu mācību grāmatas, es uzsveru mācību grāmatas. Ar nelielu prasmi to var izmantot, lai izveidotu arī vienkāršas e-grāmatas. Tātad, vārds pa vārdam radās sava veida likme, labi, derība nav derība, bet strīds.

Esmu apgalvojis un joprojām apgalvoju, ka ir iespējams izveidot e-grāmatu, izmantojot standarta programma Vārds no paketes Microsoft Office... Jā, ne tikai grāmatu, bet ar saturu, navigāciju pa lapām, labi, dažādas citas lietas, līdz lappušu pagriešanai, kā arī skaņas un video ievietošanai.

Taisnības labad man jāsaka, ka to visu var izdarīt arī Word, izņemot flipping. Vilkšana ir atšķirīga tehnoloģija, kurai nepieciešamas dažādas programmas. Tāpēc es atzīstu, ka esmu kļūdījies ... Un ar zināmu prasmi izrādās diezgan skaista e-grāmata ar pagriešanu.

Darba piemēri

Skat, kas notika
Skatīt grāmatu PDF formātā

Lejupielādējiet un skatieties flipping book

Kā tas ir? Vai esat lejupielādējis un skatījies? Kā tas bija? Ja jums neizdevās lejupielādēt, labi, nekad nevar zināt, piemēram, antivīruss zvēr, tad es iesaku apskatīt vēl dažas šīs grāmatas versijas:

Flash grāmatu raksts html, izmantojot iframe

Tas pats raksts, izmantojot īpašu pakalpojumu

Tiešsaistes pakalpojums flash grāmatu un flash žurnālu izveidei. Ikvienam interesentam varat izlasīt šī pakalpojuma pārskatu.

Pielāgotas grāmatas:

Ravenna Cafe Menu - itāļu virtuve

Ravenna Cafe ēdienkarte - krievu virtuve

Izvēlieties Automātiski samontēts satura rādītājs un viss, satura rādītājs ir gatavs. Varat pārbaudīt, kad, noklikšķinot uz lappuses numura, jūs jāpārvieto uz virsrakstu lapā, kas norādīta satura rādītājā.

Tātad grāmata ir gatava ar skaistu titullapu un ērtu satura rādītāju. Atliek tikai no tā izveidot PDF failu.

Otrais solis. Izveidojiet PDF failu

Nu, šeit viss ir vienkārši, starp citu, es jau rakstīju par to, kā izveidot PDF failu, izmantojot Word 2007 rīkus, par kuriem jūs varat izlasīt šeit. Bet jaunākajai Word versijai joprojām ir vieglāk. Atveriet cilni Fails un atlasiet vienumu Eksportēt

Noklikšķiniet uz pogas Izveidot PDF un atvērtajā logā ievadiet faila nosaukumu

Un šeit ir svarīgi atzīmēt izvēles rūtiņu Izveidot grāmatzīmes, izmantojot galvenes

Voila! Lai pareizi rīkotos, bija nepieciešami pieci klikšķi. Kas ir grāmata, elektroniska, ar saturu un navigāciju? !! Nav dārgi, gandrīz par velti! Nu, es tikai jokoju, patiesībā atliek izgatavot flip-flop flash grāmatu no PDF grāmatas un iespēju to kopīgot sociālajos tīklos.

Trešais solis. Galīgais, izveidojiet zibspuldzi

Tā kā līdz šim man tas nebija vajadzīgs, īpaši neuztraucos ar kādām programmām ir iespējams izveidot šādas grāmatas. Bet ar tēvoča Gošas palīdzību un mazliet pacietības un neatlaidības es atradu divas programmas, kas man ļauj PDF failus pārvērst par flash grāmatām.

Pirmā programma. FlipBook Maker.

Es ilgi neuzkavēšos pie šī produkta, jo man absolūti nepatika pārveidošanas rezultāts. Saites grāmatā nedarbojas, un kaut kā viss ir greizs. Nu, vispār es nezinu, man tas nepatika. Varbūt jūs varēsiet kaut ko izdarīt šajā programmā, tad noteikti ierakstiet mani komentāros. Kaut arī šī programma lepojas arī ar kādu interesantu funkcionalitāti. Piemēram, tajā liela izvēle gatavas veidnes ...

Skatiet un lejupielādējiet izmēģinājuma versija var atrast programmas oficiālajā tīmekļa vietnē.

Bet šāds programmulīns ir tieši tas, kas jums nepieciešams.

Programma ir šāda. Flip PDF

Lieliska programma, viegli darbojas ar PDF failiem, ļauj ievietot vai rediģēt saites, attēlus, video, skaņu un daudz ko citu ...

Jūs varat lejupielādēt izmēģinājuma versiju.

Uzreiz rezervēšu, programma nav bezmaksas, un, veidojot grāmatu, tā laiza savas ūdenszīmes. Bet, ja jums šī programma ir nepieciešama vienu reizi vai jums tā patiešām ir nepieciešama - rakstiet man, es palīdzēšu.

Skaistas grāmatas radīšanas process ir diezgan vienkāršs un nesarežģīts, neskatoties uz to, ka tas ir buržuāziskajā dialektā. Kā parasti, šādos gadījumos mēs ieslēdzam zinātnisko kule metodi, un viss izdosies.

Lejupielādēt PDF grāmatu

Palaidiet programmu un skatiet šo logu

Noklikšķiniet uz pogas Importēt PDF un norādiet ceļu uz mūsu PDF grāmatu

Pēc tam mēs norādām importējamo lapu skaitu. Tā kā man ir vajadzīgas visas lapas, tad es aizgāju Visas lapas. Varat arī pievienot ūdenszīmi, piemēram, tās, kas tiek pievienotas attēliem, vai kopumā varat nekavējoties padarīt ūdenszīmi interaktīvu un pievienot tai saiti uz vietni.

Papildus faila ceļa norādīšanai visus citus parametrus var atstāt tādus, kādi tie ir. Es nospiežu Importēt tūlīt, ES domāju Importēt tūlīt, un mēs redzam, kā programma sadalās failu lapās.

Parādās logs ar topošo grāmatu.

Veidnes izvēle un konfigurēšana

Mēs pamanījām, ka iepriekšējos ekrānuzņēmumos bija viena grāmatas veidne, un pēdējā ekrānuzņēmumā ir cita veidne. Tas tiek darīts, izmantojot izvēlni Veidnes

Noklikšķinot uz bultiņas, parādīsies šāds logs,

kur jūs varat izvēlēties sev tīkamu veidni.

Kreisajā kolonnā ir norādītas veidņu kopas. Veidnes atšķiras ne tikai pēc krāsas un fona attēla, bet arī no funkcionalitātes.

Jūs varat precīzi pielāgot veidni virs veidnes: pievienot vai noņemt pogas vadības panelī, mainīt fona krāsu, mainīt saišu krāsu, pielāgot pašas grāmatas pozīciju attiecībā pret loga apmalēm un daudz ko citu (ieslēgt rakstīšanas metodi, noteikti noderēs).

Es neaprakstīšu visu, bet es vēlos pievērst jūsu dārgo uzmanību dažiem punktiem:

Pirmais brīdis. Ja veicat izmaiņas veidnē, noklikšķiniet uz pogas, lai redzētu, kas notika Lietot Mainīt. Mainot jebkuru parametru, tas mirgos sarkanā krāsā.

Otrais punkts. Veidnes iestatījumos varat norādīt ID Google analītika... Ja es kļūdos, tad izlabojiet mani. Norādot ID, man ir iespēja pasargāt savu darbu no zādzībām. Tēvocis Google piešķirs šai grāmatai manas vietnes autorību, jo mans emuārs ir reģistrēts pakalpojumā Google Analytics. Vai tas ir vai es kļūdos?

Trešais punkts. Pievērsiet uzmanību brīnišķīgajai pogai Rediģēt lapas. Ar šo pogu jūs varat ievietot grāmatā papildu materiālus.

Jūs varat pievienot skaņu, YouTube videoklipus, tikai .flv videoklipus un pievienot saites, pogas un slaidrādes, nemaz nerunājot par attēliem. Vispār ļoti noderīga lieta.

Grāmatu radīšana

Un tagad, visu, ko varēja konfigurēt, tika izvēlēta veidne, palika tikai pēdējā darbība: pašas grāmatas izveide. Grāmatu var izveidot vairākos formātos:

• HTML formāts (emuāra ziņai)
• ZIP formāts (tas pats HTML, bet iesaiņots arhīvā)
• EXE formāts (pašizpildošs fails, kuru, iespējams, esat lejupielādējis raksta sākumā)
• APP formāts (īpašs formāts Apple datoriem)

Tātad viss ir vienkārši: atlasiet vēlamo formātu, ceļu uz mapi, kurā grāmata tiks glabāta, un nospiediet pogu Pārvērst.

Tas ir visas nepieciešamās manipulācijas, lai izveidotu interaktīvu grāmatu. Es grāmatu izveidoju otro reizi ar citu veidni un HTML formātā, kā arī pievienoju to dažām lapām skaņas faili un pogas.

secinājumi

Lieliska programma interaktīvu grāmatu izveidei, plašas rediģēšanas iespējas un dažādu multivides failu ievietošana labi papildinās un uzsvērs galveno saturu, taču ir arī daži trūkumi.

1. Visas programmas, kas tika izmantotas, lai izveidotu flash grāmatas, ir apmaksātas. izņemot Adobe lasītājs, tas ir bezmaksas e-lasītājs. Bet Word un Flip PDF tiek apmaksāti, lai gan Flip PDF pilnībā attaisno simts zaļo amerikāņu rubļu izmaksas, un Word principā izsit naudu. Per laba programma naudas nav žēl. Starp citu, Vai jūs pērkat programmas vai izmantojat sadalītas?

2. Kamēr ķēries pie Flip PDF, atradu dažus traucējumus un neērtības

• video no YouTube ir ievietots greizi, tas darbojas programmā, bet ne gatavajā grāmatā
• ievietojot audio un video failus, šie faili tiek kopēti mapē ar grāmatu, kas ievērojami palielina pašas grāmatas apjomu

Man nelikās neveikli, ja atrodi, raksti komentāros. Kā vienmēr, es rakstīju ilgāk, nekā vajadzīgs viss process. Nu, kā jums patīk process un rezultāts? Lai veicas visiem!

Сodrops ir labākais tīmekļa dizaina emuārs. Tajā vienmēr varat atrast daudzas tīmekļa dizainera radošākās lietas. Milzīgs pluss ir tas, ka viņi arī stāsta, kā piesaistīt vai padarīt šo vai citu efektu. Ārzemēs tas ir ļoti populārs, taču nez kāpēc Krievijas internetā nez kāpēc. Kopumā ļoti noderīga vietne dizainerim, tur var iegūt daudz iedvesmas un daudz mācību, jo tur notiek patiešām uzlabotas CSS nodarbības.

Šodien es vēlos jums pasniegt 15 klases stundas no šīs brīnumvietas. Visas "mikroshēmas" ir pilnīgi bez maksas, un jūs varat tās viegli lejupielādēt. Nu, tagad apskatīsim tuvāk.

Jūs tas arī interesēs:

Dinamisks režģis ar skaistu animāciju

Tas ir lielisks risinājums bloku izvietošanai vietnē, kā arī šo režģi var viegli izmantot attēliem. Šis režģis ir izgatavots ar tīru CSS.

Kā padarīt atdzist CSS hover efektus attēliem

Šī apmācība parādīs, kā padarīt attēla izcēluma efektus. Šajā piemērā ir pilnīgi 7 dažādi piemēri, kā arī instrukcijas, kā padarīt šo brīnumu CSS.

Lieliskas pogas ar jauku CSS efektu

Daudz CSS pogu piemēru ar lielisku kursora efektu, šīs pogas var pielāgot atbilstoši jūsu gaumei.

Kā pagatavot klavieres

Lieliska nodarbība, kas stāsta, kā izveidot īstas elektroniskās klavieres vietnei.

Jauks ikonu kursora efekts

Šajā apmācī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, jūs varat brīvi izmantot šos efektus vietņu sociālo grāmatzīmju ikonām.

Brīnišķīgs flip bloķēšanai

Šeit jūs uzzināsiet, kā ar to rīkoties izmantojot CSS iespaidīgs flipping par bloku. Ir arī pilnīgi atšķirīgi 5 piemēri.

Forši CSS animācijas izmantošanas piemēri

Šeit ir 4 piemēri, kas detalizēti parāda, uz ko spēj CSS animācija.

Neparasta meklēšanas forma

Piemēram, es to vēl neesmu redzējis, piemēram, jūs vēlaties ēst restorānā, attiecīgi, jūs meklējat vēlamo restorānu Google, es ievadu vēlamo vietu meklēšanas laukā. Tagad apskatiet, kā to var ieviest daudz radošākā un ērtākā veidā.

Kā parādīt dažādus attēlus dažādām ierīcēm

Šeit jūs uzzināsiet, kā ieviest displeju dažādas bildes, atkarībā no tā, kurā ierīcē tiek skatīts jūsu resurss.

Adaptīvas izvēlnes izveidošana ar Retina displeju atbalstu

Lieliska nodarbība, kurā jūs uzzināsiet, kā padarīt skaistu un adaptīvā izvēlne CSS ar atbalstu tīklenes ekrāniem.

Vairāki CSS flipping efekti lapām

Skaisti efekti, ar kuriem jūs varat ieviest pilnekrāna lappušu pārvēršanu

Mēs jau esam sapratuši, kā to izdarīt pagriežot e-grāmatu, izmantojot programmu kā failu exe... Apskatīsim, kā savā vietnē izveidot to pašu flash grāmatu tikai tiešsaistē.

Lai to izdarītu, varat izmantot to pašu Flip PDF programmu. Grāmatas izveides princips ir vienāds, tikai jūs to saglabājat nevis kā exe failu, bet kā html.

Ja atlasīsit opciju html, mapē, kurā publicēsit grāmatu, parādīsies gatava vietne, kuru pēc tam varēsit pārvietot uz mitināšanu. Tas sastāvēs no faila index.html un pievienotie faili un mapes. Tas viss ir jāievieto atsevišķā mapē, nosauciet šo mapi tāpat, kā tiks izsaukts jūsu apakšdomēns, un nosūtiet to uz internetu.

To visu var izdarīt ne tikai ar Flip PDF Professional palīdzību. Ne mazāk interesanta programma- FlippingBook Publisher Professional. Programmas demonstrācijas versiju varat lejupielādēt vietnē flippingbook.com... Ar šīs programmas palīdzību jūs varat arī izveidot brīnišķīgas elektroniskas zibspuldzes grāmatas un pat tās izveidot ar skaņu celiņu. Tiesa, programma maksā vairāk - pamata versija programma maksā 399 USD. Bet sākumā varat izmantot izmēģinājuma versiju.

Darbs ar šo programmu ir aptuveni tāds pats kā darbs ar Flip PDF. Jūs varat pielāgot fona izskatu, grāmatu, flip efektus, pievienot skaņu, griežot lapas utt.

Piemēram, jūs vēlaties izveidot dzejoļu grāmatu bērniem, un ne tikai grāmatu, bet runājošu grāmatu, tas ir, kurā, atverot katru lapu, dzejoļi tiks skaitīti ar balsi.

To ļoti viegli var izdarīt FlippingBook Publisher Professional. Vispirms jums jāsagatavo materiāli: PDF grāmata un audio faili katrai grāmatas izplatībai. Lietojot, jūs saņemsiet ļoti tīru, augstas kvalitātes balss ierakstu. Izmantojot ierakstu, ierakstam varat pievienot vieglu fona mūziku.

Tagad mēs atgriežamies pie Flipping FlippingBook Publisher programmas. Jūs to atverat. Ja izmantojat izmēģinājuma versiju, atceliet pieteikšanās un paroles ievadīšanas veidlapu. Kad parādās programma, noklikšķiniet uz Importēt un izvēlieties savu PDF grāmatu. Push Atvērt... Pēc tam varat izvēlēties vienu no vairākiem publikāciju veidiem: žurnāls, dokuments, grāmata ar cietajiem vākiem, foto albums. Zibatmiņas grāmatas izskats būs atkarīgs no tā, kāda veida publikāciju izvēlēsieties.

Nospied pogu Sākt... Notiek pārveidošana. un rezultātā jūs redzēsiet, kā izveidotā grāmata tiek pārlūkota programmas darbvietā.

Tagad tam jāpievieno audio faili. Tieši grāmatzīmē Lapas Jūs redzēsiet logu Lapas rekvizīti ... Un šajos īpašumos jūs atradīsit preci Lappuses skaņa ... Atlasiet šai lapai savu audio failu un atveriet to. Atkārtojiet to pašu darbību pārējām lappusēm.

Pēc grāmatas sastādīšanas noklikšķiniet uz Publicēt un izvēlieties, kādā formā vēlaties saņemt šo grāmatu - viena exe faila formā vai vietnes formā. Ja izvēlaties exe fails, tad jums ir nepieciešams vienums Bezsaistē, un, ja izvēlaties vietni, tad tas ir vienums HTML formātā .

Ja izvēlaties otro iespēju, jūs saņemsit mapi, kurā atradīsies fails index.html un saistītie faili un mapes. Pārdēvējiet koplietojamo mapi tāpat kā savas vietnes URL un augšupielādējiet to mitināšanas vietnē.

Piemēram, kas notika ar mani :, bet patiesībā visu var izdarīt daudz interesantāk, izmantojot visas programmas funkcijas. Tiešsaistes flash e-grāmatu vislabāk var apskatīt šeit pilnekrāna režīmā... Lai pārietu uz to, jums jānoklikšķina uz četrstūra apakšējā vidū.

Sīkāka informācija ir atrodama sadaļās "Visi kursi" un "Lietderība", kurām var piekļūt, izmantojot vietnes augšējo izvēlni. Šajās sadaļās raksti ir sagrupēti pa tēmām blokos, kas satur pēc iespējas detalizētāku (pēc iespējas) informāciju par dažādām tēmām.

Varat arī abonēt emuāru un uzzināt par visiem jaunajiem rakstiem.
Tas neprasa daudz laika. Vienkārši noklikšķiniet uz saites zemāk: