docs: finalize DESIGN_GUIDE.md with precise browser specifications and floating parallax components
This commit is contained in:
+202
-4
@@ -47,8 +47,8 @@ Statt starrer Spacing-Klassen setzen wir auf vollkommen fluide Abstände und int
|
|||||||
* **Fluide Variablen auf `:root`:**
|
* **Fluide Variablen auf `:root`:**
|
||||||
```css
|
```css
|
||||||
:root {
|
:root {
|
||||||
--grid-gap: clamp(14px, 1vw + 4px, 28px);
|
--grid-gap: clamp(14px, 9.71px + 1.1vw, 28px); /* Exakt vermessene Floema-Formel */
|
||||||
--grid-margin: clamp(16px, 1.5vw + 10px, 36px);
|
--grid-margin: clamp(16px, 10.15px + 1.5vw, 36px); /* Exakt vermessene Floema-Formel */
|
||||||
--grid-width: calc(100vw - var(--grid-margin) * 2);
|
--grid-width: calc(100vw - var(--grid-margin) * 2);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
@@ -87,7 +87,7 @@ Eine Premium-Website fühlt sich lebendig und geschmeidig an. Das Nutzererlebnis
|
|||||||
### 1. Typografie & Layout-Ästhetik
|
### 1. Typografie & Layout-Ästhetik
|
||||||
|
|
||||||
#### 🆔 `CapitoliumClassicTypography`
|
#### 🆔 `CapitoliumClassicTypography`
|
||||||
* **Beschreibung**: Luxuriöse Kontrast-Typografie. Große, elegante Initialen oder Zitate in geschwungener Handschrift kombiniert mit markanten, breit spationierten Serif-Überschriften in Großbuchstaben und perfekt blocksatzähnlichen Fließtexten.
|
* **Beschreibung**: Luxuriöse Kontrast-Typografie. Große, elegante Initialen oder Zitate in geschwungener Handschrift kombiniert mit markanten, breit spationierten Serif-Überschriften in Großbuchstaben (`gin, serif` Stil) und perfekt blocksatzähnlichen Fließtexten.
|
||||||
* **HTML-Struktur**:
|
* **HTML-Struktur**:
|
||||||
```html
|
```html
|
||||||
<div class="editorial-header">
|
<div class="editorial-header">
|
||||||
@@ -362,6 +362,26 @@ Eine Premium-Website fühlt sich lebendig und geschmeidig an. Das Nutzererlebnis
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### 🆔 `FloemaNudgeHover`
|
||||||
|
* **Beschreibung**: Hochsensibler, spielerischer Navigationseffekt. Statt Farbwechsel schiebt sich das Element minimal zur Seite (oder nach oben), was eine physische Leichtigkeit erzeugt.
|
||||||
|
* **HTML-Struktur**:
|
||||||
|
```html
|
||||||
|
<a href="#" class="nudge-link">Unsere Story</a>
|
||||||
|
```
|
||||||
|
* **CSS-Anweisung**:
|
||||||
|
```css
|
||||||
|
.nudge-link {
|
||||||
|
display: inline-block;
|
||||||
|
transition: margin 0.3s cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
color: var(--color-bg-dark);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.nudge-link:hover {
|
||||||
|
margin-left: 6px;
|
||||||
|
color: var(--color-accent-gold);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 4. Menüs, Overlays & Navigationen
|
### 4. Menüs, Overlays & Navigationen
|
||||||
@@ -469,7 +489,162 @@ Eine Premium-Website fühlt sich lebendig und geschmeidig an. Das Nutzererlebnis
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 5. Übergänge, Scroll-Effekte & Ladebildschirme
|
### 5. Ladebildschirme, Scroll-Effekte & Parallax
|
||||||
|
|
||||||
|
#### 🆔 `CapitoliumPreloader`
|
||||||
|
* **Beschreibung**: Immersiver, ganzflächiger Ladebildschirm mit anwachsenden Zahlen oder einer edlen Botschaft, der sich beim Laden nach oben wegschiebt und die Website enthüllt.
|
||||||
|
* **HTML-Struktur**:
|
||||||
|
```html
|
||||||
|
<div class="preloader" id="preloader">
|
||||||
|
<div class="preloader-content">
|
||||||
|
<h1 class="preloader-logo">FlixCooks</h1>
|
||||||
|
<div class="preloader-bar"><div class="preloader-fill" id="preloaderFill"></div></div>
|
||||||
|
<p class="preloader-text">Wird zubereitet... <span id="preloaderPerc">0</span>%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
* **CSS-Anweisung**:
|
||||||
|
```css
|
||||||
|
.preloader {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 10000;
|
||||||
|
background-color: var(--color-bg-dark);
|
||||||
|
color: var(--color-light-gold);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
|
||||||
|
}
|
||||||
|
.preloader.loaded {
|
||||||
|
transform: translateY(-100vh);
|
||||||
|
}
|
||||||
|
.preloader-content {
|
||||||
|
text-align: center;
|
||||||
|
width: clamp(200px, 50vw, 400px);
|
||||||
|
}
|
||||||
|
.preloader-logo {
|
||||||
|
font-family: var(--font-serif-display);
|
||||||
|
font-size: 2.5rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.preloader-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: rgba(240, 227, 207, 0.2);
|
||||||
|
border-radius: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.preloader-fill {
|
||||||
|
width: 0%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--color-accent-gold);
|
||||||
|
transition: width 0.1s ease;
|
||||||
|
}
|
||||||
|
.preloader-text {
|
||||||
|
font-family: var(--font-sans-clean);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
* **JavaScript-Anweisung**:
|
||||||
|
```javascript
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const fill = document.getElementById("preloaderFill");
|
||||||
|
const perc = document.getElementById("preloaderPerc");
|
||||||
|
const preloader = document.getElementById("preloader");
|
||||||
|
let progress = 0;
|
||||||
|
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
progress += Math.floor(Math.random() * 15) + 5;
|
||||||
|
if (progress >= 100) {
|
||||||
|
progress = 100;
|
||||||
|
clearInterval(interval);
|
||||||
|
setTimeout(() => {
|
||||||
|
preloader.classList.add("loaded");
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
fill.style.width = progress + "%";
|
||||||
|
perc.innerText = progress;
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 🆔 `FloemaScatterParallax`
|
||||||
|
* **Beschreibung**: Spielerische, unregelmäßige Bildanordnungen, die beim Scrollen oder bei Mausbewegung in asynchronen Geschwindigkeiten gleiten (Parallax-Effekt). Perfekt für die Präsentation von Zutaten oder Detailaufnahmen auf der Startseite.
|
||||||
|
* **HTML-Struktur**:
|
||||||
|
```html
|
||||||
|
<div class="scatter-container">
|
||||||
|
<div class="scatter-item item-fast" data-speed="0.15">
|
||||||
|
<img src="assets/img/zutat_1.jpg" alt="Tomaten">
|
||||||
|
</div>
|
||||||
|
<div class="scatter-item item-slow" data-speed="0.05">
|
||||||
|
<img src="assets/img/zutat_2.jpg" alt="Basilikum">
|
||||||
|
</div>
|
||||||
|
<div class="scatter-item item-medium" data-speed="0.1">
|
||||||
|
<img src="assets/img/zutat_3.jpg" alt="Olivenöl">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
* **CSS-Anweisung**:
|
||||||
|
```css
|
||||||
|
.scatter-container {
|
||||||
|
position: relative;
|
||||||
|
height: 60vh;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.scatter-item {
|
||||||
|
position: absolute;
|
||||||
|
will-change: transform;
|
||||||
|
box-shadow: 0 15px 35px rgba(0,0,0,0.08);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.item-fast {
|
||||||
|
top: 10%;
|
||||||
|
left: 15%;
|
||||||
|
width: 180px;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
.item-slow {
|
||||||
|
top: 40%;
|
||||||
|
right: 10%;
|
||||||
|
width: 250px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.item-medium {
|
||||||
|
top: 25%;
|
||||||
|
left: 55%;
|
||||||
|
width: 220px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.scatter-item img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
* **JavaScript-Anweisung (GSAP ScrollTrigger)**:
|
||||||
|
```javascript
|
||||||
|
gsap.utils.toArray(".scatter-item").forEach(item => {
|
||||||
|
const speed = item.getAttribute("data-speed");
|
||||||
|
gsap.to(item, {
|
||||||
|
yPercent: -100 * speed,
|
||||||
|
ease: "none",
|
||||||
|
scrollTrigger: {
|
||||||
|
trigger: item,
|
||||||
|
start: "top bottom",
|
||||||
|
end: "bottom top",
|
||||||
|
scrub: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
#### 🆔 `LenisSmoothScroll`
|
#### 🆔 `LenisSmoothScroll`
|
||||||
* **Beschreibung**: Bietet ein samtweiches, flüssiges Scrollverhalten über die gesamte Website hinweg (bekannt von *Capitolium* und *Floema*). Wird idealerweise mit einer feinen Scroll-Progress-Anzeige kombiniert.
|
* **Beschreibung**: Bietet ein samtweiches, flüssiges Scrollverhalten über die gesamte Website hinweg (bekannt von *Capitolium* und *Floema*). Wird idealerweise mit einer feinen Scroll-Progress-Anzeige kombiniert.
|
||||||
@@ -548,3 +723,26 @@ Eine Premium-Website fühlt sich lebendig und geschmeidig an. Das Nutzererlebnis
|
|||||||
.section-indicator { display: none; }
|
.section-indicator { display: none; }
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Referenz-Spezifikationen (Website Analysis Insights)
|
||||||
|
|
||||||
|
Diese Spezifikationen dienen als exakte technische Grundlage und belegen das reale Verhalten der Vorbilder, die wir als Benchmark nutzen:
|
||||||
|
|
||||||
|
### A. Capitolium (collabcapitolium.fr)
|
||||||
|
* **Pinning & Scroll-Tiefe**: Nutzt massive GSAP ScrollTrigger-Bereiche. Der Bereich `block-shirts` besitzt eine Höhe von `1816px` und `block-collection` sogar `6744px` für atemberaubende horizontale Karusselle.
|
||||||
|
* **Raster-Konfiguration**: Sehr enges Raster mit einem Spaltenabstand (`--gutter`) von exakt `10px` und einer Begrenzung auf `--max-width: 2560px`.
|
||||||
|
* **Schrifthierarchie**: Markante, massive Serifenschrift `gin, serif` (Headline-Größe: `131px`) im perfekten Kontrast zu `Times, serif` für Fließtext und geometrischem `Rubik, sans-serif` (`14px`, fett) für Buttons.
|
||||||
|
|
||||||
|
### B. fromanother (fromanother.love)
|
||||||
|
* **Echtes Farb-Setup**: Düsteres, hochmütiges Farbverhältnis. Hintergrund ist Mitternachtsblau (`#051236`) mit cremefarbenen Texten (`#fffde2`) und einem leuchtenden Kobaltblau (`#1740a9`) für interaktive Akzente.
|
||||||
|
* **Asymmetrische Abstände**: Festes 6-Spalten-Raster (`--columns: 6`) mit standardisierten, progressiven Seitenabständen (`--padding-x: 1.6rem`, `--gap-x: 1.6rem`).
|
||||||
|
* **Monolithische Hero-Area**: Die Showcase-Projekte werden über eine GSAP-Scrollhöhe von `7518px` (exakt 6x Viewport-Höhe) gepinnt, um dreidimensionale Drehungen zu inszenieren.
|
||||||
|
|
||||||
|
### C. Floema (floema.com/en)
|
||||||
|
* **Grounded Palette**: Warmes Elfenbein-Creme (`#f2efea`) kombiniert mit tiefem Kohlebraun (`#241f21`) und organischen Erdtönen wie Waldgrün (`#042d2b`), Kraftkarton-Beige (`#c6af88`) und Terracotta (`#f76c46`).
|
||||||
|
* **Scrolltrigger-Tiefe**: Extrem langes Scroll-Pinning von exakt `11.277px` für die interaktive Vorstellung der Kollektionen.
|
||||||
|
* **Responsive Perfektion**: Keine harten Mediaqueries, sondern vollkommen fließende Größenberechnungen:
|
||||||
|
* *Grid Gap*: `clamp(14px, 9.71px + 1vw, 28px)`
|
||||||
|
* *Grid Margin*: `clamp(16px, 10.15px + 1.5vw, 36px)`
|
||||||
|
|||||||
Reference in New Issue
Block a user