Sozial Flapper

Entdecke die Revolution der Interaktion mit den neuen 'Social Buttons'. In einer Welt, in der ein Klick mehr sagt als tausend Worte, bieten diese kleinen Symbole eine Brücke zwischen digitaler Kommunikation und menschlicher Verbindung. Doch hinter ihren einfachen Formen verbirgt sich eine Welt voller Potenzial und unerwarteter Wendungen.

Grundlegende Dateien

Um unser Projekt zu starten, benötigen wir zunächst drei grundlegende Dateien: eine index.html, eine scripts.js und eine styles.css. Als nächstes werden wir einen Grundcode in unserer HTML erstellen, in dem wir sowohl das Skript als auch die Styles einbinden.

// index.html

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Social Flapper</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="assets/styles.css" rel="stylesheet" />
  </head>
  <body>
    <script src="assets/scripts.js"></script>
  </body>
</html>

Jetzt können wir den Inhalt der Dateien "styles.css" und "scripts.js" erstellen und mit der Entwicklung deiner Anwendung fortfahren.

Um eine übersichtliche Navigation für unsere Website zu erstellen, verwenden wir HTML-Tags wie <nav>, <ul>, <li> und <a>, um eine strukturierte Liste von Links zu erstellen.

// index.html

<nav class="topnav">
  <div id="Social" class="social">
    <ul class="social_list">
      <li class="social_item">
        <a class="social_link i-instagram" target="_blank" title="..." rel="noopener" href="#">
          <i>Instagram</i>
        </a>
      </li>
      <li class="social_item">
        <a class="social_link i-email" title="..." href="#">
          <i>E-Mail</i>
        </a>
      </li>
      <li class="social_item">
        <a class="social_link i-facebook" target="_blank" title="..." href="#">
          <i>Facebook</i>
        </a>
      </li>
    </ul>
  </div>
</nav>

Dieser Code definiert eine Navigation mit sozialen Medien als Links. Hier ist eine Erklärung für jeden Teil des Codes:

- `<nav class="topnav">`: Dies definiert ein Navigationsmenü mit der Klasse "topnav".
- `<div id="Social" class="social">`: Dies ist ein Container-Div mit der ID "Social" und der Klasse "social". Dieser Container könnte verwendet werden, um das Navigationsmenü zu gruppieren oder zu stylen.
- `<ul class="social_list">`: Dies definiert eine ungeordnete Liste mit der Klasse "social_list". In diesem Fall werden die sozialen Medien als Liste von Links angezeigt.
- `<li class="social_item">`: Dies definiert jedes Element in der Liste als "social_item", also jedes Element in der Liste ist ein Eintrag für ein soziales Medium.
- `<a class="social_link i-instagram" target="_blank" title="..." rel="noopener" href="#">`: Dies definiert den Link zu Instagram. Er hat die Klasse "social_link", was bedeutet, dass er Teil der sozialen Links ist, und "i-instagram" für das Instagram-Icon. Der `target="_blank"`-Attribut öffnet den Link in einem neuen Tab, `title="..."` könnte verwendet werden, um einen Titel für das Tooltip des Links anzugeben, und `rel="noopener"` verbessert die Sicherheit, indem es das Nachladen der Seite im neuen Tab verhindert. `href="#"` definiert das Ziel des Links, in diesem Fall ist es ein Platzhalter.
- `<i>Instagram</i>`: Dies ist der Text, der innerhalb des Link-Tags angezeigt wird. Hier steht "Instagram".

FontAwesome integrieren

Im nächsten Schritt werden wir FontAwesome integrieren. https://cdnjs.com/libraries/font-awesome

// index.html

<head>
  <title>Social Flapper</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  />
  <link href="assets/styles.css" rel="stylesheet" />
</head>

Lass uns jetzt die Navigation gestalten, um sie ansprechender zu machen.

// assets/styles.css

/* Stile für das Navigationsmenü */
.topnav {
  position: fixed; /* Positionierung am Bildschirm fixieren */
  left: 0; /* Position am linken Rand */
  top: 0; /* Position am oberen Rand */
  height: 66px; /* Höhe des Navigationsmenüs */
  width: 100%; /* Volle Breite des Bildschirms */
  background: grey; /* Hintergrundfarbe des Navigationsmenüs */
}

ul {
  list-style: none;
}


/* Stile für den Social-Medien-Bereich */
.social {
  cursor: pointer; /* Zeiger beim Überfahren des Bereichs */
  position: absolute; /* Absolute Positionierung innerhalb des Elternelements */
  right: 3rem; /* Position am rechten Rand */
  top: 42px; /* Abstand von oben */
  height: 66px; /* Höhe des Bereichs */
  width: 66px; /* Breite des Bereichs */
  -webkit-transform: translateX(0.9375rem); /* Transformation für Webkit-Browser */
  transform: translateX(0.9375rem); /* Transformation für andere Browser */
}

/* Stile für das Social-Media-Icon */
.social:before {
  content: "\f0c9"; /* Content des Icons (Font Awesome Unicode) */
  display: inline-block; /* Inline-Block-Element anzeigen */
  font-family: "Font Awesome 6 Free"; /* Font-Familie für Font Awesome */
  font-style: normal; /* Normale Schriftstil */
  font-variant: normal; /* Normale Schriftvariante */
  font-weight: 900; /* Gewicht des Icons */
  font-size: 2rem; /* Größe des Icons */
  position: relative; /* Relative Positionierung im Elternelement */
  text-align: center; /* Zentrieren des Texts */
  text-decoration: inherit; /* Vererbung der Textdekoration */
  text-transform: none; /* Keine Texttransformation */
  top: -2rem; /* Position des Icons relativ zur Basis */
}

Bei der Integration des Icons ist es von besonderer Bedeutung, die Einstellungen für font-family und font-weight korrekt zu berücksichtigen.

// assets/styles.css

/* Stile für die Liste der sozialen Links */
.social_list {
  position: absolute; /* Absolute Positionierung */
  top: 2rem; /* Abstand von oben */
}

/* Stile für die sozialen Links */
.social_link {
  left: 0; /* Positionierung am linken Rand */
  position: absolute; /* Absolute Positionierung */
  top: 0.625rem; /* Abstand von oben */
  border-radius: 50%; /* Kreisrunde Form */
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.12), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.24); /* Schatten */
  color: #fff; /* Textfarbe */
  display: block; /* Als Blockelement anzeigen */
  height: 2.875rem; /* Höhe */
  opacity: 0; /* Anfangsopazität */
  text-decoration: none; /* Keine Unterstreichung */
  transform: translateX(0); /* Keine horizontale Verschiebung */
  transition: transform 0.35s, opacity 0.35s, visibility 0.35s; /* Übergangseffekte */
  visibility: hidden; /* Anfangssichtbarkeit */
  width: 2.875rem; /* Breite */
  text-align: center; /* Text zentriert */
}

/* Stile für das Icon innerhalb der sozialen Links */
.social_link i {
  position: absolute; /* Absolute Positionierung */
  visibility: hidden; /* Anfangssichtbarkeit */
}

/* Stile für das Facebook-Icon */
.social_link.i-facebook {
  background-color: #3b5998; /* Hintergrundfarbe */
}

.social_link.i-facebook:before {
  content: "\f082"; /* FontAwesome Unicode für Facebook */
  font-family: "Font Awesome 6 Brands"; /* Font-Familie für Font Awesome */
}

/* Stile für das Instagram-Icon */
.social_link.i-instagram {
  background-color: #e4405f; /* Hintergrundfarbe */
}

.social_link.i-instagram:before {
  content: "\f16d"; /* FontAwesome Unicode für Instagram */
  font-family: "Font Awesome 6 Brands"; /* Font-Familie für Font Awesome */
}

/* Stile für das E-Mail-Icon */
.social_link.i-email {
  background-color: #009fe3; /* Hintergrundfarbe */
}

.social_link.i-email:before {
  content: "\f0e0"; /* FontAwesome Unicode für E-Mail */
  font-family: "Font Awesome 6 Free"; /* Font-Familie für Font Awesome */
}

1. `.social_list`: Die Liste der sozialen Links wird absolut positioniert und von oben um 2rem verschoben.
2. `.social_link`: Die sozialen Links haben eine runde Form, einen Schatten, weißen Text, und sie sind am Anfang unsichtbar und ohne horizontale Verschiebung.
3. `:hover`: Wenn über einen Link gefahren wird, wird die Opazität auf 0,8 erhöht.
4. `.social_link i`: Das Icon innerhalb der sozialen Links ist unsichtbar.
5. `.i-facebook`, `.i-instagram`, `.i-email`: Unterschiedliche Hintergrundfarben und Font Awesome Icons für Facebook, Instagram und E-Mail werden definiert.

Stilisierung der sozialen Links

Hier ist der CSS-Code für die Stilisierung der sozialen Links mit einer ansprechenderen Formulierung:

// assets/styles.css

/* Stile für aktivierte soziale Links */
.social-active .social_link {
  opacity: 1; /* Vollständig sichtbar machen */
  visibility: visible; /* Sichtbarkeit aktivieren */
  min-width: 1rem; /* Mindestbreite festlegen */
}

/* Stile für Hover-Effekt auf aktivierten sozialen Links */
.social-active .social_link:hover {
  opacity: 0.8; /* Verringerte Opazität beim Überfahren */
}

/* Stile für Facebook-Link auf aktiviertem Zustand */
.social-active .social_link.i-facebook {
  transform: translateX(-240%); /* Horizontale Verschiebung nach links */
}

/* Stile für Instagram-Link auf aktiviertem Zustand */
.social-active .social_link.i-instagram {
  transform: translateX(-120%); /* Horizontale Verschiebung nach links */
}

/* Stile für E-Mail-Link auf aktiviertem Zustand */
.social-active .social_link.i-email {
  transform: translateX(0); /* Keine horizontale Verschiebung */
}

/* Stile für das vorherige Element des Icons innerhalb der sozialen Links */
.social_link.i-email:before,
.social_link.i-facebook:before,
.social_link.i-instagram:before {
  display: block; /* Als Blockelement anzeigen */
  font-size: 1.25rem; /* Größe des Icons */
  height: 100%; /* Volle Höhe des Elternelements */
  line-height: 2.875rem; /* Vertikale Ausrichtung des Icons */
  width: 100%; /* Volle Breite des Elternelements */
}

Dieser CSS-Code fügt Stile hinzu, um das Erscheinungsbild der sozialen Links zu ändern, wenn die Klasse `.social-active` auf das übergeordnete Element angewendet wird. Hier ist eine kurze Erklärung:

1. `.social-active .social_link`: Wenn das übergeordnete Element die Klasse `.social-active` hat, werden die sozialen Links sichtbar (Opacity 1) und haben eine Mindestbreite von 1rem.
2. `.social-active .social_link:hover`: Wenn über einen Link gefahren wird und das übergeordnete Element `.social-active` hat, wird die Opazität auf 0,8 erhöht.
3. `.social-active .social_link.i-facebook`, `.social-active .social_link.i-instagram`, `.social-active .social_link.i-mail`: Für Facebook-, Instagram- und E-Mail-Links, wenn das übergeordnete Element `.social-active` hat, wird eine horizontale Verschiebung angewendet.
4. `.social_link.i-email:before`, `.social_link.i-facebook:before`, `.social_link.i-instagram:before`: Das vorherige Element des Icons innerhalb der sozialen Links wird als Blockelement mit einer bestimmten Größe und Ausrichtung definiert.

JavaScript-Code

Als nächstes wird der JavaScript-Code eingefügt, der die Klasse ".social-active" dynamisch hinzufügt.

// assets/scripts.js

var socialFlapper = function () {
  // Elemente auswählen
  var socialElement = document.querySelector(".social");
  var socialContainer = document.getElementById("Social");

  // Klick-Ereignis für das soziale Element hinzufügen
  socialElement.addEventListener("click", function () {
    // Überprüfen, ob die Klasse "social-active" vorhanden ist
    if (socialContainer.classList.contains("social-active")) {
      // Wenn ja, entferne die Klasse
      socialContainer.classList.remove("social-active");
    } else {
      // Wenn nicht, füge die Klasse hinzu
      socialContainer.classList.add("social-active");
    }
  });

  // Klick-Ereignis für Dokument hinzufügen
  document.addEventListener("click", function (e) {
    // Überprüfen, ob das geklickte Element das soziale Element ist oder ein Kind davon
    if (!socialElement.contains(e.target)) {
      // Wenn nicht, entferne die Klasse
      socialContainer.classList.remove("social-active");
    }
  });

  // Scroll-Ereignis für Dokument hinzufügen
  document.addEventListener("scroll", function () {
    // Überprüfen, ob die Klasse "social-active" vorhanden ist
    if (socialContainer.classList.contains("social-active")) {
      // Wenn ja, entferne die Klasse
      socialContainer.classList.remove("social-active");
    }
  });
};

// Funktion aufrufen
socialFlapper();

1.mp4 196 KB

Meld dich an und schreibe ein Kommentar