Zufällig generierte Landschaften mit parallaxem Scrolling

Ich habe schon öfter parallax-scrollende Landschaften auf Websiten gesehen und fand den Effekt immer sehr beeindruckend.
Daher dachte ich mit Hilfe von Perlin-Noise könnte man doch bestimmt solche Landschaften relativ einfach zufällig generieren.

Mit dem Ergebnis mit ich recht zufrieden, mit den Werten für die Höhen der Berge kann man natürlich auch herumspielen.
(Am besten einfach bei Codepen forken https://codepen.io/Grilly86/pen/brdBjO/)

Ich möchte eventuell auch noch einen SVG-Export hinzubauen, damit sich die generierten Landschaften auch performant auf seinen Websites einbauen lassen. Derzeit mit p5.js wird mit jedem Frame die gesamte Landschaft neu gezeichnet.

Veröffentlicht in Javascript, p5.js

SVG: das flexibelste Bildformat

Inline-SVGs sind wohl die flexibelste Möglichkeit, grafische Elemente aller Art in eine Website einzubinden. Dabei wird der Code direkt als<svg> Element in das HTML eingebettet. Dadurch lassen sich sogar mit Javascript und CSS einzelne Elemente (zB <g> oder <path>) ansteuern und manipulieren.

Ich habe ein paar Beispiele zusammengestellt.

Animationen mit SVG

Die SVG (Skalierbare Vektor-Grafik) besteht hier aus einem einzelnen <path> mit animiertem Farb-Verlauf als stroke-Attribut direkt als SVG-Animation. Das d-Attribut, das den Weg des Pfades beschreibt, wird dann erst mit Javascript eingefügt und dadurch in Schwingung gebracht. Mittels requestAnimationFrame-Schleife wird das Attribut mit jedem Frame neu gesetzt.

Charakter-Animation mit SVG

Bei diesem Beispiel habe ich zuerst mit dem kostenlosen Open Source Vektor-Programm Inkscape eine Grafik erstellt.

Bereits in Inkscape habe ich zwei Ebenen erstellt für das verschiedene Aussehen der Augen und Augenbrauen. Das abgespeicherte SVG habe ich dann manuell noch etwas bereinigt und ins HTML eingefügt.

Die eigentliche Animation erfolgt dann rein durch CSS. Mit der :hover-Pseudo-Klasse werden die benannten Ebenen dann  ein- und ausgeblendet.

Bei diesem Beispiel ging es mir eher um ein Proof-Of-Concept als um umfassende Charakter-Erstellung, daher ist die Grafik eher simpel gehalten.

Layout mit SVG

Der wohl praktischste Nutzen von SVGs für Websiten sind allgemeine Layout-Elemente. Kurvige oder abgeschrägte Layouts waren früher nur mit Hintergrund-Grafiken lösbar. Mit SVG sind solche Elemente jetzt problemlos umsetzbar.

Durch die Flexibilität sind auch Media-Queries möglich. Damit kann die Grafik vollständig von den Eigenschaften des Anzeigegerätes abhängig gemacht werden.

Veröffentlicht in CSS, Javascript

Perspektive ändern beim Scrollen

Ich wollte einen Effekt erzielen, wo beim Scrollen sich die Perspektive ändern. Dafür muss man nur beim body die CSS-Eigenschaft perspective setzen und sicherstellen, dass auch in njedem Browser innerhalb des body
Elementes gescrollt wird.

Umsetzung

Folgender Code ist dafür verantwortlich:

html, body {
 width: 100%;
 height: 100%;
 overflow: hidden;
 
}
body {
 overflow: auto;
 perspective: 500px;
}

Den vollständigen Code kann man sich bei Codepen ansehen.

Veröffentlicht in CSS, UI, Web

Ein HTML Synthesizer mithilfe von Audiolet.js

Ein rudimentärer Versuch einen Javascript-Audio-Synthesizer zu erstellen. Es handelt sich noch um eine recht frühe Version, die ich gerne noch um einige Funktionen erweitern möchte, damit daraus irgendwann vielleicht mal ein „vollwertiger“ Synthesizer entsteht.

Veröffentlicht in Javascript, Musik
Mit der Verwendung dieser Website stimmen Sie zu, dass personalisierbare Cookies für Analysezwecke gespeichert werden.