impress.js Präsentationsschicht-Framework (Demonstrationstool) - erste Erfahrungen

impress.js Präsentationsschicht-Framework (Demonstrationstool) - erste Erfahrungen
Ich habe ein halbes Jahr lang nicht gebloggt, wofür ich mich ein wenig schäme … Ich hatte während der Neujahrsfeiertage eine Menge Spaß: Ich habe Dota gespielt (leider habe ich mehr verloren als gewonnen), Skifahren, Essen und Einkaufen gegangen. Im Handumdrehen muss ich heute zur Arbeit. Ich bin früh um 5 Uhr aufgestanden (ich bestehe darauf, früh ins Bett zu gehen und stehe in letzter Zeit früh auf). Ich kann nicht anders, als das Tool zu teilen, das Front-End-Ingenieure vor einiger Zeit gefunden haben, und so wurde der erste Blogbeitrag des neuen Jahres geboren:)
Möchten Sie, dass andere „Wow“ sagen, wenn sie Ihre Präsentation sehen? Möchten Sie Ihr Publikum mit auffälligen Effekten schockieren? Dann schauen wir nach unten
------------------Texttrennlinie-----------------
Übersicht <br />Wenn Sie es satt haben, PowerPoint zum Erstellen von PPTs zu verwenden, ist impress.js eine sehr gute Wahl. Die damit erstellten PPTs sind intuitiver und die Wirkung ist auch sehr gut. Angeberei hat ihren Preis, aber wenn Sie ein Frontend-Enthusiast sind, ist alles in Ordnung. Wenn Sie HTML und CSS kaum verstehen, ist das natürlich kein Problem. Lesen Sie einfach diesen Artikel und üben Sie ein wenig (ändern Sie die Beispiele auf der offiziellen Website) ...
impress.js ist ein Präsentationsschicht-Framework (Präsentationstool) für Entwickler, das von einem ausländischen Entwickler inspiriert von Prezi und unter Verwendung von CSS3 und JavaScript erstellt wurde. Jetzt können normale Entwickler mit impress.js Präsentationstools mit ähnlichen Effekten entwickeln, die jedoch eine bessere Leistung als Prezi auf FLASH-Basis bieten. Zu seinen Funktionen gehören unbegrenzte Drehung und Skalierung der Leinwand, Platzierung von Text jeder Größe in jedem Winkel, Unterstützung für CSS3-3D-Effekte usw. Gleichzeitig unterstützt es auch herkömmliche PowerPoint-Folienpräsentationen.
Derzeit wird impress.js auf Basis von WebKit-Browsern (Chrome, Safari) entwickelt, es kann aber auch normal auf anderen Browsern ausgeführt werden, die auf Nicht-WebKit-Engines basieren, aber CSS3 3D unterstützen.
Der Impressess-Quellcode wurde auf GitHub veröffentlicht, Adresse: https://github.com/bartaz/impress.js
Offizielle Demo-Adresse: http://bartaz.github.com/impress.js
Da es auf der Projektwebsite weder eine Dokumentation noch eine Nutzungsdokumentation gibt, wird in diesem Artikel Schritt für Schritt eine grundlegendere Präsentation erstellt. Machen wir weiter.
Bitte halten Sie einen modernen Browser bereit: Google Chrome (am besten), Safari oder FF.
*Mein IE10 wird nicht unterstützt. Ich weiß nicht, warum in vielen Materialien steht, dass IE10 auch unterstützt wird. Das tut mir leid.

Konfiguration
Die HTML5-Seitenstruktur ist fertig. Erstellen Sie einen Wrapper (Träger) mit der ID „impress“. Einfach div. Andere Tags können auch die Datei impress.js einführen und sie vor dem Ende des Body-Tags aufrufen.
class="impress-not-supported" ist die Eingabeaufforderung, die dem Benutzer angezeigt wird, wenn der Browser dies nicht unterstützt. Sie kennen den Downgrade-Prozess, daher werde ich ihn nicht im Detail erklären.

Code kopieren
Der Code lautet wie folgt:

<!doctype html>
<html>
<Kopf>
<title>Darren – Impress-Demo</title>
<meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">
<link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" />
</Kopf>
<Text>
<div Klasse="Impressum nicht unterstützt">
</div>
<div id="beeindrucken">
</div>
<script src="http://bartaz.github.com/impress.js/js/impress.js"></script>
<script>beeindrucken().init();</script>
</body>
</html>

Um eine Diashow in einem Wrapper zu erstellen, erstellen Sie einfach ein <div> mit class="step". Die ID von <div> ist optional. Wenn eine ID vorhanden ist, ändert sich der Hash in der URL mit der ID, andernfalls ist es Schritt-[num], wie zum Beispiel

Code kopieren
Der Code lautet wie folgt:

<div Klasse="Schritt">
erste Folie
</div>

Datenattribute: werden verwendet, um Foliengröße, Übergänge und andere Effekte zu beschreiben.
data-x = die x-Koordinate der Folie
data-y = die y-Koordinate der Folie
data-scale = Skalieren Sie durch Angabe eines Wertes. Ein data-scale von 5 vergrößert Ihre Folie um das Fünffache ihrer Originalgröße.
data-rotate = Drehen Sie Ihre Folie um eine bestimmte Anzahl von Grad
data-rotate-x = Bei 3D-Verwendung gibt diese Zahl an, um wie viele Grad es um die x-Achse gedreht werden soll. (Nach vorne lehnen/nach hinten lehnen)
data-rotate-y = Bei 3D-Verwendung gibt diese Zahl an, um wie viele Grad es um die Y-Achse gedreht werden soll. (Linksschwung/Rechtsschwung)
data-rotate-z = Bei 3D-Verwendung gibt diese Zahl an, um wie viele Grad es um die Z-Achse gedreht werden soll.

Als Nächstes müssen Sie sich auf das Erstellen von Datenattributen konzentrieren. Beginnen Sie dann Schritt für Schritt mit der Erstellung einer Präsentation.
Beginnen Sie mit einer ersten Folie, deren data-x- und data-y-Attribute auf 0 gesetzt sind, sodass sie in der Mitte der Seite angezeigt wird.

Code kopieren
Der Code lautet wie folgt:

<div Klasse="Schritt" data-x="0" data-y="0">
Dies ist Folie 1 - 【Titel】
</div>

Die zweite Folie hat einen Daten-x-Wert von 500 und einen Daten-y-Wert von 0. Wenn sie aktiv ist, wird sie (die Folie) 500 Pixel nach links verschoben.

Code kopieren
Der Code lautet wie folgt:

<div Klasse="Schritt" data-x="500" data-y="-400">
Dies ist Folie 2
</div>

Die dritte Folie hat den gleichen Daten-x-Wert und eine Daten-y-Position von -400, was bedeutet, dass sie 400 Pixel vom oberen Rand entfernt in den Bildschirm hineingleitet.

Code kopieren
Der Code lautet wie folgt:

<div Klasse="Schritt" data-x="500" data-y="-400">
Dies ist Folie 3
</div>

Die vierte Folie weist eine neue Wendung auf, da hier der Wert von data-scale zur Steuerung der Skalierung verwendet wird. data-scale="0.5" bedeutet, dass es halb so groß sein sollte und dass es, wenn es zur aktiven Präsentation wird, den Maßstab aller Folien um das erforderliche Vielfache anpasst, was für einen guten Start sorgt.

Code kopieren
Der Code lautet wie folgt:

<div Klasse="Schritt" data-x="500" data-y="-800" data-scale="0,5">
Dies ist Folie 4
</div>

Mit der fünften Foliendreheigenschaft können Sie eine Folie zur aktuellen Ansicht drehen. Folie 5 ist auf eine Drehung um 90 Grad eingestellt, was einen ziemlich coolen visuellen Effekt hat.

Code kopieren
Der Code lautet wie folgt:

<div Klasse="Schritt" data-x="0" data-y="-800" data-rotate="90">
Dies ist Folie 5
</div>

Die sechste Folie beginnt mit dem 3D-Stil, der es Ihnen ermöglicht, Rotationseigenschaften für jede Achse jeder Dimension (x, y, z) festzulegen. Die x-Achse ist die horizontale Achse, d. h. Sie können Dinge nach oben (positive Werte) oder unten (negative Werte) neigen. Die y-Achse ist die vertikale Achse, d. h. Sie können Dinge nach links (negative Werte) oder rechts (positive Werte) schwenken. Die z-Achse ist die Längsachse, d. h. Sie können Dinge nach oben (negative Werte) und unten (positive Werte) drehen.

Code kopieren
Der Code lautet wie folgt:

<div Klasse="Schritt" Daten-x="-1200" Daten-y="0"
Daten-Drehung-x="30" Daten-Drehung-y="-30" Daten-Drehung-z="90" Daten-Skala="4">
Dies ist Folie 6
</div>

Die obigen 6 Folien gehen die Werte in den Datenattributen durch und präsentieren uns eine leicht allgemeinere Präsentation. Sie können Ihrer Fantasie freien Lauf lassen und diese Effekte auf unglaubliche und überraschende Weise kombinieren, um Ihren eigenen Diashow-Stil zu kreieren.
Mir persönlich gefällt die globale Vorschau. Sie zeigt alle Folien parallel an. Wenn sie sinnvoll angeordnet sind, sieht das sehr gut aus. Um sie zu verwenden, fügen Sie nach Folie 6 einen HTML-Abschnitt ein.

Code kopieren
Der Code lautet wie folgt:

<div id="Übersicht" Klasse="Schritt" data-x="-200" data-y="-500" data-scale="3"></div>

Der globale Vorschauwert ist je nach Position Ihrer Folie unterschiedlich. Passen Sie die Demo am Ende nach und nach an, um ein Gefühl dafür zu bekommen. Ich hoffe, es gefällt Ihnen!
Wenn Sie fertig sind, denken Sie daran: Sie können noch so viel mehr damit machen. Ihrer Kreativität sind keine Grenzen gesetzt!

Persönliche Erfahrung <br />Nur weil wir Frontend-Entwickler sind, ist es nicht verkehrt, verschiedene Dinge mit Frontend-Technologie auszuprobieren. Impress kann unsere Präsentationen innovativer machen, daher lohnt es sich auf jeden Fall, ein grundlegendes Verständnis davon zu haben. Lernen ist die beste Investition.
Vorteil :
Mir gefällt die Übersichtsfunktion sehr gut, weil ich HTML+CSS selbst fertigstellen und Position und Effekte selbst verwalten muss. Ich habe die Kontrolle über die visuellen Effekte. Der visuelle Effekt ist der großartigste unter den ähnlichen Produkten, die ich verwendet habe, mit CSS3+3D-Effekten, die das Publikum direkt schwindelig machen :)
Manko :
Impress ist in der Tat sehr leistungsfähig im visuellen Ausdruck. Im Vergleich zu HTML5Slides und Deck.js, die auch für Präsentationen verwendet werden, ist Impress.js viel komplexer und es kann viel Zeit in Anspruch nehmen, bis das Präsentationslayout gut aussieht.
*Wenn Sie Probleme mit Impress haben, können Sie sich die Informationen zu html5slides und deck.js ansehen. Der visuelle Effekt wird etwas schlechter sein, aber der Einstieg wird viel einfacher sein.
Verwenden Sie 3D und Rotation nicht zu ausgefallen oder zu grell, sonst wird den Leuten schwindelig. Verwenden Sie es einfach angemessen.

Nachfolgend sehen Sie den Demo-Code. Anfänger können ihn selbst ändern, um ein Gefühl dafür zu bekommen.

Code kopieren
Der Code lautet wie folgt:

<!doctype html>
<html>
<Kopf>
<title>Darren – Impress-Demo</title>
<meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">
<link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" />
</Kopf>
<Text>
<div Klasse="Impressum nicht unterstützt">
<div Klasse="Fallback-Nachricht">
<p>Ihr Browser <b>unterstützt</b> impress.js nicht, daher wird derzeit eine vereinfachte Version angezeigt. </p>
<p>Für ein besseres Erlebnis verwenden Sie bitte den neuesten <b>Chrome</b>-, <b>Safari</b>- oder <b>Firefox</b>-Browser. </p>
</div>
</div>
<div id="beeindrucken">
<div Klasse="Schritt" data-x="0" data-y="0">
Darren-Code – [Titel]
</div>
<div Klasse="Schritt" data-x="500" data-y="0">
Dies ist Folie 2
</div>
<div Klasse="Schritt" data-x="500" data-y="-400">
Dies ist Folie 3
</div>
<div Klasse="Schritt" data-x="500" data-y="-800" data-scale="0,5">
Dies ist Folie 4
</div>
<div Klasse="Schritt" data-x="0" data-y="-800" data-rotate="90">
Dies ist Folie 5
</div>
<div Klasse="Schritt" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">
Dies ist Folie 6
</div>
<!-- Darren-Code -->
<div id="Übersicht" Klasse="Schritt" data-x="-200" data-y="-500" data-scale="3"></div>
</div>
<script src="http://bartaz.github.com/impress.js/js/impress.js"></script>
<script>beeindrucken().init();</script>
</body>
</html>

Plötzlich fiel mir ein zusammenfassender Satz aus dem Artikel ein: „Wenn man einen Hammer hat, sieht alles aus wie ein Nagel.“
Wenn Sie meinen, dass dieser Artikel gut geschrieben ist, klicken Sie bitte auf die Empfehlungsschaltfläche in der unteren rechten Ecke.
Heute ist der 4.1.2013, ein unglaublicher Tag. Ich bin gespannt, wie viele Leute sich heute anmelden werden. Ich beneide euch und wünsche euch alles Gute. Ich werde auch härter arbeiten, hoho
Ich wünsche Ihnen allen ein frohes und erfolgreiches Jahr 2013.

<<:  HTML-Endtag-Problem und W3C-Standard

>>:  Eine kurze Diskussion über den JavaScript-Bereich

Artikel empfehlen

Vue implementiert dynamische Routingdetails

Inhaltsverzeichnis 1. Frontend-Steuerung 1. In de...

Der praktische Prozess des Login-Status-Managements im vuex-Projekt

Inhaltsverzeichnis Werkzeug: Anmeldeszenario: übe...

Lösung für das Problem, dass der Docker-Container nicht auf Jupyter zugreifen kann

In diesem Projekt wird der Docker-Container zum E...

So verwenden Sie Docker-Compose zum Erstellen eines ELK-Clusters

Auf alle Orchestrierungsdateien und Konfiguration...

Eine kurze Erläuterung zur Verwendung des kartesischen Produktprinzips zum Abfragen mehrerer Tabellen in MySQL

MySQL-Mehrtabellenabfrage (kartesisches Produktpr...

Diagramm des Tutorials zur schnellen Installation und Konfiguration des Linux-Systems MySQL8.0.19

Inhaltsverzeichnis 1. Umgebung Einführung 2. Inst...

JavaScript-Verlaufsobjekt erklärt

Inhaltsverzeichnis 1. Routennavigation 2. API zur...

Zusammenfassung der Methoden zum Einbinden von Dateiinhalten in HTML-Dateien

Im Forum fragen Internetnutzer oft: „Kann ich den...

Detaillierte Erklärung der Rahmen- und Regelattribute der Tabelle in HTML

Die Rahmen- und Regelattribute des Tabellentags k...

Zusammenfassung mehrerer Haltungen, die bei der Linux-Kompilierungsoptimierung beherrscht werden müssen

01. Kompilierungsoptionen und Kernelkompilierung ...

Detaillierte Erläuterung verschiedener Möglichkeiten zum Exportieren von Daten in Mysql

Es gibt viele Gründe für den Export von MySQL-Dat...

mysql-5.7.21-winx64 kostenlose Installationsversion Installation - Windows-Tutorial detaillierte Erklärung

1 Herunterladen Die Adresse lautet: https://dev.m...

Implementierung der Graustufenversion mit Nginx und Lua

Installieren Sie memcached yum install -y memcach...

Installieren und konfigurieren Sie SSH in CentOS7

1. Installieren Sie openssh-server yum install -y...

Beispielcode zur Implementierung einer Sternenhimmelanimation mit CSS3 Advanced LESS

In diesem Artikel wird der Beispielcode für erwei...