The artwork is the residue of a process, of a project, rather than something that you see and then have to realize thereafter.

David Shrigley (Künstler), 2016

T H E O R I E

Projekt Ziel

Jede:r Studierende wird eine eigene kleine Archiv-Website umsetzen. Diese soll gestalterisch, semantisch und interaktiv weiterentwickelt und bis zum Semesterende (1.7.) fertiggestellt werden.

Projekt Umfang

🏠 Start
📋 Übersicht
🪄 Filter
🗜️ Responsive
🧃 Objekt
oder
🎈 Overlay

Projekt Setup

Diese Ordnung kann als Ausgangspunkt für die Website herangezogen werden.

📂 vorname-sammlung
  📂 fonts
    📦 beispiel-regular.woff2
  📁 media
    🖼️ beispiel-grafik.png
    📹 beispiel-video.mp4
  📂 objekte
    🧃 beispiel.html (Detailseite)
  📂 scripts
    🪩 vorname.js
  📂 styles
    🎨 vorname.css
  🏠 index.html (Startseite)

Ordnerstruktur

P R A X I S

Projekt anlegen

Ordner „javascript-5“ kopieren, in „javascript-6“ umbenennen und in VS Code öffnen
Datei „index.html“ im Chrome-Browser öffnen

Dropdown

Ein Overlay, das auf- und zugeklappt werden kann.

<div id="overlay">
  <button id="overlay-button">🦐</button>
  <p id="overlay-content" class="hidden">Diese Nachricht ist sichtbar oder versteck.</p>
</div>

HTML

#overlay {
  position: fixed;
  top: 30px;
  left: 20px;
  z-index: 2;
  padding: 10px;
  color: lime;
  background-color: indigo;
}

.hidden {
  display: none;
}

CSS

Den Inhalt vom Overlay beim Klicken sichtbar machen oder verstecken.

<div id="overlay">
  <button id="overlay-button">🦐</button>
  <p id="overlay-content" class="hidden">Diese Nachricht ist sichtbar oder versteck.</p>
</div>

HTML

var buttonOverlay = document.getElementById("overlay-button");
var overlayContent = document.getElementById("overlay-content");

function overlay() {
  overlayContent.classList.toggle("hidden");
}

buttonOverlay.onclick = overlay;

Das Button-Icon beim Klicken abhängig vom Zustand (sichtbar oder versteckt) verändern.

<div id="overlay">
  <button id="overlay-button">🦐</button>
  <p id="overlay-content" class="hidden">Diese Nachricht ist sichtbar oder versteck.</p>
</div>

HTML


function overlay() {
  overlayContent.classList.toggle("hidden");

  if(overlayContent.classList.contains("hidden")) {
    buttonOverlay.textContent = "🦐";
  } else {
    buttonOverlay.textContent = "🍤";
  }
}

Sounds

Audiofiles abspielen und pausieren.

<div id="box">🔊</div>
<audio id="audio1" src="media/beispiel-audio.mp3" controls>🥵 Oje</audio>

HTML

#box {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2;
  font-size: 50px;
}
              
audio {
  display: none;
}

CSS

var buttonBox = document.getElementById("box");
var audioFile = document.getElementById("audio1");

function audio(sound) {
  console.log(sound);

  if(sound.paused) {
    sound.play();
  } else {
    sound.pause();
  }
}

buttonBox.onclick = () => audio(audioFile);

Animation

Die Veränderung von Elementen unabhängig von Interaktionen animieren.

<div id="intro">
  <p>Loading …</p>
</div>

HTML

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

#intro {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 100;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  color: floralwhite;
  background-color: cornflowerblue;

  animation-name: fadeOut;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;

  animation: fadeOut 1s 2s forwards; // Kurze Schreibweise
}

CSS

Mauszeiger

Das Aussehen vom Cursor anpassen.

* {
  cursor: pointer;
  cursor: help;
  cursor: zoom-in;

  cursor: url("../media/cursor.png") 16 16, auto; // 32x32px
}

CSS

Den Cursor durch ein komplexeres Element ergänzen oder ersetzen.

<div id="cursor">🐝</div>

HTML

* {
  cursor: none;
}

#cursor {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  user-select: none;
}

CSS

var cursorIcon = document.getElementById("cursor");

function cursor(event) {
  console.log("x:", event.clientX, "y:", event.clientY);

  cursorIcon.style.left = event.clientX;
  cursorIcon.style.top = event.clientY;
}

window.onmousemove = cursor;

Projekt Abgabe

Die fertige Archiv-Website muss bis zum Semesterende (01.07.2025) als ein verpackter Ordner mit maximal 200MB inklusive aller relevanten Dateien (HTML, CSS, JS, Medien, Fonts, …) per Teams DM abgegeben werden.

📂 → 🗜️ → 🎁 → 💬 → ✅