🎨 Banner Modules - Vollständige Übersicht

Status: Alle 4 Module aus banners.pug vollständig migriert!

📊 Migration Status: banners.pug ✅ VOLLSTÄNDIG!

4

Module erstellt

4

Banner-Varianten

100%

banners.pug

✅ Vollständig migriert:

2 Slider-Banner: banner-start-monads, banner-theme-monads
2 Statische Banner: banner-monads-super-txt, banner-monads-super-img
Flickity Integration: Slider mit Auto-Play, Prev/Next, Pagination
GSAP Animations: Parallax-Effekte beim Sliden

📋 Nächste Schritte:

teaser-flow.pug → Teaser-Module (25-30 Stück) - GROSSE GRUPPE
metainfo2.pug → Metainfo-Blöcke (8-10 Stück)
advert-flow.pug → Werbung-Module (3 Stück)
Kleinere Module: marquee, trenner, share, toolbox

🎉 Bisheriger Fortschritt:

✅ content.pug - 27 Module (100%)
✅ listing-flow.pug - 12 Module (100%)
✅ listing-table.pug - 5 Module (100%)
✅ headers.pug - 3 Module (100%)
✅ banners.pug - 4 Module (100%)
Gesamt: 51 Module komplett migriert!

✅ 1. module__banner-start-monads.html (Slider)

Features: Flickity Slider, 5 Slides, Auto-Play, Banner-Monad-Images + Mini Square-Monad

Verwendung:








  
	
	  
		
		
		
		  
			
			  
				
				  
					
					
		
			
		
					
					  
		
			
		
					  
						
						  
							zum Artikel
						  
						
					  
					
				  
				
			  
			
			
			  
				
				  Sample Category 1
				  Sample Banner Text for Article 1 with longer description text.
				
			  
			
		  
		
	  
		
		
		
		  
			
			  
				
				  
					
					
		
			
		
					
					  
		
			
		
					  
						
						  
							zum Artikel
						  
						
					  
					
				  
				
			  
			
			
			  
				
				  Sample Category 2
				  Sample Banner Text for Article 2 with longer description text.
				
			  
			
		  
		
	  
		
		
		
		  
			
			  
				
				  
					
					
		
			
		
					
					  
		
			
		
					  
						
						  
							zum Artikel
						  
						
					  
					
				  
				
			  
			
			
			  
				
				  Sample Category 3
				  Sample Banner Text for Article 3 with longer description text.
				
			  
			
		  
		
	  
		
		
		
		  
			
			  
				
				  
					
					
		
			
		
					
					  
		
			
		
					  
						
						  
							zum Artikel
						  
						
					  
					
				  
				
			  
			
			
			  
				
				  Sample Category 4
				  Sample Banner Text for Article 4 with longer description text.
				
			  
			
		  
		
	  
		
		
		
		  
			
			  
				
				  
					
					
		
			
		
					
					  
		
			
		
					  
						
						  
							zum Artikel
						  
						
					  
					
				  
				
			  
			
			
			  
				
				  Sample Category 5
				  Sample Banner Text for Article 5 with longer description text.

✅ 2. module__banner-theme-monads.html (Slider) - NEU!

Features: Flickity Slider, 5 Slides, Auto-Play, Monad-Image + Solid-Monad (Desktop)

Verwendung:








  
	
	  
		
		
		
		
		
		  
			
			
			
			  
				
				
				
				  
		
			
		
				
				
				
				
				  
		
			
		
				
				
			  
			
			
			
			
			  
				
				  Innovativ
				  Dies ist ein Beispielsatz für die Darstellung von Inhalten.
				  
					
					  Passende Artikel anzeigen
					
				  
				
			  
			
			
		  
		
	  
		
		
		
		
		
		  
			
			
			
			  
				
				
				
				  
		
			
		
				
				
				
				
				  
		
			
		
				
				
			  
			
			
			
			
			  
				
				  Innovativ
				  Dies ist ein Beispielsatz für die Darstellung von Inhalten.
				  
					
					  Passende Artikel anzeigen
					
				  
				
			  
			
			
		  
		
	  
		
		
		
		
		
		  
			
			
			
			  
				
				
				
				  
		
			
		
				
				
				
				
				  
		
			
		
				
				
			  
			
			
			
			
			  
				
				  Innovativ
				  Dies ist ein Beispielsatz für die Darstellung von Inhalten.
				  
					
					  Passende Artikel anzeigen
					
				  
				
			  
			
			
		  
		
	  
		
		
		
		
		
		  
			
			
			
			  
				
				
				
				  
		
			
		
				
				
				
				
				  
		
			
		
				
				
			  
			
			
			
			
			  
				
				  Innovativ
				  Dies ist ein Beispielsatz für die Darstellung von Inhalten.
				  
					
					  Passende Artikel anzeigen
					
				  
				
			  
			
			
		  
		
	  
		
		
		
		
		
		  
			
			
			
			  
				
				
				
				  
		
			
		
				
				
				
				
				  
		
			
		
				
				
			  
			
			
			
			
			  
				
				  Innovativ
				  Dies ist ein Beispielsatz für die Darstellung von Inhalten.
				  
					
					  Passende Artikel anzeigen

✅ 3. module__banner-monads-super-txt.html (Static)

Features: 4 Monads (3 Images + 1 Solid), Überschrift responsive sizing

Verwendung mit Custom-Parametern:












  
	
	
	
	  
		
			
		
	
	
	
	
	  
		
			
		
	
	
	
	
	  
		
			
		
	
	
	
	
	  
		
			
		
	
	
	
	
	  
		
		  Custom Heading Text

✅ 4. module__banner-monads-super-img.html (Static) - NEU!

Features: 4 Monad-Bilder, verschiedene Positionen (abs-tl, rel, abs-tr), keine Überschrift

Verwendung:

🔧 Technische Details & Dependencies

JavaScript Dependencies:

Flickity.js - Slider-Funktionalität (banner-start-monads, banner-theme-monads)
GSAP/Tween - Parallax-Animationen beim Sliden
main.js - Initialisierung: initBannerStartMonads(), initBannerThemeMonads()

Gulpfile Macros (benötigt):

banner_monad_image(type, index, imageUrl) - Banner-Monad mit Bild + SVG ClipPath
banner_monad_solid(type, index, color) - Banner-Monad einfarbig
square_monad_solid(type, index, color) - Quadratische Monad einfarbig (für Mini-Monad)

CSS Klassen:

.monad-banner-slider - Slider Container
.flickity-flow - Flickity Initialisierung
.hold-image, .hold-solid - Monad Container
.abs-tl, .abs-tr, .abs-br - Absolute Positionierung
.span-7__m, .ml-1__m, .ml-neg-2__m - Grid Layout

🎯 Vergleich der Banner-Typen

Modul	Typ	Slides	Features	Verwendung
banner-start-monads	Slider	5	Monad-Bild + Mini Square-Monad	Homepage Hero
banner-theme-monads	Slider	5	Monad-Bild + Solid-Monad (Desktop)	Themen-Übersichten
banner-monads-super-txt	Static	-	4 Monads + Überschrift	Feature Index Pages
banner-monads-super-img	Static	-	4 Monad-Bilder only	Visuelle Hero-Sections