Vytvořte posuvník a prezentace pomocí Reveal.js

Mnohokrát, když potřebujeme vytvořit posuvník nebo prezentaci, používáme software, jako je Powerpoint nebo Prezi, v současné době existuje mnoho rámců, které nám umožňují provádět tento typ prezentací pomocí technologie Html5, Jquery a Css 3.

Výhodou je, že jej lze zobrazit v libovolném prohlížeči, na jakémkoli operačním systému a dokonce jej lze použít v aplikacích pro mobilní zařízení.

Reveal je framework vyvinutý v Javascriptu, který poskytuje funkce pro vytváření sliderů a prezentací s funkcemi, které vám umožňují spravovat a manipulovat se snímky, exportovat do PDF, možnost ovládat čas, navigaci a efekty jednotlivých snímků.

Reveal je bezplatná knihovna A má tu velkou výhodu, že můžeme programovat, připojit se k databázím nebo zahrnout do jakékoli aplikace, která podporuje Html a Javascript, něco, co nejpopulárnější software neumí.

Vývoj s Reveal je snadný a my musíme znát pouze Html a Js. Abychom mohli začít vytvářet prezentaci, musíme si stáhnout knihovnu Reveal.js z oficiálních webových stránek.

Dále rozbalíme soubory zip a spustíme výukový program. Začneme s a Jednoduchý příklad k testování Reveal.js.

Z adresáře, který jsme rozbalili, zkopírujeme složky css, js, plugins a lib do naší složky Example01. Tyto složky obsahují všechny knihovny potřebné k vytvoření naší prezentace.

Pak vytvoříme posuvník se dvěma obrázky a textem, kde se můžete pohybovat automaticky nebo pomocí klávesnice. Bude to následující:

Zdrojový kód je následující:

 Reveal.js Příklad 01
Sportovní auto


Navštívit naši stránku
KONZULTOVAT

Rozhraní Reveal nám poskytuje několik motivů nebo návrh CSS, které můžeme najít ve složce CSS, a změnou řádku motivu můžeme změnit design.

Aplikujeme téma Beige a vizualizujeme pomocí emulátoru mobilního zařízení ve Firefoxu a vidíme, že knihovna má na starosti vytváření adaptivního designu.

Činnost posuvníku zajišťuje kód Javascript:

Pokud chceme, aby se posuvník pohyboval automaticky, indikujeme čas přechodu v milisekundách parametrem autoSlide, v případě jeho nepoužívání je pak nutné jej přesouvat pomocí šipek pomocí klávesnice nebo myši.

Weboví vývojáři používají tento typ knihovny k odložení formátů gif.webp, flash a dalších animací. Tento typ rámce dokonce umožňuje použití posuvníku pro seo, protože text je indexovatelný. Můžeme jej také použít online i offline k zobrazení naší prezentace z pendrive nebo mobilního zařízení pomocí libovolného prohlížeče.

Rámec Reveal.js se skládá z jednoho souboru JavaScript a dvou souborů šablony stylů. První šablona stylů odhaluje.css definuje některé běžné styly, zatímco druhá obsahuje design standardního motivu, můžeme také přidat třetí šablonu stylů s vlastními třídami.

Toto téma definuje vzhled důležitých částí vašich prezentací, protože obsahují text, obrázky a odkazy.

Můžeme použít společně s Reveal.js další knihovny, jako je CSS 3D nebo WebGL.

The Odhalit rámec Umožňuje vám používat různé doplňky a konfigurační parametry ke zlepšení uživatelské zkušenosti. Konfigurační parametry, které nás budou nejvíce zajímat, jsou:

řízeníTento parametr udává, že se šipkami pro navigaci mezi snímky zobrazujeme, pokud nic neoznačíme, zobrazí se ve výchozím nastavení. Může mít hodnotu true nebo false.

pokrokBěhem postupu prezentace zobrazuje indikátor průběhu. Může mít hodnotu true nebo false.

slideNumberZobrazuje aktuální číslo snímku. Může mít hodnotu true nebo false.

klávesnicePovolte nebo zakažte interakci s klávesnicí. Může mít hodnotu true nebo false.

dotekpovoluje nebo zakazuje používání dotykových obrazovek, pokud je máte. Může mít hodnotu true nebo false.

smyčkaindikuje, že když dosáhne konce, vrátí se na začátek a pokračuje bez zastavení, pokud uvedeme hodnotu false, zastaví se, když dosáhne konce.

Může mít hodnotu true nebo false.

AutoSlideje čas v milisekundách na automatické přepnutí z jednoho snímku na druhý.

přechodtyp přechodu mezi snímky. Lze jej nastavit na neplatný, žádný, slábnout, klouzat, konvexní, konkávní nebo zoom.

Velmi zajímavým příkladem je oficiální demo, které lze použít pro procvičování a také stáhnout z oficiální stránky Reveal.js.

Pokud chceme přidat Svislý posuvník vnořené části musíme vytvořit následovně:

 Svislý snímek 1 Svislý dílčí snímek 1.1 Svislý dílčí snímek 1.2 

Dále uděláme příklad 02, kde zahrneme další charakteristiky, jako jsou fragmenty, které jsou seznamy v html, které jsou zobrazeny po stisknutí klávesy, prezentace pokračuje

Prezentace bude hackerský kurz s počítačovými diapozitivy.

Zdrojový kód bude vypadat následovně:

 Kurz etického hackingu
Naučte se obrannou počítačovou bezpečnost

Detekce a kontrola zranitelnosti
Penetrační testování: Metody.

Zabezpečení sítě Linux Server Správa Windows Server Správa / sekce>

Fragmenty označují, že každá položka v seznamu se bude zobrazovat v průběhu prezentace, pokud není uvedena třída fragmentů, seznam bude zobrazen celý a ne jeden po druhém.

Také jsme uvedli svislé řezy, což jsou dílčí snímky, abychom zobrazili další snímky v určité sekci.

The framework Reveal.js Je to jedna z nejpopulárnějších možností pro vytváření prezentací pomocí HTML, protože ji lze použít na jakémkoli zařízení a nevyžaduje nainstalovaný žádný design ani programovací software.

V tomto článku se podíváme na některé jeho základní funkce, ale k dispozici je mnoho dalších.

Google experimentuje s technologií WebRtc, technologií, kterou jsme viděli v tutoriálu WebRTC Audio a video komunikace z prohlížeče a Reveal.js, takže pohyby snímků lze provádět pomocí gest rukou prostřednictvím webové kamery. Kalibrace webové kamery prostřednictvím WebRtc a jednoduchým pohybem ruky ve vzduchu můžeme změnit snímek.

Můžeme vidět projekt Google, který je v beta fázi Google Chrome s Gestures + Reveal.JS, kde můžete vidět několik ukázkových videí, která testují technologii.

Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod