Bli kjent med Impress.js presentasjonsverktøy

Hvis du er ute etter et kult og kreativt verktøy for å implementere presentasjoner online, kan Impress.js bare være instrumentet du trenger for å sparke dem, eller hele nettstedet ditt, for den saks skyld.

Impress.js er et presentasjonsrammeverk basert på kraften i CSS3-transformasjoner og CSS3-overganger sammen med JavaScript og jQuery. Rammeverket støttes for tiden i moderne nettlesere og er inspirert av ideen bak prezi.com, som er skybasert presentasjonsprogramvare. Impress.js er hjernen til Bartek Szopka, alias bartaz fra Poznań, Polen. Demopresentasjonen minner meg om det lignende utseendet og følelsen til flere nettsteder som bruker elementer av parallax-rulleeffekten.

Kildekoden er tilgjengelig på github der filene komprimeres til et zip-arkiv eller kan kopieres individuelt, inkludert demo-indeksen.html, impress-demo.css, impress.js og noen få .png bildefiler. En skjermdumping av de 52 øverste kodelinjene fra index.html-filen vises nedenfor i figur B, som vist i Dreamweaver tekstredigeringsprogram, og har en innledende ASCII-kunst "Velkomst" fra Yoda.

Figur B

Demokoden er godt kommentert og dokumentert med forklaringer og gir også valgfrie kodeeksempler for de fleste seksjoner av html-, css- og js-filene. For eksempel kan kjernefunksjonen i presentasjonsrammen kjøres uten noen eksterne stilark, ettersom skriptene inkluderer stillas som er nødvendig for at presentasjonen skal fungere. Stilene som er inkludert er for demoformål, slik Szopka forklarer i kommentarene hans fra linjene 78 til 92 i html-koden. Og han har en kort advarsel som sier: "ADVARSEL: Impress.js kan ikke hjelpe deg hvis du ikke har noe interessant å si :)". Det sier seg selv at presentasjoner uten stoff eller takeaways for publikum er bortkastet tid for dem og programlederen. Szopka fortsetter med flere kommentarer gjennom koden om å gjøre rammeverket til ditt eget; med andre ord, demoen er hans utgangspunkt for deg, og han advarer om at manuell koding av din egen presentasjon er det du bør sikte mot i ditt eget ferdige produkt.

HTML

Hovedtypen til html-filen får et klassens navn på 'imponere-ikke-støttet' slik at nettlesere som ikke støttes, vil bruke tilbakestillingsstiler. Og selv om det ikke er nødvendig å legge til noen stiler manuelt på dette elementet, hvis skriptet oppdager at en nettleser ikke støttes, vil den legge til denne klassen; Derfor holder det i HTML-en at brukere uten JavaScript også vil få tilbakemeldingsstiler. Fallback-meldingen utløses for de som ser presentasjonen i andre nettlesere enn Chrome, Safari eller Firefox, som vist i figur C (vist i IE8 nedenfor). Fallbacken er bare en serie lysbilder i et rulleformat ovenfra og ned.

Figur C

Når du kommer litt dypere inn i rammen, vil du oppdage at den sentrale delen av indeksfilen starter med beholderen . Og alle presentasjonsbildene (trinnene) er nestet inne i hoveddivisjonen med et klassens navn "imponere". Den nestede divens behov for å ha et klassens navn på "trinn", i demoen blir de kåret til en klasse av "trinnslide".

Plasseringen av lysbildene er avhengig av å gi et dataattributt, som er ganske likt hvordan parallaksrulling blir oppnådd. Demonstrasjonskoden spesifiserer x- og y-posisjoner for trinnelementene med data-x = "XXXX" og data-y = "XXXX" attributter, som plasserer midten av elementet som skal plasseres i punktet x = XXXXpx og y = XXXXpx innenfor presentasjonen "lerret".

Den grunnleggende strukturen i HTML ligner på denne kodebiten jeg har laget nedenfor, som fremhever de fire første lysbildene og funksjonaliteten (trinnene):

Velkommen til presentasjonen!


Med ...

  • CSS3-overganger
  • CSS3 Transformer
  • HTML5
  •  Nå ... gjør din egen! 

    Av Ryan Boudreaux

    Du kan også ta med bilder i lysbildet ditt (trinn)!

    Legg til lenker til andre nettsteder hvis du vil!

     Prøv flere funksjoner! 

    impress.js *

     * Ingen rim beregnet 

    Legg merke til at ID- attributtet til trinnelementet brukes til å identifisere det i URL-en, og dette er valgfritt, hvis det ikke er definert, vil elementet få en standardverdi på `trinn-N 'der N er et antall lysbilder. Det siste lysbildet (trinn) bruker en dataskala som er satt til "4" i dette eksemplet. Datatributtet for X og Y er satt til null, men i dette elementet betyr dataskalaen at lysbildet vil være 4 ganger større enn de andre. Fra presentasjons- og overgangssynspunkt betyr dette at den må nedskaleres fire ganger for å bringe den tilbake til den opprinnelige størrelsen.

    Den eneste CSS-modifiseringen jeg gjorde til den originale impress-demo.css-filen, var å endre kroppsbakgrunnens radiale gradientfarge; kodebiten kopieres nedenfor:

     kropp { 
     font-family: 'PT Sans', sans-serif; 
     min-høyde: 740px; 
     bakgrunn: rgb (39, 182, 170); 
     bakgrunn: -webkit-gradient (radial, 50% 50%, 0, 50% 50%, 500, fra (rgb (39, 182, 170)), til (rgb (190, 190, 190))); 
     bakgrunn: -webkit-radial-gradient (rgb (39, 182, 170), rgb (190, 190, 190)); 
     bakgrunn: -moz-radial-gradient (rgb (39, 182, 170), rgb (190, 190, 190)); 
     bakgrunn: -ms-radial-gradient (rgb (39, 182, 170), rgb (190, 190, 190)); 
     bakgrunn: -o-radial-gradient (rgb (39, 182, 170), rgb (190, 190, 190)); 
     bakgrunn: radial-gradient (rgb (39, 182, 170), rgb (190, 190, 190)); 
     } 

    Eksempel på lysbilder

    Når vi overfører lysbildene (trinnene) fra kodebiten som vist ovenfor, får vi eksemplet på firesiders presentasjon vist i figurene D til og med G. Husk at dette er en veldig enkel modifisering av demoen som Bartek gir. Gitt mer tid bør dette utvides til å omfatte mer styling og overganger; det har blitt gitt som utgangspunkt for demonstrasjonsformål. I demonstrasjonen trykker du på mellomromstasten eller piltastene for å overføre lysbildene.

    Figur D

    Figur E

    Figur F

    Figur G

    Med mer tid kan jeg vurdere mulighetene for å utvide impress.js-rammeverket som et fundament og implementere det til et komplett nettsted på samme måte som parallaksrulling. I tillegg kunne flere "maler" utvikles for forskjellige presentasjonsformater online.

    © Copyright 2021 | pepebotifarra.com