Wie man ein Quadrat macht, das herausspringt: Schritt für Schritt Anleitung

Wie erstelle ich ein springendes Quadrat

Schritt 1: Erstellen Sie einen Container für das Quadrat

Erstellen Sie zunächst ein HTML-Element, das das Quadrat enthält. Sie können beispielsweise ein Element mit einer eindeutigen ID verwenden.

Schritt 2: Stylen Sie den Behälter

Fügen Sie dem Container Stile hinzu, damit er eine bestimmte Höhe, Breite und Hintergrundfarbe hat. Zum Beispiel:

Ein Beispiel:

Schritt 3: Fügen Sie dem Behälter ein Quadrat hinzu

Fügen Sie im Container ein Element hinzu, das ein Quadrat darstellt. Zum Beispiel können Sie das Element oder verwenden.

Ein Beispiel:

Schritt 4: Animiere die Bewegung des Quadrats

Verwenden Sie CSS oder JavaScript, um das Quadrat zum Springen zu machen. Sie können beispielsweise CSS-Animationen mit Keyframes verwenden.

Beispiel (CSS):

animation: sprung 1c unendlich;

Jetzt hast du ein springendes Quadrat! Sie können Stile und Animationen nach Belieben ändern, um einzigartige Effekte zu erzeugen.

Schritt 1: Installieren der Umgebung

Schritt 1: Sie müssen mehrere Programme und Pakete installieren, um ein animiertes Quadrat zu erstellen.

Probieren Sie die folgenden Anweisungen aus:

1. Installieren Sie einen Texteditor: Zum Erstellen und Bearbeiten von HTML-Code benötigen Sie einen Texteditor. Sie können einen der gängigen Editoren verwenden, z. B. Sublime Text, Visual Studio Code oder Atom.

2. Installieren Sie den Browser: Sie benötigen einen Browser, um Ihr animiertes Quadrat anzuzeigen. Es wird empfohlen, die neueste Version von Google Chrome oder Mozilla Firefox zu verwenden.

3. Installiere Node.js: Node.js ist eine JavaScript-Laufzeitumgebung, mit der Sie JavaScript-Code auf Ihrem Computer ausführen können. Sie können Node herunterladen und installieren.js von der offiziellen Website nodejs.org .

4. Installieren Sie das Gulp-Paket: Schluck ist ein Werkzeug zur Automatisierung von Aufgaben. Sie können es installieren, indem Sie den Befehl npm install gulp-cli -g ausführen.

5. Erstellen Sie ein neues Verzeichnis für das Projekt: Wählen Sie einen Speicherort auf Ihrem Computer aus und erstellen Sie einen neuen Ordner zum Speichern aller mit dem Projekt verknüpften Dateien.

6. Erstellen Sie eine package-Datei.json: Öffnen Sie in Ihrem neuen Ordner ein Terminal oder eine Eingabeaufforderung und führen Sie den Befehl npm init aus. Dadurch wird eine Package-Datei erstellt.json, der die Abhängigkeiten Ihres Projekts enthält.

7. Installieren Sie die erforderlichen Pakete: Geben Sie den Befehl npm install gulp browser-sync gulp-sass im Terminal oder in der Befehlszeile ein. Dadurch werden alle erforderlichen Pakete für die Arbeit mit Schluck und Sass installiert.

8. Erstellen Sie HTML- und CSS-Dateien: Erstellen Sie in Ihrem Projektordner Index-Dateien.html und styles.scss. In der Datei index.html Sie können die Struktur Ihres Quadrats auch in der styles-Datei schreiben.scss Sie können Stile speichern.

Jetzt sind Sie bereit, mit dem nächsten Schritt fortzufahren und mit der Erstellung eines animierten Quadrats zu beginnen.

Schritt 2: Erstellen der Grundlage

Erstellen Sie zunächst eine neue HTML-Datei mit einem beliebigen Texteditor.

Sie benötigen einen Behälter für Ihr Quadrat. Verwenden Sie dazu das div-Element und geben Sie ihm eine eindeutige ID ein, z. B. "box". Es wird so aussehen:

Fügen Sie nun CSS-Stile zu Ihrem Container hinzu. Legen Sie die folgenden Eigenschaften in einer CSS-Datei oder innerhalb eines Tags fest:

width: 100px;

height: 100px;

background-color: blue;

position: relative;

Diese Stile legen die Größe und Farbe des Quadrats sowie die Position des Quadrats relativ zu anderen Elementen auf der Seite fest.

Glückwunsch! Sie haben die Grundlage für Ihr Quadrat geschaffen, das herausspringt.

Schritt 3: Starten Sie die Animation

Jetzt, da wir unser Quadrat haben und seine Startposition und Größe definiert haben, ist es an der Zeit, mit der Animation zu beginnen. Dazu verwenden wir die CSS-Eigenschaft transition, die es uns ermöglicht, glatte Übergänge zwischen den Zuständen eines Elements zu erstellen.

Zunächst müssen wir die CSS-Eigenschaft festlegen transition für unser Quadrat. In unserem Fall möchten wir die Änderung der Eigenschaft animieren top Gibt den Abstand vom oberen Rand des Containers zum oberen Rand des Elements an. Wir möchten auch die Änderung der Eigenschaft animieren left gibt den Abstand vom linken Rand des Containers zum linken Rand des Elements an.

Wir können den Eigenschaftswert festlegen transition verwenden Sie einen reduzierten Eintrag, indem Sie die Eigenschaften angeben, die wir animieren möchten, die Dauer der Animation und die Fließfähigkeit des Übergangs:

transition: top 1s ease, left 1s ease;

In diesem Beispiel dauert die Animation 1 Sekunde und hat einen fließenden ease-Übergang, was bedeutet, dass sich der Wert der Eigenschaft stufenlos ändert.

Nun, da wir die Übergangseigenschaft festgelegt haben, beginnen wir mit der Änderung der Position unseres Quadrats. Dazu verwenden wir JavaScript, um dem Quadrat eine Klasse hinzuzufügen, die neue Eigenschaftswerte setzt top und left.

Schritt 4: Interaktivität hinzufügen

Damit unser Quadrat auf einen Klick springen kann, müssen wir Interaktivität mit JavaScript hinzufügen. Erstellen Sie eine Funktion jump(), die die Position des Quadrats jedes Mal ändert, wenn Sie darauf klicken.

Beginnen wir damit, eine Funktion zu definieren und über ihre ID auf das Quadratelement zuzugreifen. Fügen Sie ein onclick-Klickereignis hinzu und rufen Sie die Funktion jump() auf :

function jump() square.onclick = jump;

Jetzt können wir innerhalb der Funktion jump() die Position des Quadrats ändern. Dazu verwenden wir die style-Eigenschaft und setzen neue Werte für top und left :

function jump()

Jedes Mal, wenn Sie auf ein Quadrat klicken, ändert sich seine Position nach dem Zufallsprinzip zwischen 300px horizontal und vertikal.

Das ist alles! Jetzt ist das Quadrat bereit, auf jeden Klick zu springen. Speichern Sie die Änderungen in der HTML-Datei und öffnen Sie sie in einem Browser, um das Ergebnis zu sehen!