Mass Visualization

Mass Visualization Component

diese Komponente weißt einen sich wiederholenden Hintergrund auf, um Massen zu visualisieren. Ein kleiner Textblock gibt eine Info zum Inhalt.

Aufbau

Damit die Komponente wiederverwendet werden kann, sind folgende Variablen anpassbar:

• Die Hintergrundfarben des Farbverlaufs backgroundColor: string
• Das sich wiederholende Hintergrundbild massImage: string
• Eine Headline des Textblocks headlineText: string
• Ein Text für den Textblock text: string

Verwendung

Die Komponte kann wie folgt wiederverwendet werden. In der entsprechenden .ts Datei wird die Komponente mit der createWith() Methode und den oben genannten Übergabeparametern erstellt:

let massVisualizationPig = MassVisualization.createWith(
      'assets/images/mass-visualization/massvisualize_pig.png',
      'rgba(105, 64, 37, 1), rgba(170, 97, 139, 1)',
      '46 Schweine',
      'isst ein Mensch \n in seinem Leben',
);
this.massVisualization.push(massVisualizationPig);

In der .html Datei kann sie wie im unten stehenden Beispiel an gewünschter Stelle eingefügt werden:

<app-mass-visualization [massVisualizations]="massVisualization"></app-mass-visualization>

Hinweise

Im weiteren Verlauf soll die Textbox ebenfalls über Parallax Scrolling animiert werden. Außerdem ist diese Komponente für die Wiedergabe einer Audio-Sequenz gedacht.