Description
Wir suchen einen Frontend-Entwickler (HTML/CSS/JavaScript), der einen modernen, responsiven und interaktiven Webbereich mit zentralem Gehirn-Element und mehreren kreisförmig angeordneten Menüpunkten entwickelt. Die Menüpunkte sollen bei Hover und Klick durch animierte, gewellte Linien (Synapsen) mit dem Gehirn verbunden werden.
Um eine zügige Umsetzung zu gewährleisten, suchen wir jemanden, der moderne Tools und ggf. KI-Unterstützung einsetzt (z.?B. Code-Generatoren, Copilot, ChatGPT, etc.), um wiederkehrende oder komplexe Aufgaben schnell zu strukturieren.
Die Umsetzung dient als visuelles Highlight für eine moderne Website und muss in Elementor Pro (WordPress) eingebunden werden können.
Funktionsübersicht
Grundlayout
• Zentrales Gehirn-Bild (PNG/SVG) mittig im Bereich.
• 5–6 runde Menüpunkte mit Text (z.?B. „Business“, „Privat“, „VIP“, etc.), gleichmäßig kreisförmig um das Gehirn verteilt.
• Dunkler Hintergrund, modern und clean (z.?B. #000 oder Verlauf).
Hover-Funktion
• Beim Hover über einen Menüpunkt:
o Sofortige Animation einer Synapsenlinie vom Gehirn zum Menüpunkt.
o Die Linie soll leicht gewellt oder gebogen sein (optisch wie eine neuronale Verbindung).
o Menüpunkt erhält einen weißen Glüheffekt (Hover-Stil).
Klick-Funktion (2-stufige Animation)
• Beim Klick auf einen Menüpunkt:
1. Keine sofortige Weiterleitung.
2. Stattdessen startet eine zweite Animation:
? Eine kleine leuchtende „Synapse“ (Punkt) wandert entlang der vorhandenen Linie vom Gehirn zum Menüpunkt.
? Die Bewegung soll flüssig, natürlich, organisch wirken.
? Dauer: ca. 2 Sekunden.
3. Erst nach Abschluss der Animation erfolgt (optional) eine Weiterleitung oder Inhaltsanzeige.
Technische Anforderungen
• Umsetzbar mit HTML, CSS und JavaScript.
• Keine WordPress-Plugins nötig – reiner Code zur Einbindung über Elementor Pro (HTML-Widget).
• Menüpunkt-Positionierung erfolgt dynamisch per JavaScript (kreisförmig, responsiv).
• Die Linie kann per SVG, Canvas oder JS-generiertes Path umgesetzt werden.
• Die wandernde Synapse kann mit SVG + motionPath, GSAP, oder JavaScript-Animation umgesetzt werden.
• Responsiv auf Desktop, Tablet und Smartphone.
• Keine schweren Frameworks (z.?B. kein jQuery) – sauberes, leichtgewichtiges Vanilla JS bevorzugt.
Design-Vorgaben
• Gehirn-Bild wird als Asset bereitgestellt (alternativ Dummy verwenden).
• Farben: dunkler Hintergrund (#000), weiße Linien und Leuchteffekte.
• Buttons mit Hover-Glow und Aktiv-Markierung.
Lieferumfang
• Vollständiger, kommentierter Code (HTML + CSS + JS)
• Bereit zur Integration in Elementor Pro über ein HTML-Widget
• Anleitung zur Einbindung
• Optional: CodePen-Demo oder Testlink zur Vorschau
• Optional: Erweiterbarkeit (z.?B. Lichtimpulse zurück, Icons, dynamische Inhalte)
Zeitplan
Start: kurzfristig
Lieferung: innerhalb von 7–10 Tagen
Bitte mit angeben
• Ob du KI-Tools wie ChatGPT, Copilot etc. einsetzt, um die Entwicklung zu beschleunigen.
• Referenzprojekte
• Ob du SVG oder Canvas bevorzugst
• Deine Einschätzung zum Aufwand
• Dein Festpreis für das gesamte Projekt
Um eine zügige Umsetzung zu gewährleisten, suchen wir jemanden, der moderne Tools und ggf. KI-Unterstützung einsetzt (z.?B. Code-Generatoren, Copilot, ChatGPT, etc.), um wiederkehrende oder komplexe Aufgaben schnell zu strukturieren.
Die Umsetzung dient als visuelles Highlight für eine moderne Website und muss in Elementor Pro (WordPress) eingebunden werden können.
Funktionsübersicht
Grundlayout
• Zentrales Gehirn-Bild (PNG/SVG) mittig im Bereich.
• 5–6 runde Menüpunkte mit Text (z.?B. „Business“, „Privat“, „VIP“, etc.), gleichmäßig kreisförmig um das Gehirn verteilt.
• Dunkler Hintergrund, modern und clean (z.?B. #000 oder Verlauf).
Hover-Funktion
• Beim Hover über einen Menüpunkt:
o Sofortige Animation einer Synapsenlinie vom Gehirn zum Menüpunkt.
o Die Linie soll leicht gewellt oder gebogen sein (optisch wie eine neuronale Verbindung).
o Menüpunkt erhält einen weißen Glüheffekt (Hover-Stil).
Klick-Funktion (2-stufige Animation)
• Beim Klick auf einen Menüpunkt:
1. Keine sofortige Weiterleitung.
2. Stattdessen startet eine zweite Animation:
? Eine kleine leuchtende „Synapse“ (Punkt) wandert entlang der vorhandenen Linie vom Gehirn zum Menüpunkt.
? Die Bewegung soll flüssig, natürlich, organisch wirken.
? Dauer: ca. 2 Sekunden.
3. Erst nach Abschluss der Animation erfolgt (optional) eine Weiterleitung oder Inhaltsanzeige.
Technische Anforderungen
• Umsetzbar mit HTML, CSS und JavaScript.
• Keine WordPress-Plugins nötig – reiner Code zur Einbindung über Elementor Pro (HTML-Widget).
• Menüpunkt-Positionierung erfolgt dynamisch per JavaScript (kreisförmig, responsiv).
• Die Linie kann per SVG, Canvas oder JS-generiertes Path umgesetzt werden.
• Die wandernde Synapse kann mit SVG + motionPath, GSAP, oder JavaScript-Animation umgesetzt werden.
• Responsiv auf Desktop, Tablet und Smartphone.
• Keine schweren Frameworks (z.?B. kein jQuery) – sauberes, leichtgewichtiges Vanilla JS bevorzugt.
Design-Vorgaben
• Gehirn-Bild wird als Asset bereitgestellt (alternativ Dummy verwenden).
• Farben: dunkler Hintergrund (#000), weiße Linien und Leuchteffekte.
• Buttons mit Hover-Glow und Aktiv-Markierung.
Lieferumfang
• Vollständiger, kommentierter Code (HTML + CSS + JS)
• Bereit zur Integration in Elementor Pro über ein HTML-Widget
• Anleitung zur Einbindung
• Optional: CodePen-Demo oder Testlink zur Vorschau
• Optional: Erweiterbarkeit (z.?B. Lichtimpulse zurück, Icons, dynamische Inhalte)
Zeitplan
Start: kurzfristig
Lieferung: innerhalb von 7–10 Tagen
Bitte mit angeben
• Ob du KI-Tools wie ChatGPT, Copilot etc. einsetzt, um die Entwicklung zu beschleunigen.
• Referenzprojekte
• Ob du SVG oder Canvas bevorzugst
• Deine Einschätzung zum Aufwand
• Dein Festpreis für das gesamte Projekt