Een interessante verbetering aan een hypertext PDF-document zou zijn om er een pagina-omslaand effect aan toe te voegen. Bovendien kunt u multimedia-elementen in het document integreren: afbeeldingen invoegen, geluid en video toevoegen.
Waar en waarvoor kan zo'n speeltje - een multimediadocument - nuttig zijn? Waarschijnlijk in de eerste plaats bij het maken van presentaties. Originele extra effecten zullen de diavoorstelling versieren en informatie aan de materialen toevoegen. Een exclusief cadeau of archief is een fotoalbum met bladerteksten, muziek en gesproken commentaar. Dergelijke multimedia-aantrekkelijke 3D-documenten en boeken worden ook gebruikt als leermiddelen om beter leren te bevorderen.
Laten we een aantal hulpmiddelen uitproberen om deze prachtige informatieproducten samen te stellen.
Een populaire desktopapplicatie is Flip Builder. Download deze constructor om door pdf-documenten te bladeren vanaf de officiële website van de ontwikkelaar. We openen de hoofdpagina met het adres: flipbuilder.com en door op de vlag van de Russische Federatie te klikken, russificeren we deze. Klik op de knop 'Meer informatie', ga naar de downloadpagina en klik op 'Downloaden' om het downloadproces te starten. Zodra het downloaden is voltooid, pakt u het zip-archief uit en voert u het installatiebestand uit: flip-pdf-pro.exe
We doorlopen de stappen van de installatiewizard en klikken in het laatste venster op de knop “Proberen”. Hierna wordt de applicatie-interface geopend en beginnen we te werken.
Klik op de groene knop ‘Nieuwe maken’. Het venster "PDF importeren" verschijnt, waarin u met de knop "Beeld" Verkenner opent en het PDF-bestand selecteert dat is voorbereid voor conversie op uw computer. Klik vervolgens op de knop "Nu importeren":
Na een tijdje wordt het document geopend in de applicatie en is het klaar om er doorheen te bladeren. Nu kunt u beginnen met bewerken en er extra elementen aan toevoegen.
Laten we eerst oefenen met het gebruik van sjablonen om het document te ontwerpen. De sjablonen, zoals aangegeven in de opmerkingen daarbij, verschillen niet alleen qua uiterlijk, maar ook qua functies:
Nadat u de juiste sjabloon hebt geselecteerd, vouwt u het menu met instellingen uit. Door de waarden van elementen in de lijst te wijzigen, kunt u de weergavemodi van panelen, bedieningsknoppen en nog veel meer aanpassen:
We zijn klaar met de sjabloon en gaan verder met het bewerkingsgedeelte.
Vervolgens zal ik als voorbeeld in detail laten zien hoe ik een multimediabrochure heb gemaakt - een korte historische excursie door mijn geboorteland. Schreef een boek over Almaty. Schreef het natuurlijk luidop. Uit diverse bronnen heb ik beschrijvingen overgenomen van naar mijn mening belangrijke gebeurtenissen uit de geschiedenis van de stad. Ik heb ze waar nodig bewerkt en in chronologische volgorde gerangschikt. Ik heb de inhoud geïllustreerd met passende foto's. Ik heb al deze bewerkingen in Word uitgevoerd. Daarna heb ik de pagina's vanaf de derde genummerd en een interactieve inhoudsopgave gemaakt, zoals beschreven in de les: hyperlink in Word. Vervolgens heb ik het document opgeslagen van Word naar PDF-formaat.
Voor het nasynchroniseren heb ik eerder voor elke pagina audiobestanden in mp3-formaat voorbereid - ik combineerde teksttracks met achtergrondtracks. Ik heb het geluid gemixt met de Audacity-applicatie. U kunt de nieuwste versie van het programma downloaden van de officiële website van de ontwikkelaars op: http://www.audacityteam.org
Door een audioheadset aan te sluiten, kunt u rechtstreeks geluid van de microfoon opnemen in de editor - een spraaktrack maken of vooraf voorbereide audiobestanden importeren. Eenvoudig te leren, intuïtief programma, waarbij elke tool een tooltip heeft. Selecteer tijdens de installatie de Russische taal. We exporteren het voltooide audioproject en slaan het op als mp3-bestand.
Laten we terugkeren naar de Flip PDF Professional-ontwerper.
Gebruik in de flip-page-editor van dit programma de knop "meer" om de lijst met extra elementen uit te vouwen en selecteer de sectie "Geluidsspeler toevoegen": 
Het venster "Geluidstype" verschijnt - het type speler, waar we het type speler selecteren en deze vervolgens invoegen op de geopende pagina van het document:
Klik nu in het rechter derde deel van het editorvenster op de knop "Geluiden selecteren", ga naar Verkenner, zoek op de computer een audiobestand dat eerder voor deze pagina is voorbereid en open het:
In deze sectie zullen we de bedieningsmodi van de speler configureren. Ik heb ingesteld dat het afspelen begint als je op de speler klikt, zodat de lezer de keuze heeft: zelf lezen of luisteren. En ik heb ervoor gekozen om het geluid uit te zetten bij het verlaten van de pagina:
In dit venster kunt u ook de omslag van de speler bewerken.
Daarom installeren we spelers met de bijbehorende audiobestanden op alle documentpagina's die zijn geselecteerd voor voice-over. Nadat u klaar bent met bewerken, slaat u de wijzigingen op met de knop 'Opslaan en afsluiten', die zich in de rechterbovenhoek bevindt.
Om het voltooide multimediadocument te publiceren, gebruikt u de knop “Converteren” om de lijst met voorgestelde formaten te openen en het juiste formaat te selecteren:
U kunt het archief downloaden en de interactieve brochure in dit formaat bekijken via de link: .
De ontwikkelaars van de Flip Builder gebruikten een watermerk als stimulans om hun product te kopen. Een dergelijke markering in het midden van elke pagina van het document maakt het document ongeschikt voor weergave of verspreiding:
Maar aan de andere kant zijn er in de demo-applicatie van deze ontwerper geen beperkingen aan de grootte van het document, in tegenstelling tot bijvoorbeeld het vergelijkbare programma FlippingBook, waar in de proefversie slechts tien pagina's worden geladen.
Deze korte recensie toont een voorbeeld van het maken van een eenvoudig multimediadocument met navigatie en audiobegeleiding. Met andere bewerkingsmogelijkheden kunt u nog interessantere en indrukwekkendere projecten in de ontwerper maken.
We hebben al ontdekt hoe we een elektronisch flashboek kunnen maken met omdraaien, met behulp van een programma, in de vorm van een exe-bestand. Laten we nu kijken hoe u hetzelfde flashboek, alleen online, op uw website kunt maken.
Om dit te doen, kunt u hetzelfde Flip PDF-programma gebruiken. Het principe van het maken van een boek is hetzelfde, alleen sla je het niet op als exe-bestand, maar als html-bestand.
Kiest u voor de html-optie, dan heeft u in de map waar u het boek gaat publiceren een kant-en-klare website, die vervolgens naar de hosting kan worden verplaatst. Het bestaat uit het index.html-bestand en de daaraan gekoppelde bestanden en mappen. Dit alles moet in een aparte map worden geplaatst, deze map moet dezelfde naam krijgen als uw subdomein zal heten, en naar internet worden verzonden.
Dit alles kan niet alleen worden gedaan met behulp van het Flip PDF Professional-programma. Een even interessant programma is FlippingBook Publisher Professional. U kunt een demoversie van het programma downloaden op flippingbook.com. Met dit programma kun je ook prachtige elektronische flashboeken maken, en je kunt ze zelfs met geluid maken. Toegegeven, het programma is duurder: de basisversie van het programma kost $ 399. Maar u kunt eerst de proefversie gebruiken.
Het werken met dit programma is ongeveer hetzelfde als het werken met Flip PDF. U kunt het uiterlijk van de achtergrond, het boek, de flip-effecten aanpassen, geluid toevoegen bij het omslaan van pagina's, enzovoort.
U wilt bijvoorbeeld een gedichtenbundel voor kinderen maken, en niet zomaar een boek, maar een gesproken boek, dat wil zeggen een boek waarin, wanneer u elke pagina opent, de gedichten met uw stem worden voorgedragen.
Dit kunt u heel eenvoudig doen in FlippingBook Publisher Professional. Eerst moet u materialen voorbereiden: een pdf-boek en audiobestanden voor elke boekverspreiding. Bij gebruik krijgt u een zeer heldere stemopname van hoge kwaliteit. En met kunt u lichte achtergrondmuziek aan de opname toevoegen.
Laten we nu terugkeren naar het Flipping FlippingBook Publisher-programma. Je opent het. Als u de proefversie gebruikt, annuleert u het aanmeldings- en wachtwoordinvoerformulier. Wanneer het programma verschijnt, klikt u op Importeren en selecteert u uw PDF-boek. Klik op Openen. U kunt dan kiezen uit verschillende soorten publicaties: tijdschrift, document, hardcoverboek, fotoalbum. Het uiterlijk van het flashboek hangt af van het type flashboekpublicatie dat u kiest.
Klik op de Startknop. Er vindt conversie plaats. en als resultaat zie je het gemaakte boek met omdraaien in het werkgebied van het programma.
Nu moet je er audiobestanden aan toevoegen. Rechts op het tabblad Pagina's ziet u het venster Pagina-eigenschappen. En in deze eigenschappen vindt u het item Paginageluid. Selecteer uw audiobestand voor deze pagina en open het. Herhaal een soortgelijke handeling voor de overige pagina's.
Nadat het boek klaar is, klikt u op Publiceren en kiest u in welke vorm u dit boek wilt ontvangen: als afzonderlijk exe-bestand of als website. Selecteert u een exe-bestand, dan heeft u het B Offline-item nodig, en selecteert u een website, dan is dit het B HTML-item.
Als u de tweede optie selecteert, ontvangt u een map waarin het index.html-bestand zich bevindt, en gerelateerde bestanden en mappen. Hernoem de algemene map ervoor op dezelfde manier als de URL van uw site en upload deze naar de hosting.
Dit is bijvoorbeeld wat ik kreeg: , maar in feite kan alles veel interessanter worden gemaakt door alle mogelijkheden van het programma te gebruiken. Een online flash-e-book kan het beste op volledig scherm worden bekeken. Om daarheen te gaan, moet je op de vierhoek onderaan in het midden klikken.
Meer gedetailleerde informatie vindt u in de secties 'Alle cursussen' en 'Hulpprogramma's', die toegankelijk zijn via het hoofdmenu van de site. In deze secties zijn de artikelen per onderwerp gegroepeerd in blokken met daarin de meest gedetailleerde (voor zover mogelijk) informatie over verschillende onderwerpen.
U kunt zich ook abonneren op de blog en op de hoogte blijven van alle nieuwe artikelen.
Het kost niet veel tijd. Klik gewoon op de onderstaande link:
Antiek en voorwerpen in antieke stijl trekken altijd belangstelling. Daarom is een virtueel album in retrostijl niet alleen een geweldige kans om de aandacht op je foto's te trekken, maar ook een win-win manier om op te vallen op YouTube, VKontakte en andere internetplatforms. U kunt zo'n project maken met "PhotoSHOW PRO":
Vond je de diavoorstelling leuk? In dit artikel zullen we gedetailleerd ingaan op alle fasen van het maken van zo'n video in de PhotoSHOW PRO-editor. Gewapend met de basisregels kun je in slechts een half uur zoiets van je foto's maken.
Geheimen van het creëren van een effectieve screensaverWilt u dat uw diavoorstelling de kijkers vanaf de eerste seconden boeit? Besteed in dit geval speciale aandacht aan de screensaver. In het begin kan een fotoalbum bijvoorbeeld op tafel liggen en dan soepel opengaan. Het bereiken van dit effect is vrij eenvoudig.
Stap 1: Kies een achtergrond voor uw dia. Idealiter zou het geassocieerd moeten worden met de oudheid. Dit kan een collage zijn van vintage foto's, een ingewikkeld retropatroon of een andere geschikte afbeelding. Als de achtergrond je saai lijkt, kun je deze opvrolijken met effecten uit de programmacollectie: voeg sneeuwvlokken, bladeren of een muzikaal alfabet toe. Pas het aantal en de grootte van de betrokken elementen naar wens aan.
Stap 2: Voeg een omslag toe. Pas de grootte en positie aan het begin van de show aan en ga vervolgens verder met het ontwikkelen van de animatie. Voeg op het tabblad met dezelfde naam vier keyframes toe en configureer deze:
- de eerste twee keyframes blijven ongewijzigd;
- op het derde frame zoomen we in op de omslag en lijnen deze uit in het midden;
- in het vierde keyframe voegen we een 3D-rotatie 180 graden naar links toe.
Stap 3: Upload een albumomslag en foto. Het is belangrijk om ervoor te zorgen dat de omslag en de achterkant (de achteromslag en de pagina vormen in dit geval één laag) hetzelfde formaat hebben en bijna dicht bij elkaar liggen. Met een foto is het gemakkelijker: u kunt deze overal plaatsen en zelfs “meerdere foto’s tegelijk in een album plakken”. Voeg desgewenst decor toe: hoeken, patronen en andere elementen die u geschikt acht.
Stel dezelfde animatie in voor deze lagen. Op het eerste en tweede punt zijn ze volledig onzichtbaar. Dit kunt u bereiken door de kolom “Transparantie” op 0 te zetten. Plaats het derde keyframe naast de tweede en stel de transparantie in op 100%. Pas de weergavetijd van lagen aan, zodat ze verschijnen na het openen van de hoes.
Stap 4. Pas de zoom van de dia aan. Gebruik de functie Camerabediening. Het principe van het werken met de tool is eenvoudig: u moet keyframes toevoegen en er parameters voor selecteren. Laat de camera pas in beweging komen nadat de cover volledig is geopend: we veranderen de eerste en tweede keyframe niet. Bij het derde belangrijke punt voegen we een soepele aanpak toe.
Indien nodig kunt u foto's ondertekenen. Om dit te doen, klikt u opnieuw op de knop "Laag toevoegen" en selecteert u het type tekst - in PhotoSHOW PRO kunt u eventuele inscripties implementeren.
Hoe u albumpagina's maaktSla alle instellingen op in de dia-editor en keer terug naar het hoofdwerkmenu van het programma. Nu is het tijd om andere fotovellen te maken.
Stap 1: Dupliceer de eerste dia. Om dit te doen, klikt u er met de rechtermuisknop op en selecteert u “Bewerken” > “Dia dupliceren”.
Verander het:
- verwijder de omslaganimatie. Voor het eerste keyframe stelt u de rotatie in op 180 graden. Het album is dus al geopend aan het begin van deze dia die op het scherm wordt weergegeven.
- verander de foto en clipart (indien gewenst). Verwijder alle aangepaste animaties voor hen.
- pas de 3D-camera-instellingen aan. Stel voor het eerste sleutelframe de benadering in die is opgegeven voor het derde. Verwijder de resterende markeringen op de tijdlijn.
Stap 2. Sla uw wijzigingen op. Maak zoveel kopieën van de dia als er foto's zijn die u wilt toevoegen. Vervang de afbeeldingen door nieuwe via de editor.
Stap 3. Voeg animatie voor het omslaan van pagina's toe. Open het gedeelte 'Overgangen'. Passende animatiemogelijkheden vindt u in de groep “3D-overgangen”. Selecteer de preset met een muisklik en klik op de knop ‘Toepassen op alles’.
Indien gewenst kunt u op de laatste dia een “sluitend omslag”-effect toevoegen. Om dit te doen, schrijft u in de dia-editor voor de overeenkomstige laag in de kolom "3D-rotatie naar links" 0.
U zult uw diavoorstelling aanzienlijk verbeteren als u er geschikte muziek in integreert: de track kan worden geselecteerd uit de collectie van het programma of worden gedownload van uw computer.
Nu weet je hoe je een spectaculair retroalbum maakt dat je familie en vrienden zich nog lang zullen herinneren. Installeer PhotoSHOW PRO en begin er vandaag nog aan te werken! Het voltooide videoalbum kan op uw computer worden opgeslagen, op schijf worden gebrand of worden voorbereid voor uploaden naar internet.
Onlangs is het flipping-effect op veel sites behoorlijk populair geworden. Daarom zou het behoorlijk relevant zijn om dit effect te bereiken met behulp van jQuery en CSS3. We gaan blokken met afbeeldingen maken, die later in een boek worden omgezet. Ook zal onze slider knoppen bevatten waarmee de gebruiker kan zien op welke pagina hij zich momenteel bevindt. De sliderpagina's worden gepresenteerd als afbeeldingen in HTML, maar elke pagina wordt met behulp van jQuery in twee pagina's opgesplitst.
We gaan deze code schrijven als een JQuery-plug-in, dus we moeten eerst jQuery inschakelen. Vervolgens nemen we de Modernizr-bibliotheek op. We hebben alleen 3D-transformaties nodig en u kunt het vereiste script hier downloaden. Dit zorgt ervoor dat alles goed werkt in browsers die geen 3D-transformaties ondersteunen. Vervolgens moeten we een bestand maken met de naam jquery.pictureflip.js, dat op dezelfde plaats wordt geplaatst als onze plug-incode. De HTML zou er als volgt uit moeten zien:
Lichaam
De HTML-opmaak is vrij eenvoudig. Het enige dat we hoeven te doen is een groep div's plaatsen die onze afbeeldingen in HTML vertegenwoordigen. En dan nog een blok maken met een specifiek ID? bijvoorbeeld #flipbook.
Bloemen: wat je niet wist Bloemen: echt of fictie? Een bloem bij mijn baby! Zullen bloemen de aarde vernietigen?
Laten we nu verder gaan met stijlen.
CSSSamen met een aantal standaard CSS-stijlen gebruiken we 3D-transformaties om het pagina-omslageffect te bereiken. In JQuery splitsen we het afbeeldingsblok in twee afzonderlijke div's en roteren er vervolgens één zodat het lijkt alsof we de pagina omslaan. Laten we eerst enkele basisstijlen toevoegen.
#container ( opvulling : 10px ; box-shadow: 0px 0px 10px rgba(0 ,0 ,0 ,0 .1 ) ; marge : 20px auto ; breedte : 600px ; hoogte : 330px ; ) /* 600x300px groot */ .flipbook ( positie : relatief ; breedte : 600px ; hoogte : 300px ; z-index : 999 ; ) .flipbook > div ( breedte : overnemen ; hoogte : overnemen ; positie : absoluut ; boven : 0px ; links : 0px ; tekstuitlijning : links ; .flipbook .hide (weergave: geen ; ) .flipbook > div > div ( breedte : overnemen ; hoogte : overnemen ; achtergrondgrootte : 600px 300px ; breedte : 50% ; hoogte : 100% ; positie : absoluut ; ) / * We verdelen het blok met de afbeelding in twee afzonderlijke blokken. */ /* De tweede moet zich aan de rechterkant bevinden en de eerste aan de linkerkant */ .flipbook div[ class$="-fend" ] ( background-position : 100% 0 ; left : 50% ; )
In de jQuery-sectie verplaatsen we twee delen van afbeeldingen naar de volgende div, die Moving-div wordt genoemd. We plaatsen ze zo dat ze over het geheel genomen een samenhangend beeld geven, en draaien ze vervolgens. Om dit correct te doen, past u een 3D-transformatie toe op de bewegende div.
/* 3D behouden */
Flipbook .moving-div ( z-index: 99999; breedte: 50%; -webkit-perspectief: 1000; -webkit-transform-stijl: behouden-3d; -webkit-transform-origin: 0 0; -moz-perspectief: 1000 ; -moz-transform-style: behouden-3d; -moz-transform-origin: 0 0 ; -o-perspectief: 1000 ; -o-transform-stijl: behouden-3d; -o-transform-origin: 0 0 ; -ms-perspectief: 1000 ; -ms-transform-stijl: behouden-3d; -ms-transform-origin: 0 0 ; perspectief: 1000 ; transformatie-stijl: behouden-3d; transformatie-oorsprong: 0 0 ; ) / * Maak de backfaces onzichtbaar */ .flipbook .moving-div div ( -webkit-backface-visibility: verborgen; -moz-backface-visibility: verborgen; -o-backface-visibility: verborgen; -ms-backface-visibility: verborgen ; backface-zichtbaarheid: verborgen; breedte: 100%; z-index: 9999 ; ) /* Zorg ervoor dat de div's zich in de juiste positie bevinden */ .flipbook .moving-div > div[ class$="-fend" ] ( left : 0 ; ) /* Draai de laatste kaart zodat deze rug aan rug tegenover de eerste ligt */ .flipbook .moving-div > div[ class$="-fstart" ] ( -webkit-transform: rotatieY(180deg) ; -moz-transform: roterenY(180deg) ; -o-transformeren: roterenY(180 graden); -ms-transform: roterenY(180deg); transformeren: roterenY(180 graden); )
Binnen de bewegende div worden twee overspanningen geplaatst, waardoor een schaduweffect ontstaat. Ze worden geanimeerd in het jQuery-gedeelte.
/* De twee overspanningen zijn schaduwen voor diepte */ .flipbook .moving-div span ( box-shadow: inset 60px 0 60px -60px rgba(0 ,0 ,0 ,0 .1 ) ; breedte: 100 % ; hoogte: 100 %; positie: absoluut; dekking: 0; weergave: blok; z-index: 999999; top: 0; achtergrond: rgba(0,0,0,0.1); -webkit-backface-zichtbaarheid: verborgen; -moz -backface-zichtbaarheid: verborgen; -o-backface-zichtbaarheid: verborgen; -ms-backface-zichtbaarheid: verborgen; backface-zichtbaarheid: verborgen; links: 0; ) .flipbook .moving-div span:last-of-type ( -webkit-transform: roterenY(180deg) ; -moz-transform: roterenY(180deg) ; -o-transform: roterenY(180deg) ; -ms-transform: roterenY(180deg) ; transformeren: roterenY(180deg) ; doosschaduw : inzet -60px 0 60px -60px rgba(0 ,0 ,0 ,0 .1 ) ; )
Er zijn ook een paar andere klassen die zullen worden toegevoegd om een bewegende div-rotatie te creëren. Voor hen gebruiken we eenvoudige 3D-transformaties
Flipbook .rotateYForward ( -webkit-transform: rotatieY(180deg) ; -webkit-transitie: -webkit-transform 1s gemak-in; -moz-transform: rotatieY(180deg) ; -moz-transitie: -moz-transform 1s gemak- in; -o-transform: rotatieY(180deg) ; -o-overgang: -o-transform 1s gemak-in; -ms-transform: rotatieY(180deg) ; -ms-overgang: -o-transform 1s gemak-in; transformeren: roterenY(180deg) ; overgang: transformeren 1s gemak-in; links: 50% ; ) .flipbook .beginMove (links: 50%; -webkit-transform: roterenY(180deg) ; -moz-transform: roterenY(180deg) ; -o-transform: roterenY(180deg) ; transformeren: roterenY(180deg) ; ) .flipbook .rotateYBackward ( -webkit-transform: roterenY(360deg) ; -webkit-transitie: -webkit-transform 1s gemak-in; -moz -transform: roterenY(360deg); -moz-overgang: -moz-transform 1s gemak-in; -o-transform: roterenY(360deg) ; -o-overgang: -o-transform 1s gemak-in; -ms-transform : roterenY(360deg); -ms-overgang: -o-transform 1s gemak-in; transform: roterenY(360deg);overgang: transformatie 1s gemak-in; )
De volgende fase is vrij eenvoudig. We voegen eenvoudigweg stijlen toe voor de pijlen aan de voor- en achterkant en kleine cirkels die de gebruiker vertellen welke pagina's geopend zijn.
Flipbook .pijl terug , .flipbook .pijl vooruit (
Breedte: 100px; hoogte: 100px; doosgrootte: randdoos; -moz-box-sizing: grensvak; opvulling: 8px 28px; lettergrootte: 7em; lettertypegewicht: vet; z-index: 10; links: -140px; kleur: #fff; bovenkant: 30%; grensradius: 100px; positie: absoluut; cursor: aanwijzer; z-index: 999999; achtergrondkleur: #396275; ) .flipbook div[ class$="-arrow" ] :hover ( box-shadow: inzet 0px 0px 30px rgba(0 ,0 ,0 ,0 .2 ) ; ) .flipbook div[ class$="-arrow" ] :active (achtergrondkleur: #2e505f; box-shadow: inzet 0px 0px 30px rgba(0,0,0,0.1) ; ) .flipbook.forward-pijl (rechts: -140px; links: auto; opvulling: 8px 34px; lettertypegewicht: vet; ) .flipbook .buttons (breedte: 98%; opvulling: 7px 1%; hoogte: 16px; achtergrond: #fff; positie: relatief; bovenkant: 300px; ) .flipbook .buttons span ( achtergrond: #fff; box-shadow: inzet 0 0 8px rgba(0,0,0,0.1); breedte: 16px; cursor: aanwijzer; hoogte: 16px; randradius: 16px; weergave: blok; zwevend: rechts; positie: relatief; marge-rechts: 5px; ) .flipbook.knoppen.geselecteerd (achtergrondkleur: #47b1e2; vakschaduw: inzet 0 0 10px rgba(0,0,0,0.1) ;). flipbook .content (weergave: geen; hoogte: 30px; opvulling: 7px; z-index: 99999999; positie: absoluut; bodem: 0; breedte: 50%; lettergrootte: 2em; ) .flipbook a ( kleur : #fff ; lettertypegewicht : vet ; tekstdecoratie : geen ; rand-onderkant : 2px effen #fff ; tekstschaduw : 0 0 10px rgba(0 ,0 ,0 ,0 .1 ) ; )
En tot slot gaan we de afbeeldingen toevoegen die we gaan gebruiken. Als je wilt, kun je er meer toevoegen. In het voorbeeld zijn dat er vier. Ze verwijzen naar de afbeeldingsdividenden die we eerder in de HTML hebben gedefinieerd.
/* DE AFBEELDINGEN DIE U WILT GEBRUIKEN */
/* == voeg meer toe als je wilt == */ /* == update ook de HTML! == */ div[ class^="image-1-" ] ( achtergrond : url ("images/1.jpg" ) ; ) div[ class^="image-2-" ] ( achtergrond : url ("images /2.jpg" ); ) div[ class^="image-3-" ] ( achtergrond : url ("images/3.jpg" ) ; ) div[ class^="image-4-" ] ( achtergrond : url ("afbeeldingen/4.jpg" ); )
Laten we verder gaan met JQuery!
jQueryOpen uw jquery.pictureflip.js-bestand. De hoofdstructuur van de JQuery-plug-in zou er als volgt uit moeten zien:
(function ($) ($.fn .extend (( // De naam van uw plug-in pictureflip: function (options) ( // Enkele standaardwaarden. De gebruiker kan deze var-standaardwaarden wijzigen = ( time: 1000 , start : 1 ) // Verbind de standaardwaarden met de functievariabelen var options = $.extend (defaults, opties); // Dit bit is belangrijk, het zorgt voor de ketenbaarheid van jQuery // We moeten elk object deze plug-in retourneren is van toepassing op , zodat // de gebruiker aan het einde nog steeds meer jQuery-functies kan toevoegen, dat wil zeggen // $("#item").pictureflip().appendClass("pictures"); retourneer deze .each (function () ( var o = opties; var obj = $(this ); // Dit is waar onze plug-incode naartoe gaat! Het is gewoon gewone jQuery // vanaf nu! ) ; ) ) ; ) ) (jQuery) ;
Een plug-in makenOm met bepaalde acties aan de slag te gaan, moeten we enkele basisvariabelen declareren, zoals het aantal afbeeldingen en het controleren op beeldanimatie.
// Enkele variabelen om mee te beginnen
Var tijd = o.tijd ; var afbeeldingsnummer = $("div" , obj) .length ; var geanimeerd = 0;
De volgende stap is het toevoegen van de gebruikersinterface. We gaan dit doen met JQuery om het de gebruiker zo gemakkelijk mogelijk te maken.
// Voeg UI toe obj.append ("" ); obj.addClass("flipbook"); // Voeg een knop toe afhankelijk van de geselecteerde foto while (imageNumber > 0 ) ( $("" ) .appendTo ($(.buttons" ) ; --imageNumber; ) // Vervagen in de tekstinhoud $(, obj fadeIn(); // We zullen deze functie later toevoegen selectCircle() ;
Vervolgens moeten we enkele eenvoudige functies definiëren. Deze functies omvatten animatie, z-index, het opnieuw starten van dia's en het selecteren van de juiste cirkel.
// Wijzig de z-indexfunctie zIndexFix() ($("" ) .each (functie (index) ( zindex = index * -1 ; $(this ) .css ("zIndex" , zindex) ; ) ) ; ) // Herstart de dia's naar de normale positie, zodat ze klaar zijn om te spiegelen // opnieuw! function restartSlides() ( var $moveFirst = $(".moving-div div:first") .attr ("class" ) .split ( "-" ) [ 1 ] ; var $moveLast = $(".moving-div div:last" ) .attr ( "class" ) .split ("-" ) [ 1 ] ; $("> .moving- div div:first" , obj) .appendTo ($("> #image-" +$moveFirst, obj) ) ; $("> .moving-div div:last" , obj) .appendTo ($("> # image -" +$moveLast, obj) ); $(".moving-div" ) .removeClass ("rotateYForward rotatieYBackward beginMove" ) .removeAttr ("style" ) ; $(.moving-div" ) .addClass (" hide " ); ) // Animeer de schaduwfunctie shadowAnimate(time) ( $(".moving-div span" ) .animate (( dekking: 1 ) , time/2 ) ; setTimeout(function () ($(". Moving-div span" ) .animate (( dekking: 0 ) , time/2 ; ) , time/2 ); ) // Selecteer de juiste cirkel op basis van de geselecteerde afbeeldingen. function selectCircle() ( var imageID = parseFloat($("> div:first" , obj) .attr ("id" ) .split ("-" ) [ 1 ] ) ; $(.buttons span" ) .removeClass ("geselecteerd" ); $(".buttons .button-" +imageID) .addClass ("geselecteerd" ) ; )
Laten we nu verder gaan met de animatiefunctie. Er is een variabele toegevoegd die controleert of er een vooruit- of achteruitknop is. Als je het gemerkt hebt, wordt de vorige variabele gebruikt om te controleren welke knop is ingedrukt. Momenteel werkt dit niet in Safari, waardoor het swipe-effect in Safari is uitgeschakeld.
// Animatiefunctie
Functie animatie(prev, time, buttons) ( // Vervaag de tekst $("div:first .content" , obj) .fadeOut (50 ) ; // Als de animatie niet werkt, kunnen we starten if (geanimeerd == 0 ) ( // Animatie werkt geanimeerd = 1 ; // Volgende dia if (prev != true ) ( var $nextSlide = $("div:first ~ div:first" , obj) .attr ("id" ) ; ) else ( var $nextSlide = $("div:last" , obj) .attr ("id" ) ; ) // Huidige dia var $thisSlide = $("div:first" , obj) .attr ("id " ); // Als 3D-transformaties niet worden ondersteund, gaan we standaard terug naar // fade-in dia's. Deze hebben niet het 3D-effect, maar zijn // nog steeds bruikbaar. if (Modernizr.csstransforms3d == "" || (navigator.userAgent .indexOf ("Safari" ) != -1 && navigator.userAgent .indexOf ("Chrome" ) == -1 ) ) ( $("> #" +$nextSlide, obj) .prependTo (obj) ; if (prev != true ) ( $("> #" +$thisSlide, obj) .appendTo (obj) ; ) geanimeerd = 0 ; zIndexFix() ; selectCircle() ; return false ; ) // Als de vooruitknop wordt ingedrukt if (prev ! = true ) ( // Div's toevoegen aan de bewegende div $("> #" +$nextSlide+" > div, > #" +$thisSlide+" > div" , obj).appendTo ($(" .moving-div" ) ); // Roteer de bewegende div-houder en wijzig de tijd // gebaseerd op wat is ingesteld via Javascript $(".moving-div" , obj) .addClass ("rotateYForward" ) .css ((: time/1000 +"s" , "-moz-transition-duration": tijd/1000 +"s", "-ms-transition-duration": tijd/1000 +"s", "-o-transition-duration": tijd/1000 +"s " , "overgangsduur" : tijd/1000 + "s" ) ); // Roteer de div's zodat de volgende div zichtbaar is // En de vorige div staat eronder $("> #" +$nextSlide, obj) .prependTo (obj) ; $("> #" +$thisSlide, obj) .appendTo (obj) ; ) else ( // Anders is dit de terugknop // Plaats de divs in de juiste volgorde zodat we // de illusie kunnen creëren van het omdraaien van $("> #" +$thisSlide, obj) .prependTo ($(obj) ); $("> #" +$nextSlide, obj) .insertAfter ($("div:first" , obj) ) ; // Voeg vervolgens de juiste div's toe aan de bewegende div $("> #" +$nextSlide+" > div, > #" +$thisSlide+" > div" , obj) .appendTo ($(".moving-div") ); // Repareer de z-index heel snel sinds we dingen rond zIndexFix() hebben verplaatst ; // Draai de bewegende div-houder $(".moving-div" ) .addClass ("beginMove" ) ; // Een zeer kleine time-out zodat deze functie niet interfereert met // andere functies setTimeout(function () ( / / Roteren! $(".moving-div" ) .addClass ("rotateYBackward" ) .css (( "-webkit-transition-duration" : time/1000 + "s" , "-moz-transition-duration" : tijd /1000 +"s" , "-ms-overgang-duur" : tijd/1000 +"s" , "-o-overgang-duur" : tijd/1000 +"s" , "overgang-duur" : tijd/1000 +"s" ) ; ) , tijd/50 ); ) // Schaduwanimatie! schaduwAnimate(tijd) ; // Nog een time-out, uit te voeren aan het einde van de animatie setTimeout(function () ( // Zet de dia's terug naar hun standaardklassen en -waarden restartSlides() ; if (knoppen != true ) ( $(". Moving-div" ) .addClass ("hide" ); ) // Dienovereenkomstig voorafgaan if (prev == true ) ( $(" > #" +$nextSlide, obj) .prependTo ($(obj) ) ; ) // Verbeter de z-index en verander de cirkel zIndexFix() ; selectCircle() ; // De animatie is nu overgeanimeerd = 0 ; // Vervaag de inhoud! $("div:first .content" , obj) .fadeIn () ; ) , tijd) ; ))
Nu hoeven we alleen maar een bepaalde reactie te veroorzaken wanneer de knop wordt ingedrukt.
$(".pijl vooruit" ) .click (functie () ($(".moving-div" ) .removeClass ("hide" ) ; setTimeout(function () ( animatie(false , tijd) ; ) , 1 ) ; ) ); $(".back-arrow" ) .click (function () ($(".moving-div" ) .removeClass ("hide" ) ; setTimeout(function () ( animatie(true , time) ; ) , 1 ) ; ) );
De volgende stap is het maken van een kleine cirkel onderaan. Dit is niet zo moeilijk om te doen als het lijkt. We willen dat de knoppositie overeenkomt met het afbeeldingsnummer. Hiervoor gebruiken we setInterval.
$(".buttons span" , obj) .click (function () ( // Verwijder de hide-klasse uit de bewegende div $(".moving-div") .removeClass ("hide" ) ; // Haal de knop-ID op var buttonID = parseFloat($(this ) .attr ("class" ) .split ("-" ) [ 1 ] ); // Haal de huidige iamge-ID op var currentImageID = parseFloat($("> div:first" , obj ) .attr ("id" ) .split ("-" ) [ 1 ] ) ; // Bereken een snellere tijd var reduxTime = time/10 ; // En stel een interval in een variabele in met behulp van de rotatieImages-functie var interval = setInterval (rotateImages, reduxTime) ; functionrotateImages() ( // Update de huidige afbeelding telkens wanneer het interval wordt uitgevoerd currentImageID = parseFloat($("> div:first" , obj) .attr ("id" ) .split ("-" ) [ 1 ] ); // Als het knopnummer gelijk is aan het huidige afbeeldingsnummer if (buttonID == currentImageID) ( // De animatie is voorbij, clear in het interval clearInterval(interval) ; // Hide Moving-div $ (".moving-div" ) .addClass ("hide" ); // Annuleer de functie! return false ; ) else ( // Blijf anders de animatie-animatie uitvoeren (false , reduxTime, true ) ; ) ) ) );
En tot slot hoeft u alleen maar de z-index te controleren en de eerste afbeelding in te stellen als de gebruiker er een definieert.
// Zorg ervoor dat u ook de z-index repareert! zIndexFix() ; // Oh, en verander de startafbeelding als de gebruiker deze definieert. $(".buttons .button-" +o.start , obj) .klik () ;
Nu we klaar zijn, kunnen we onze plug-in lanceren.
VerbindingOm de plug-in uit te voeren, voegt u eenvoudig dit toe aan de kop van uw document:
$(document) .ready (functie () ($("#flipbook' ) .pictureflip (( tijd: 1000 , start: 1 ) ; ) ) ;
Vertaling – Dienstruimte
Computertechnologie is diep in ons leven doorgedrongen. Elke actie die we doen met behulp van computers gaat gepaard met het werk van speciale applicaties. Zelfs de snelkoppelingen die we op het bureaublad opslaan, worden door een speciaal programma verwerkt. Als we tegenwoordig een pen ter hand nemen, denken velen van ons dat we langzamerhand vergeten hoe we moeten schrijven.
Iets soortgelijks gebeurt met boeken. Er zijn steeds minder mensen die papieren boeken lezen. Het is veel gemakkelijker om e-boeken te lezen, die veel goedkoper zijn dan papieren boeken of zelfs gratis te downloaden zijn.
Als je tot de oude school behoort en papieren boeken leest, je abonneert op kranten en door de websites van je favoriete publicaties op internet bladert, ben je er misschien meer aan gewend om je favoriete project in een handige en meer vertrouwde vorm te hebben. PageFlip-effect (pagina's omdraaien) - imitatie van boeken. Hieronder krijgt u enkele tutorials, plug-ins en voorbeelden te zien met behulp van het PageFlip-effect. Laten we dus enkele plug-ins begrijpen.
Plug-insjQuery-plug-ins met een pagina-omslaand effect zijn geschikt voor sites met veel tekst en afbeeldingen. In plaats van een eentonige en saaie weergave van teksten, links en afbeeldingen op websitepagina's, kunt u met het effect van het omslaan van pagina's de presentatie van het project interactiever en geanimeerder maken.
Met deze plug-in kunt u publicaties die zijn gemaakt met FlippingBook Publisher en FlippingBook Online in één stap insluiten zonder codewijzigingen aan te brengen.
Easy Flip Flip is een plug-in waarmee u in een paar klikken een virtueel tijdschrift kunt maken.
3D FlipBook is een PDF-viewer of WordPress-plug-in waarmee u afbeeldingen, PDF's of HTML-bestanden in een flip-weergave kunt bekijken.
***
Een Page Flip Book voor WordPress is de gemakkelijkste manier om virtuele 3D-boeken te beheren die u met uw muis kunt bekijken.
Je kunt ook een achtergrondafbeelding of textuur kiezen als je die nodig hebt.
Met Photo Book Gallery kunt u responsieve flipboeken maken van afbeeldingen. U kunt uw boeken aanpassen met behulp van een reeks opties. De plug-in is eenvoudig te gebruiken en werkt prima op mobiele apparaten.
GoWorks Flip Clock geeft een strakke, retro flip-klok weer op uw pagina's en berichten. De plug-in is ideaal om de aandacht te vestigen op belangrijke informatie en heeft een aantrekkelijk visueel effect.
Tutorial over hoe u een PageFlip-indeling op volledig scherm kunt maken met BookBlock. Het idee is dat de inhoud in boekstijl van de site toegankelijk is via een uitschuifbaar zijbalkmenu.
De tutorial introduceert pure CSS en 3D Page Flipping-frame.
U kunt converteren met behulp van speciale code:
1 2
Page Flip met CSS3-animatie werkt momenteel in Safari en iPhone.
Deze tutorial leidt u door het hele proces van het maken van uw eigen paginaomslageffect met behulp van JavaScript.
Joe Lambert leidt u door het proces van het maken van verbluffende paginaontwerpen voor uw fotogalerijwebsite.
In deze zelfstudie leert u hoe u een cirkel maakt met een handvat dat wordt geopend wanneer u erop klikt, hoe u realistische 3D-effecten maakt en pagina's omslaat met behulp van CSS 3D-transformaties en schaduwen.
Het converteren van webpagina's is tegenwoordig veel eenvoudiger geworden met Adobe InDesign CS4.
