TheFink – Die Plattform für Denker und Macher

Wenn du zur deutschsprachigen Creator-Szene gehörst, hast du eventuell mal etwas von TheFink gehört (wenn nicht, auch nicht schlimm 😉). TheFink ist eine entstehende Plattform im Web für (in erster Linie) deutschsprachige kreative Menschen. Egal ob du gerne entwickelst, Dinge designst oder Musik produzierst. Auf TheFink sollst du die Möglichkeit bekommen, dich, dein Können und deine Ideen zu präsentieren und auch um coole Projekte zusammen mit anderen Leuten zu starten.

Während die Plattform selbst sich noch in Entwicklung befindet, hast du bereits jetzt die Möglichkeit, dich auf https://thefink.net zu registrieren (btw von mir entwickelt), anschließend kannst du bereits unserem Discord-Server beitreten und unseren Newsletter abonnieren, damit du was die Entwicklung angehst auf dem neuesten Stand gehalten wirst.

Mit Asiw und Uisum ans Ziel!

Für die Entwicklung der aktuellen Site kamen hauptsächlich zwei Libraries zum Einsatz:

  • Asiw fürs Server-Backend mit MVC-Pattern
  • Uisum als UI-Kit, die zusammen mit React und Bootstrap funktioniert

Diese beiden Libraries können frei verwendet werden, den Quellcode dazu gibt es auf GitHub. Asiw musste ich zwar stark abändern, da die Form, die ihr auf GitHub findet doch sehr abgespeckt ist. Ich denke aber, dass Asiw eine gute Basis für einen RESTful Service in PHP ist. Der Aufbau von Asiw ist übrigens sehr stark von ASP.NET Web API inspiriert, wenn du also damit mal gearbeitet hast, wirst du dich sehr schnell zurecht finden.

Für das Frontend kam Uisum als UI-Kit zum Einsatz. Uisum (kommt im übrigen aus dem Lateinischen und heißt soviel wie „betrachten“) liefert nützliche React-Komponenten für den Grundaufbau einer Web App. Für das Styling wird hauptsächlich Bootstrap genutzt. Der Vorteil: Durch das Abändern von SCSS-Variablen lässt das Aussehen sehr gut personalisieren.
Noch ein Tipp: Durch dieses Tool wird das Anpassen von Bootstrap-Variablen noch angenehmer: https://lgkonline.github.io/customize-bootstrap/

Code Snippet: Der einfachste Weg Parallax mit JavaScript und CSS zu realisieren

Hier der JavaScript-Teil:

window.addEventListener("scroll", event => {
    document.body.style.backgroundPosition = "0px -" + (window.pageYOffset / 2) + "px";
});

Und hier wie der CSS-Teil aussehen könnte:

body {
    background-image: url(./images/bg1.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed; // das ist wichtig
}

 

Ein Beispiel, wie das Ergebnis aussehen kann:

Wie ihr Frosted Glass fürs Web nutzen könnt

Der sogenannte Frosted Glass-Effekt (oder von Microsoft auch Acrylic genannt) ist momentan sehr angesagt. Ich habe auch schon mal ein Video produziert, in dem ich gezeigt habe wie ihr den Effekt mit CSS erzeugen könnt. Leider gibt es mit dieser Technik noch ein paar Probleme, wodurch man sie noch nicht wirklich produktiv einsetzen kann.

Ein Problem ist, dass für die Technik immer ein Hintergrundbild definiert werden muss. Das setzt aber voraus, dass zwischen dem Element mit dem Effekt und dem Hintergrund nichts liegen darf.

Das Element mit dem Effekt ist nämlich nicht wirklich transparent, sondern hat nur den gleichen Hintergrund wie der Body.
Man könnte eine Art Screenshot machen und dieses als Hintergrund benutzen.
Das habe ich mal ausprobiert:

Wie im Beispiel beschrieben, nutze ich html2canvas um das HTML in ein Canvas zu konvertieren. Das Canvas wandel ich dann wiederum in ein Bild um, damit es als Hintergrundbild genutzt werden kann.
Das gesamte Beispiel gibt es hier: https://lgkonline.github.io/frosted-glass/

Die React Komponente react-acrylic geht hier den gleichen Weg, um den Effekt zu erzeugen. Es sei aber gesagt, diese Technik nicht sehr performant ist, da es sehr rechenintensiv ist ein Screenshot zu erzeugen und je nachdem wie viele Elemente es auf der Seite gibt, dauert es auch länger.

Ein anderes Problem ist, dass Browser wie Edge und Firefox beim Scrollen stocken, wenn ein Hintergrundbild als fixed gesetzt ist. Dafür habe ich leider noch keine Lösung gefunden. Diese Problematik wird hier auf Stack Overflow auch genannt.

Auch ist es doch sehr aufwändig, den Effekt zu erzeugen. Es gibt aber Möglichkeiten, sich die Arbeit zu erleichtern.
Auf CodePen habe ich ein Beispiel veröffentlicht, in dem ich eine React Komponente erstellt habe, wodurch ich den Effekt schneller an jeder beliebigen Stelle einbinden kann:

See the Pen FrostedGlass React Component by Lars Gerrit Kliesing LGK (@lgkonline) on CodePen.

Update

Ich habe eine neue CSS-Spezifikation gefunden, mit der es deutlich einfacher wird, den Effekt einzusetzen: backdrop-filter
Mit backdrop-filter: blur(10px); könnte man also Frosted Glass realisieren.
Derzeit wird backgroup-filter leider nur von Safari für macOS und iOS unterstützt, soll aber auch in der nächsten Edge-Version verfügbar sein (Quelle: caniuse.com).

Ich konnte backdrop-filter erfolgreich in diesem Pen testen.

Link zum CodePen: https://codepen.io/lgkonline/pen/GQrLeV