Charakterkarte: Morrigan die JavaScript-Magierin

Ordne Schriftrollen

Dein erster Tag im Praktikum

Ah, mein mutiger Lehrling, wenn du dies liest, bist du bereit, dich in die Tiefen der JavaScript-Magie zu wagen. Hier habe ich eine Auswahl besonders geschätzter Zauberformeln für dich gesammelt, die ich einst auf den uralten W3-Schriftrollen entdeckte. Doch sei gewarnt! Sind die Schriftrollen unachtsam eingebunden, wird dein Projekt rasch an einen missglückten Verwandlungszauber erinnern.

Damit das nicht passiert, liegt dir ein Beispiel bei: eine Navigation, die sich geschmeidig jeder Bildschirmgröße anpasst. Deine Aufgabe ist es nun, die verstreuten Schriftrollen neu zu ordnen und in einem übersichtlichen Verzeichnis abzulegen. Folge den Anweisungen genau, und mit jeder Zeile entdeckst du ein Geheimnis mehr – bis sich die wahre Macht des Codes vor dir entfaltet.
Deine Morrigan

Los geht’s

JavaScripte einbinden
Responsives Menü
Overlay Nav
Slideshow
Slideshow mit Text
Bildergalerie
Lightbox

Modal
Audio-Player
Accordion
Tab-Menü
Lettering
Countdown
Maus-Animation

Der Funke für Interaktivität

So erwacht deine Seite zum Leben!

JavaScripte einbinden

Schritt-für-Schritt-Anleitung

1. Erstelle einen Ordner für dein Projekt

Lege einen neuen Ordner mit einem klangvollen Namen an. Öffne diesen Ordner in Visual Studio Code, indem du auf Datei > Ordner öffnen klickst und deinen neu angelegten Ordner auswählst.

2. Lege die HTML-Schriftrolle an

Erstelle eine Datei mit dem Namen index.html, indem du im Projektordner mit einem rechten Mausklick Neue Datei auswählst. Kopiere die folgenden HTML-Codes hinein und achte auf das Einfügen des CSS- und JavaScript-Pfads im <head>- und <script>-Bereich.

Lege die CSS-Schriftrolle an

Kreiere eine neue Datei mit dem Namen style.css im selben Ordner. Diese Schriftrolle gestaltet das Aussehen der Scripte – die Farben, Abstände und die Flexibilität. Kopiere den folgenden CSS-Code und speichere die Datei.

Responsives Menü

Perfekter Übergang von großen zu kleinen Monitoren

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <!-- Verlinkung zu Font Awesome für die magischen Symbole -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- Verlinkung zum magischen Gewand (CSS-Datei) -->
</head>

<body>
    <!-- Das sagenumwobene Navigationsmenü -->
    <div class="topnav">
        <!-- Der geheimnisvolle Schriftzug -->
        <a href="#home" class="brand-title">Aetheron Emporium</a>

        <!-- Der eigentliche Schatz: die Links! -->
        <div class="topnav-links" id="topnavLinks">
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
        </div>

        <!-- Das magische Menü-Symbol, das die Dinge bewegt -->
        <a href="javascript:void(0);" class="icon" onclick="toggleMenu()">
            <i class="fas fa-bars"></i>
        </a>
    </div>

    <!-- Der Verweis auf das Zauberbuch (JavaScript) -->
</body>

</html>

CSS

/* Zauber für alles: Entfernt unerwünschte Ränder und Abstände */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

body {
    font-size: 16px;
}

/* Die prachtvolle Hülle der Navigation */
.topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #333;
    padding: 1rem;
}

/* Der mystische Schriftzug an der Spitze */
.brand-title {
    color: #f0e68c;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
}

/* Farben für Links, damit sie leuchten und strahlen */
.topnav a {
    color: #f2f2f2;
    text-decoration: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.topnav a:hover {
    background-color: #575757;
}

/* Das geheime Symbol bleibt zunächst unsichtbar */
.topnav .icon {
    display: none;
    color: #f2f2f2;
    font-size: 1.5rem;
}

/* Die linke Seite der Navigation */
.topnav-links {
    display: flex;
    gap: 1rem;
}

/* Wenn der Bildschirm schrumpft: Das Layout passt sich magisch an */
@media screen and (max-width: 600px) {
    .topnav-links {
        display: none;
        /* Links verstecken sich gekonnt */
        flex-direction: column;
        width: 100%;
        background-color: #333;
        position: absolute;
        top: 60px;
        left: 0;
    }

    /* Wenn 'responsive' beschworen wird, zeigt sich das Menü */
    .topnav-links.responsive {
        display: flex;
    }

    /* Das Symbol erscheint nun ganz groß und leuchtend */
    .topnav .icon {
        display: block;
    }
}

JavaScript

// Funktion, die den Menüzauber entfesselt
function toggleMenu() {
    // Hol das Menüelement aus seiner Tarnung
    const navLinks = document.getElementById('topnavLinks');

    // Toggle der Klasse 'responsive', damit es sich zeigt oder versteckt
    navLinks.classList.toggle('responsive');
}

Overlay Nav

Immer wieder eine der schönsten Navigationen

HTML

<!-- Button zum Öffnen der Navigation -->
<button id="openNav" class="open-btn">☰ Open Navigation</button>

<!-- Fullscreen-Overlay-Navigation -->
<div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtn">×</a>
    <div class="overlay-content">
        <a href="#" class="closeNav">Home</a>
        <a href="#" class="closeNav">Services</a>
        <a href="#" class="closeNav">About</a>
        <a href="#" class="closeNav">Contact</a>
    </div>
</div>

CSS

/* Die Navigation deckt den gesamten Bildschirm in der Breite ab, startet aber bei der Breite von 0 */
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
    transition: width 0.5s ease;
}

/* Der Overlay-Inhalt bleibt zentriert */
.overlay-content {
    position: relative;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
}

.overlay-content a {
    padding: 15px;
    text-decoration: none;
    font-size: 30px;
    color: white;
    display: block;
    transition: color 0.3s;
}

.overlay-content a:hover {
    color: coral;
}

/* Schließen-Button */
.closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    color: white;
    text-decoration: none;
}

/* Der Button zum Öffnen */
.open-btn {
    font-size: 20px;
    padding: 10px 20px;
    background-color: coral;
    color: white;
    border: none;
    cursor: pointer;
}

JavaScript

// Öffne die Navigation
document.getElementById('openNav').addEventListener('click', () => {
    //document.getElementById('myNav').style.height = '100%';
    document.getElementById('myNav').style.width = '100%';
});

// Schließe die Navigation bei Klick auf einen Link oder den Schließen-Button
const closeNavElements = document.querySelectorAll('.closeNav, .closebtn');
closeNavElements.forEach(element => {
    element.addEventListener('click', () => {
        //document.getElementById('myNav').style.height = '0%';
        document.getElementById('myNav').style.width = '0%';
    });
});

Slideshow

Lass deine Bilder laufen

HTML

<div class="slideshow-container">
    <!-- Slide 1 -->
    <div class="slide fade">
        <img src="assets/img/news/caelan.jpg" style="width:100%" alt="Slide 1">
    </div>
    <!-- Slide 2 -->
    <div class="slide fade">
        <img src="assets/img/news/fungus.jpg" style="width:100%" alt="Slide 2">
    </div>
    <!-- Slide 3 -->
    <div class="slide fade">
        <img src="assets/img/news/sonya.jpg" style="width:100%" alt="Slide 3">
    </div>

    <!-- Navigation Pfeile -->
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>
</div>

<!-- Dots -->
<div class="dot-container">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
</div>

CSS

* {
    box-sizing: border-box;
}

.slideshow-container {
    position: relative;
    margin: auto;
    max-width: 800px;
}

/* Jeder Slide */
.slide {
    display: none;
    position: relative;
    width: 100%;
}

/* Fade-Effekt */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}

/* Navigation Pfeile */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.5);
}

.next {
    right: 0;
}

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Dots (Navigationspunkte) */
.dot-container {
    text-align: center;
    padding: 20px;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 4px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #717171;
}

JavaScript

let slideIndex = 0;
const slides = document.getElementsByClassName("slide");
const dots = document.getElementsByClassName("dot");

// Zeigt den aktuellen Slide an
function showSlide(n) {
    if (n >= slides.length) { slideIndex = 0; }
    if (n < 0) { slideIndex = slides.length - 1; }
    // Alle Slides ausblenden
    for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    // Dots zurücksetzen
    for (let i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex].style.display = "block";
    dots[slideIndex].className += " active";
}

// Manuelles Navigieren (Pfeile)
function plusSlides(n) {
    slideIndex += n;
    showSlide(slideIndex);
}

// Direkter Sprung zu einem bestimmten Slide (Dots)
function currentSlide(n) {
    slideIndex = n - 1;
    showSlide(slideIndex);
}

// Automatischer Slideshow-Wechsel
function autoSlide() {
    slideIndex++;
    if (slideIndex >= slides.length) { slideIndex = 0; }
    showSlide(slideIndex);
    setTimeout(autoSlide, 5000); // Wechselt alle 5 Sekunden
}

// Initialer Aufruf
showSlide(slideIndex);
setTimeout(autoSlide, 5000);

Slideshow mit Text

Beschrifte deine Laufbilder

HTML

<div class="slideshow-container">
    <!-- Slide 1 -->
    <div class="slide fade">
        <img src="assets/img/world/greenwood-hollow.jpg" alt="Slide 1">
        <div class="slide-text">
            <h2>Headline 1</h2>
            <p>Dies ist die Subline zu Slide 1.</p>
        </div>
    </div>

    <!-- Slide 2 -->
    <div class="slide fade">
        <img src="assets/img/world/skyterranova.jpg" alt="Slide 2">
        <div class="slide-text">
            <h2>Headline 2</h2>
            <p>Hier steht die Subline zu Slide 2.</p>
        </div>
    </div>

    <!-- Slide 3 -->
    <div class="slide fade">
        <img src="assets/img/world/sunnyside-fields.jpg" alt="Slide 3">
        <div class="slide-text">
            <h2>Headline 3</h2>
            <p>Subline zu Slide 3 - weitere Informationen.</p>
        </div>
    </div>

    <!-- Navigationspfeile -->
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>

    <!-- Dots -->
    <div class="dot-container">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
    </div>
</div>

CSS

/* Container für die gesamte Slideshow */
.slideshow-container {
    position: relative;
    margin: auto;
    max-width: 1000px;
    overflow: hidden;
}

/* Jeder Slide */
.slide {
    display: none;
    position: relative;
}

/* Bild-Styling */
.slide img {
    width: 100%;
    vertical-align: middle;
}

/* Text-Overlay */
.slide-text {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    /* Halbtransparenter Hintergrund */
    padding: 20px;
    border-radius: 10px;
}

.slide-text h2 {
    font-size: 2.5em;
    margin: 0;
}

.slide-text p {
    font-size: 1.2em;
    margin-top: 10px;
}

/* Fade-Effekt */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}

/* Navigationspfeile */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.5);
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Dots zur Navigation */
.dot-container {
    text-align: center;
    position: absolute;
    bottom: 10px;
    width: 100%;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #717171;
}

JavaScript

let slideIndex = 0;
const slides = document.getElementsByClassName("slide");
const dots = document.getElementsByClassName("dot");

// Zeige den aktuellen Slide und aktualisiere die Dots
function showSlide(n) {
    if (n >= slides.length) { slideIndex = 0; }
    if (n < 0) { slideIndex = slides.length - 1; }
    for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (let i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex].style.display = "block";
    dots[slideIndex].className += " active";
}

// Automatischer Slide-Wechsel
function autoSlide() {
    slideIndex++;
    if (slideIndex >= slides.length) { slideIndex = 0; }
    showSlide(slideIndex);
    setTimeout(autoSlide, 5000); // Wechselt alle 5 Sekunden
}

// Manuelle Navigation über Pfeile
function plusSlides(n) {
    slideIndex += n;
    showSlide(slideIndex);
}

// Direkt zum gewünschten Slide springen (Dots)
function currentSlide(n) {
    slideIndex = n - 1;
    showSlide(slideIndex);
}

// Initialer Aufruf
showSlide(slideIndex);
setTimeout(autoSlide, 5000);

Bildergalerie

Für dein Reisetagebuch

HTML

<h1>Bildergalerie</h1>

<div class="gallery">
    <img src="assets/img/future/communication.jpg" alt="Das ist Bild 1" title="Titel Bild 1">
    <img src="assets/img/enemies/umbra.jpg" alt="Das ist Bild 2" title="Titel Bild 2">
    <img src="assets/img/heroes/gart.jpg" alt="Das ist Bild 3" title="Titel Bild 3">
    <img src="assets/img/news/fungus.jpg" alt="Das ist Bild 4" title="Titel Bild 4">
    <img src="assets/img/news/sonya.jpg" alt="Das ist Bild 5" title="Titel Bild 5">
    <img src="assets/img/heroes/seraphina.jpg" alt="Das ist Bild 6" title="Titel Bild 6">
    <img src="assets/img/future/new-ironspire.jpg" alt="Das ist Bild 7" title="Titel Bild 7">
    <img src="assets/img/news/gingerbread.jpg" alt="Das ist Bild 8" title="Titel Bild 8">
    <!-- Weitere Bilder können hier hinzugefügt werden -->
</div>

<!-- Overlay Lightbox -->
<div class="overlay" id="overlay">
    <span class="close-button" onclick="closeOverlay()">×</span>
    <div class="overlay-content">
        <img id="overlay-image" src="" alt="">
        <div class="overlay-text">
            <h2 id="overlay-title"></h2>
            <p id="overlay-alt"></p>
        </div>
    </div>
</div>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f4f4f4;
}

h1 {
    text-align: center;
    padding: 20px 0;
}

/* Masonry Galerie */
.gallery {
    column-count: 3;
    column-gap: 1em;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1em;
}

.gallery img {
    width: 100%;
    margin-bottom: 1em;
    display: inline-block;
    cursor: pointer;
    border-radius: 5px;
    transition: transform 0.3s;
}

.gallery img:hover {
    transform: scale(1.05);
}

/* Overlay Modal */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.overlay-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    text-align: center;
}

.overlay-content img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 5px;
}

.overlay-text {
    color: #fff;
    margin-top: 10px;
}

.overlay-text h2 {
    margin: 10px 0 5px;
    font-size: 24px;
}

.overlay-text p {
    margin: 0;
    font-size: 16px;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
}

@media (max-width: 768px) {
    .gallery {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .gallery {
        column-count: 1;
    }
}

JavaScript

// Event Listener für alle Bilder in der Galerie
const galleryImages = document.querySelectorAll('.gallery img');
galleryImages.forEach(img => {
    img.addEventListener('click', function () {
        openOverlay(this);
    });
});

function openOverlay(img) {
    // Setze Bildquelle, Alt-Text und Titel im Overlay
    document.getElementById('overlay-image').src = img.src;
    document.getElementById('overlay-image').alt = img.alt;
    document.getElementById('overlay-title').textContent = img.title;
    document.getElementById('overlay-alt').textContent = img.alt;
    document.getElementById('overlay').style.display = 'flex';
}

function closeOverlay() {
    document.getElementById('overlay').style.display = 'none';
}

// Schließe das Overlay, wenn außerhalb des Inhalts geklickt wird
document.getElementById('overlay').addEventListener('click', function (e) {
    if (e.target === this) {
        closeOverlay();
    }
});

Lightbox

Damit jeder deine Bilder groß sehen kann

HTML

<!-- HTML -->
<div class="container">
    <div>
        <img src="assets/img/future/communication.jpg" alt="" class="img-gallery img">
    </div>
    <div>
        <img src="assets/img/future/conversion.jpg" alt="" class="img-gallery img">
    </div>
    <div>
        <video src="assets/media/mushroom-forest.mp4" loop autoplay muted class="img-gallery img"></video>
    </div>
</div>

<!-- Lightbox Overlay -->
<div class="overlay-gallery" id="lightboxOverlay">
    <span class="close-btn" id="closeBtn">×</span>
    <!-- Large Image -->
    <img id="lightboxImage" alt="Enlarged view" style="display: none;">
    <!-- Large Video -->
    <video id="lightboxVideo" controls style="display: none;"></video>
</div>

CSS

.container {
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.container>div {
    flex: 1 1 15rem;
}

.img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}

/* Lightbox */
/* Das Overlay verdeckt den gesamten Bildschirm */
.overlay-gallery {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    /* Start: unsichtbar */
    justify-content: center;
    align-items: center;
    background-color: #0000007d;
    /* Dunkles Overlay */
    z-index: 9999;
}

/* Der Schließen-Button (X) */
.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
}

/* Max-Größe des eingebetteten Bildes/ Videos in der Lightbox */
#lightboxImage,
#lightboxVideo {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    border-radius: 8px;
}

JavaScript

//Lightbox
// Referenzen zu den Overlay-Elementen
const lightboxOverlay = document.getElementById('lightboxOverlay');
const lightboxImage = document.getElementById('lightboxImage');
const lightboxVideo = document.getElementById('lightboxVideo');
const closeBtn = document.getElementById('closeBtn');

// Alle Galerie-Elemente, die die Klasse "img-gallery" haben
const galleryItems = document.querySelectorAll('.img-gallery');

galleryItems.forEach(item => {
    item.addEventListener('click', () => {
        // Zuerst Bild und Video ausblenden, damit nicht beides gleichzeitig sichtbar ist
        lightboxImage.style.display = 'none';
        lightboxVideo.style.display = 'none';
        lightboxVideo.pause(); // Video sicherheitshalber anhalten

        // Prüfen, ob es sich um ein IMG oder VIDEO handelt
        if (item.tagName.toLowerCase() === 'img') {
            // Bild-Quelle setzen
            lightboxImage.src = item.src;
            lightboxImage.style.display = 'block';
        } else if (item.tagName.toLowerCase() === 'video') {
            // Video-Quelle setzen
            lightboxVideo.src = item.src;
            lightboxVideo.style.display = 'block';
            lightboxVideo.play();
        }

        // Overlay einblenden
        lightboxOverlay.style.display = 'flex';
    });
});

// Klick auf das "X" -> Overlay schließen
closeBtn.addEventListener('click', () => {
    lightboxOverlay.style.display = 'none';
    lightboxVideo.pause(); // Video stoppen, wenn vorhanden
});

// Klick auf Overlay-Hintergrund -> Overlay schließen
lightboxOverlay.addEventListener('click', (event) => {
    // Nur schließen, wenn auf den Hintergrund (nicht auf Bild/Video) geklickt wird
    if (event.target === lightboxOverlay) {
        lightboxOverlay.style.display = 'none';
        lightboxVideo.pause();
    }
});

Modal

Ein Popup mit Inhalt

HTML

<!-- HTML -->
<h2>Modal Beispiel</h2>
<!-- Button, um das Modal zu öffnen -->
<button id="openModalBtn">Modal öffnen</button>

<!-- Das Modal -->
<div id="myModal" class="modal">
    <!-- Modal Inhalt -->
    <div class="modal-content">
        <span class="close" id="closeModalBtn">×</span>
        <h2>Modal Überschrift</h2>
        <p>Dies ist ein Beispieltext innerhalb des Modals. Hier können weitere Inhalte, Formulare oder Informationen eingeblendet werden.</p>
    </div>
</div>

CSS

/* CSS */
/* Grundlegendes Modal Styling */
.modal {
    display: none;
    /* Standardmäßig versteckt */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* Ermöglicht Scrollen falls nötig */
    background-color: rgba(0, 0, 0, 0.5);
    /* Halbdurchsichtiger Hintergrund */
}

/* Modal-Inhalt */
.modal-content {
    background-color: #fff;
    margin: 15% auto;
    /* Zentriert das Modal horizontal */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Schließen-Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
}

JavaScript

// JavaScript
// Elemente selektieren
const modal = document.getElementById("myModal");
const openModalBtn = document.getElementById("openModalBtn");
const closeModalBtn = document.getElementById("closeModalBtn");

// Modal öffnen, wenn der Button geklickt wird
openModalBtn.addEventListener("click", function () {
    modal.style.display = "block";
});

// Modal schließen, wenn auf das Schließen-Symbol geklickt wird
closeModalBtn.addEventListener("click", function () {
    modal.style.display = "none";
});

// Modal schließen, wenn außerhalb des Modal-Inhalts geklickt wird
window.addEventListener("click", function (event) {
    if (event.target === modal) {
        modal.style.display = "none";
    }
});

Audio Player

Entscheide selbst, wie dein Player aussieht und ersetze die langweiligen Buttons mit Icons

HTML

<audio id="myAudio">
    <source src="assets/media/night-whisper.mp3" type="audio/mpeg" loop>
    Dein Browser unterstützt kein Audio-Tag.
</audio>
<button onclick="playAudio()" type="button"><i class="material-icons-rounded">play_circle</i></button>
<button onclick="pauseAudio()" type="button"><i class="material-icons-rounded">pause_circle</i></button>

JavaScript

const x = document.getElementById("myAudio");

function playAudio() {
    x.play();
}

function pauseAudio() {
    x.pause();
}

Accordion

Viel Inhalt übersichtlich verstecken

HTML

<h2>Accordion Beispiel</h2>

<div class="accordion">
    <div class="accordion-item">
        <button class="accordion-header">Section 1</button>
        <div class="accordion-content">
            <p>Hier steht der Inhalt von Section 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header">Section 2</button>
        <div class="accordion-content">
            <p>Hier steht der Inhalt von Section 2. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header">Section 3</button>
        <div class="accordion-content">
            <p>Hier steht der Inhalt von Section 3. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
        </div>
    </div>
</div>

CSS

/* Accordion Container */
.accordion {
    width: 80%;
    max-width: 800px;
    margin: 20px auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

/* Einzelner Accordion-Item */
.accordion-item {
    border-bottom: 1px solid #ccc;
}

/* Header des Accordions */
.accordion-header {
    background-color: #f1f1f1;
    cursor: pointer;
    padding: 15px;
    font-size: 1.1em;
    border: none;
    text-align: left;
    outline: none;
    transition: background-color 0.3s ease;
    width: 100%;
}

.accordion-header.active {
    background-color: #ddd;
}

/* Inhalt des Accordion-Items mit weichem Übergang */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    background-color: #fff;
    transition: max-height 0.5s ease;
    padding: 0 15px;
}

.accordion-content p {
    margin: 15px 0;
}

JavaScript

const headers = document.querySelectorAll('.accordion-header');

headers.forEach(header => {
    header.addEventListener('click', function () {
        const content = this.nextElementSibling;

        // Falls das aktuelle Panel bereits offen ist, schließe es
        if (content.style.maxHeight) {
            content.style.maxHeight = null;
            this.classList.remove('active');
        } else {
            // Zuerst alle anderen Panels schließen
            document.querySelectorAll('.accordion-content').forEach(item => {
                item.style.maxHeight = null;
                if (item.previousElementSibling.classList.contains('active')) {
                    item.previousElementSibling.classList.remove('active');
                }
            });
            // Dann das angeklickte Panel öffnen
            content.style.maxHeight = content.scrollHeight + "px";
            this.classList.add('active');
        }
    });
});

Tab-Menü

Viel Inhalt ordentlich aufräumen

HTML

<div class="tab-container">
    <div class="tab-buttons">
        <button class="tab-link active" onclick="openTab(event, 'tab1')">Tab 1</button>
        <button class="tab-link" onclick="openTab(event, 'tab2')">Tab 2</button>
        <button class="tab-link" onclick="openTab(event, 'tab3')">Tab 3</button>
    </div>

    <div id="tab1" class="tab-content active">
        <h2>Inhalt von Tab 1</h2>
        <p>Dies ist der Inhalt des ersten Tabs. Hier können Informationen, Bilder oder andere Inhalte stehen.</p>
    </div>

    <div id="tab2" class="tab-content">
        <h2>Inhalt von Tab 2</h2>
        <p>Dies ist der Inhalt des zweiten Tabs. Du kannst diesen Bereich nach Belieben anpassen.</p>
    </div>

    <div id="tab3" class="tab-content">
        <h2>Inhalt von Tab 3</h2>
        <p>Dies ist der Inhalt des dritten Tabs. Füge hier weitere Inhalte ein.</p>
    </div>
</div>

CSS

/* Container für das Tab-Menü */
.tab-container {
    width: 80%;
    max-width: 800px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}

/* Tab-Buttons */
.tab-buttons {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}

.tab-buttons button {
    background-color: #f1f1f1;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: background-color 0.3s;
    font-size: 17px;
}

.tab-buttons button:hover {
    background-color: #ddd;
}

.tab-buttons button.active {
    background-color: #ccc;
}

/* Tab-Inhalte */
.tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
    animation: fadeIn 0.5s;
}

.tab-content.active {
    display: block;
}

/* Weiche Fade-In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

JavaScript

function openTab(evt, tabName) {
    var i, tabcontent, tablinks;

    // Alle Tab-Inhalte ausblenden
    tabcontent = document.getElementsByClassName("tab-content");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].classList.remove("active");
    }

    // Active-Klasse von allen Buttons entfernen
    tablinks = document.getElementsByClassName("tab-link");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].classList.remove("active");
    }

    // Gewählten Tab-Inhalt anzeigen und Button als aktiv markieren
    document.getElementById(tabName).classList.add("active");
    evt.currentTarget.classList.add("active");
}

Lettering

Lass Buchstaben erscheinen, als würden sie von unsichtbarer Hand geschrieben!

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Schreibmaschineneffekt mit Typed.js</title>
    <!-- Typed.js via CDN -->
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
</head>

<body>
    <div class="typed-container">
        <span id="typed"></span>
    </div>
</body>

</html>

CSS

body {
    margin: 0;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color: #fff;
    font-family: 'Courier New', monospace;
}

.typed-container {
    font-size: 2rem;
    text-align: center;
}

JavaScript

// JavaScript Hier muss dein Text hinein
const options = {
    strings: [
        "Willkommen in der magischen Welt von Aetheron.",
        "Erlebe Magie, Technik und unvergessliche Abenteuer.",
        "Tauche ein in das Geheimnis der alten Chroniken."
    ],
    typeSpeed: 50,
    backSpeed: 25,
    loop: true,
    backDelay: 2000,
    showCursor: true,
    cursorChar: '|'
};

const typed = new Typed("#typed", options);

Countdown

Gib deine Zeit ein und Lass dich mit Musik erinnern

HTML

<div class="container">
    <h1>Countdown Timer</h1>
    <p>Gib die Zeit in Stunden, Minuten und Sekunden ein:</p>
    <input type="number" id="hoursInput" placeholder="Stunden" min="0">
    <input type="number" id="minutesInput" placeholder="Minuten" min="0" max="59">
    <input type="number" id="secondsInput" placeholder="Sekunden" min="0" max="59">
    <button onclick="startCountdown()">Start Countdown</button>
    <div id="countdown">00:00:00</div>
</div>

<!-- Audio-Element: Passe den Pfad zu deiner Audiodatei an -->
<audio id="alarmAudio" src="assets/media/night-whisper.mp3" preload="auto"></audio>

CSS

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 50px;
}

.container {
    max-width: 350px;
    margin: 0 auto;
}

input[type="number"] {
    padding: 10px;
    width: 30%;
    font-size: 16px;
    box-sizing: border-box;
    margin: 5px 1%;
}

button {
    padding: 10px;
    margin-top: 10px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
}

#countdown {
    font-size: 48px;
    margin-top: 20px;
    font-weight: bold;
}

JavaScript

let countdownInterval;

function startCountdown() {
    clearInterval(countdownInterval);

    // Eingaben auslesen und in Integer umwandeln
    const hours = parseInt(document.getElementById("hoursInput").value, 10) || 0;
    const minutes = parseInt(document.getElementById("minutesInput").value, 10) || 0;
    const seconds = parseInt(document.getElementById("secondsInput").value, 10) || 0;

    // Gesamte Zeit in Sekunden berechnen
    let totalSeconds = hours * 3600 + minutes * 60 + seconds;

    if (totalSeconds <= 0) {
        alert("Bitte gib eine gültige Zeit ein.");
        return;
    }

    updateDisplay(totalSeconds);

    countdownInterval = setInterval(() => {
        totalSeconds--;
        if (totalSeconds < 0) {
            clearInterval(countdownInterval);
            // Audio automatisch abspielen, wenn die Zeit abgelaufen ist
            document.getElementById("alarmAudio").play();
            // Countdown-Display auf 00:00:00 setzen
            document.getElementById("countdown").textContent = "00:00:00";
            return;
        }
        updateDisplay(totalSeconds);
    }, 1000);
}

function updateDisplay(totalSeconds) {
    const hours = Math.floor(totalSeconds / 3600);
    const remainder = totalSeconds % 3600;
    const minutes = Math.floor(remainder / 60);
    const secs = remainder % 60;
    // Formatierung: jeweils zwei Ziffern
    document.getElementById("countdown").textContent =
        (hours < 10 ? "0" : "") + hours + ":" +
        (minutes < 10 ? "0" : "") + minutes + ":" +
        (secs < 10 ? "0" : "") + secs;
}

Maus Animation

Verfolge, leuchte, verändere – mach die Mausbewegung zum Erlebnis!

HTML

<body>
    <!-- Custom Cursor -->
    <div id="cursor">

    </div>
</body>

</html>

CSS

/* Standard-Cursor ausblenden */
body {
    cursor: none;
    margin: 0;
    height: 100vh;
    background: #111;
    overflow: hidden;
}

/* Benutzerdefinierter Cursor: Kreis */
#cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #ff00ee;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

/* Partikel, die dem Cursor folgen */
.particle {
    position: fixed;
    width: 6px;
    height: 6px;
    background: #c83dff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999;
    opacity: 1;
    animation: particleAnim 0.8s ease-out forwards;
}

/* Animation für die Partikel */
@keyframes particleAnim {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

JavaScript

// JavaScript
const cursor = document.getElementById('cursor');

document.addEventListener('mousemove', e => {
    // Setze die Position des Custom Cursors
    cursor.style.top = e.clientY + 'px';
    cursor.style.left = e.clientX + 'px';

    // Erstelle einen Partikel an der Cursor-Position
    const particle = document.createElement('div');
    particle.className = 'particle';
    particle.style.top = e.clientY + 'px';
    particle.style.left = e.clientX + 'px';

    // Generiere zufällige Werte für die Animation (Richtung und Distanz)
    const angle = Math.random() * 2 * Math.PI;
    const distance = Math.random() * 30 + 10; // zwischen 10 und 40px
    const tx = Math.cos(angle) * distance + "px";
    const ty = Math.sin(angle) * distance + "px";
    particle.style.setProperty('--tx', tx);
    particle.style.setProperty('--ty', ty);

    document.body.appendChild(particle);

    // Entferne das Partikel nach Ende der Animation (0.8s)
    setTimeout(() => {
        particle.remove();
    }, 800);
});