logo

Hvordan bygge en fengslende presentasjon ved hjelp av HTML, CSS og JavaScript

Å bygge vakre presentasjoner er vanskelig. Ofte sitter du fast med Keynote eller PowerPoint, og malene er ekstremt begrensede og generiske. Vel ikke lenger.

I dag skal vi lære hvordan du lager en fantastisk og animert presentasjon ved hjelp av HTML, CSS og JavaScript.

Hvis du er en nybegynner innen webutvikling, ikke bekymre deg! Denne opplæringen vil være enkel nok til å holde tritt med. Så la oss gli rett inn i det!

Vi kommer til å bruke et fantastisk rammeverk kalt Reveal.js. Den gir robust funksjonalitet for å lage interessante og tilpassbare presentasjoner.

  1. Gå over til Reveal.js-depotet og klon prosjektet (du kan også overføre dette til GitHub-navneområdet ditt).

  1. Endre kataloger til den nylig klonede mappen og kjør npm install for å laste ned pakkeavhengighetene. Kjør deretter npm start for å kjøre prosjektet.

index.html filen inneholder alle markeringene for lysbildene. Dette er en av ulempene ved å bruke Reveal.js; alt innholdet vil bli plassert i denne HTML-filen.

Innebygde temaer

Reveal inkluderer 11 innebygde temaer som du kan velge mellom:

Endre temaet

  1. Åpne index.html
  2. Endre CSS-importen slik at den gjenspeiler temaet du vil bruke

Temafilene er:

  • beige.css
  • black.css
  • blood.css
  • league.css
  • moon.css
  • night.css
  • serif.css
  • simple.css
  • sky.css
  • solarized.css
  • white.css

Egendefinerte temaer

Det er ganske enkelt å lage et tilpasset tema. I dag skal jeg bruke det tilpassede temaet mitt fra en presentasjon jeg ga kalt "How To Build Kick-Ass Website:An Introduction To Front-end Development."

Slik ser mine egendefinerte lysbilder ut:

Opprette et tilpasset tema

  1. Åpne css/theme/src inne i IDE-en din. Dette inneholder alle Sass-filene (.scss ) for hvert tema. Disse filene vil bli transpilert til CSS ved hjelp av Grunt (en JavaScript-oppgaveløper). Hvis du foretrekker å skrive CSS, fortsett og bare lag CSS-filen i css/theme.
  2. Opprett en ny .scss fil. Jeg vil kalle min custom.scss . Det kan hende du må stoppe din lokale vert og kjøre npm run build for å transpilere Sass-koden til CSS.
  3. I index.html fil, endre CSS-temaimporten i <head> tag for å bruke navnet på det nyopprettede stilarket. Utvidelsen vil være .css , ikke .scss .
  4. Deretter opprettet jeg variabler for alle de forskjellige stilene jeg ønsket å bruke. Du kan finne egendefinerte fonter på Google Fonts. Når skriften er lastet ned, sørg for å legge til skrift-URL-en i index.html fil.

Her er variablene jeg valgte å bruke:

  • Tittelfont:Viga
  • Innholdsfont:Åpne Sans
  • Kodefont:Courier New
  • Kursiv skrift:Flotte vibber
  • Gul farge:#F9DC24
  1. Legg til en .reveal klasse til den tilpassede Sass-filen. Dette vil pakke inn alle stilene for å sikre at vårt tilpassede tema overstyrer eventuelle standardinnstillinger. Deretter legger du til din egendefinerte stil!

Dessverre, på grunn av tidsbegrensninger, innrømmer jeg at jeg brukte ganske mye !important overstyrer i min CSS. Dette er fryktelig praksis, og jeg anbefaler det ikke. reveal.css filen har ekstremt spesifikke CSS-stiler, så hvis jeg hadde mer tid, burde jeg ha gått tilbake og sørget for at klassenavnene mine var mer spesifikke, slik at jeg kunne fjerne !importants .

Mixins og innstillinger

Reveal.js kommer også med blandinger og innstillinger du kan bruke i ditt egendefinerte tema.

For å bruke blandingene og innstillingene, importerer du bare filene til ditt egendefinerte tema:

@import "../template/mixins";
@import "../template/settings";

Blandinger
Du kan bruke blandingene vertikal gradient, horisontal gradient eller radial gradient for å lage en pen visuell effekt.

Alt du trenger å gjøre er å angi de nødvendige parameterne (fargeverdi) og vips, du har en gradient!

Innstillinger
I innstillingsfilen finner du nyttige variabler som overskriftsstørrelser, standard fonter og farger og mer!

Elementer

Strukturen for å legge til nytt innhold er:

.reveal > .slides > section

<section> element representerer ett lysbilde. Legg til så mange seksjoner du trenger for innholdet ditt.

Vertikale lysbilder

For å lage vertikale lysbilder, kan du bare legge inn seksjoner.

Overganger

Det er flere forskjellige lysbildeoverganger du kan velge mellom:

  • Ingen
  • Fade
  • Skyv
  • Konveks
  • Konkav
  • Zoom

For å bruke dem, legg til en data-transition="{name}" til <section> som inneholder lysbildedataene dine.

Fragmenter

Fragmenter er flotte for å fremheve spesifikke deler av informasjon på lysbildet ditt. Her er et eksempel.

For å bruke fragmenter, legg til en class="fragment {type-of-fragment}" til elementet ditt.

Fragmenttypene kan være:

  • vokse
  • krympe
  • fade-out
  • fade-up
  • fade-in-the-the-out
  • fade-in-deretter-semi-out
  • marker-strøm-blå
  • uthev-rød
  • markering-grønn
  • høylys-blå

Du kan i tillegg legge til indekser til elementene dine for å indikere i hvilken rekkefølge de skal utheves eller vises. Du kan angi dette ved å bruke data-fragment-index={index} attributt.

Det er mye flere funksjoner å reveal.js som du kan utnytte for å bygge en vakker presentasjon, men dette er hovedsakene som fikk meg i gang.

For å lære mer om hvordan du formaterer lysbildene dine, sjekk veiledningen for reveal.js.
All koden for presentasjonen min kan sees på GitHub. Stjel gjerne temaet mitt!