Jevn Rulling for Videopresentasjoner

0
33

La oss si at du ønsket å bla til en web-side fra topp til bunn programmatisk. For eksempel, du spiller inn en screencast, og ønsker en fin full-side bla. Du har sannsynligvis ikke kan rulle det selv, fordi det vil være ujevn og hakkete. Native JavaScript kan gjøre med jevn rulling. Her er en liten kodebit som kan gjøre susen for deg:

vinduet.scrollTo({
øverst: dokument.kroppen.getBoundingClientRect().høyde
atferd: ‘glatt’
});

Men det er ingen måte å kontrollere hastigheten eller lettelser for det! Det er sannsynlig å være altfor fort for en screencast. Jeg fant et lite triks om, som opprinnelig ble publisert av (tror jeg) Jedidiah Vondt.

Trikset er å bruke CSS forvandler i stedet for faktisk å rulle. På denne måten, både hastighet og lettere kan kontrolleres. Her er koden som jeg ryddet opp litt:

const scrollElement = (element, scrollPosition, varighet) => {

// nyttig ved testing for å re-run det en haug.
// element.removeAttribute(“stil”);

const style = element.stil;
stil.overgangen = varighet + “s”;
stil.transitionTimingFunction = ‘letthet-i-ut’;
stil.forvandle = ‘translate3d(0,’ + -scrollPosition + ‘px, 0)’;
}

scrollElement(
dokumentet.kropp,
(
dokumentet.kroppen.getBoundingClientRect().høyde

dokumentet.documentElement.clientHeight
+
25
),
5
);

Ideen er å endre en negativ topp-posisjon for høyden av hele dokumentet, men trekk fra høyden av hva du kan se, slik at den ikke ruller for langt. Det er litt magisk tall i det hende du trenger å justere for å få det akkurat riktig for deg.

Her er en film jeg spilt på den måten:

Det er fortsatt ikke perrrrrrfectly glatt. Jeg er delvis skylde på FPS på videoen, men selv med min øyeepler ser det spille inn at det ikke var totalt smør. Hvis jeg trengte enda høyere kvalitet, vil jeg trolig starte datamaskinen på nytt og har denne side åpen som den eneste kategorien og åpent program, lolz.

Se en Demo

En annen mulighet er litt gode gamle fashioned jQuery .animate(), som kan utvides med noen tilpassede lettelser. Her er en demo av det.

Se Penn
jQuery Jevn Rulling med Lettelser ved Chris Coyier (@chriscoyier)
på CodePen.