Wie man einen schrumpfenden Sticky-Header in Elementor mit GSAP erstellt
SHARE
Was macht dieser Code?
1. Header-Schrumpfung
Der Header wird beim Scrollen in der Höhe reduziert, während ein transparenter Hintergrund und ein Unschärfeeffekt (Blur) hinzugefügt werden. Dadurch entsteht ein moderner, dynamischer Look.
2. Logo- und Button-Skalierung
Das Logo und der Button werden beim Scrollen kleiner, um eine kompaktere Darstellung zu gewährleisten. Dies sorgt für eine aufgeräumte Optik, ohne den Wiedererkennungswert zu verlieren.
3. Navigation-Skalierung
Das gesamte Navigationsmenü schrumpft proportional zum verkleinerten Header. Dadurch bleibt die Menüstruktur erhalten und passt sich der neuen Header-Größe an.
4. Farbänderung der Menülinks
Die Farbe der Menülinks ändert sich während des Scrollens, um einen besseren Kontrast und eine höhere Lesbarkeit zu gewährleisten. Diese Anpassung verbessert die Nutzerfreundlichkeit, insbesondere bei transparenten oder halbtransparenten Hintergründen.
5. Skalierung des mobilen Menü-Buttons
Auch der Toggle-Button des mobilen Menüs passt sich der verkleinerten Header-Struktur an. Dies sorgt für ein einheitliches Erscheinungsbild auf allen Geräten.
Tipps für Anpassungen
Start- und Endwerte der Animation
Die Werte für start und end bestimmen, wann die Animation beginnt und endet. Durch Anpassung dieser Parameter kann das Verhalten des schrumpfenden Headers individuell optimiert werden.
Individuelle Farben anpassen
Die Standardfarbe #FFF kann durch beliebige Hex-, RGB- oder HSL-Farbwerte ersetzt werden, um das Design an das Branding der Website anzupassen.
Scrub-Einstellung für flüssige Animationen
Der Parameter scrub: 1 steuert, wie weich die Animation mit dem Scrollen verläuft. Durch Erhöhen oder Verringern dieses Werts lässt sich die Animation feiner abstimmen.
Fazit
Ein dynamischer Shrinking Header mit GSAP und Elementor Pro verbessert die Benutzerfreundlichkeit und sorgt für eine moderne, professionelle Optik. Durch gezielte Anpassungen in CSS und JavaScript kann das Verhalten der Animation exakt auf die Bedürfnisse einer Website abgestimmt werden. Diese Technik eignet sich für Unternehmenswebsites, Blogs und E-Commerce-Seiten, die eine interaktive Navigation mit ansprechendem Design kombinieren möchten.
GSAP Code
Füge diesen Code in das HTML Widget ein
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
// Define the elements
const header = document.querySelector(".lux-header");
const logo = document.querySelector(".lux-logo img");
const button = document.querySelector(".lux-button");
const toggle = document.querySelector(".elementor-menu-toggle");
const menuLinks = document.querySelectorAll(".lux-navigation a");
const headerNav = document.querySelector(".lux-navigation"); // Navigation container
// Check if the key elements exist on the page
if (header && logo && button) {
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
// Create a timeline with ScrollTrigger
let tl = gsap.timeline({
scrollTrigger: {
trigger: header, // The header triggers the animation
start: "top top", // Starts when the top of the header is 50px above the viewport
end: "+=300", // Ends after the user scrolls 300px
scrub: 1, // Smoothly links the animation to the scroll position
invalidateOnRefresh: true,
},
});
// Use a fromTo animation for the height
tl.fromTo(
header,
{ height: "clamp(6.25rem, 3.205vw + 5.529rem, 9.375rem)" }, // Initial dynamic height, must match with CSS
{
height: "clamp(3.75rem, 3.205vw + 3.029rem, 6.875rem)", // Target height
backgroundColor: "rgba(255, 255, 255, 0.2)", // Change background color
backdropFilter: "blur(25px)", // Apply blur effect
ease: "none", // No additional easing
}
);
// Scale down the button
tl.to(button, {
scale: 0.9, // Shrinks the button slightly
transformOrigin: "center center", // Shrinks from the center
ease: "none", // Smooth transition without extra easing
}, "<"); // Synchronize this animation with the previous one
// Scale down the logo
tl.to(logo, {
scale: 0.6, // Shrinks the logo
transformOrigin: "center center", // Shrinks from the center
ease: "none", // Smooth scaling
}, "<"); // Synchronize with the previous animation
// Scale down the mobile menu toggle
tl.to(toggle, {
scale: 0.8, // Shrinks the toggle button slightly
transformOrigin: "center center", // Shrinks from the center
ease: "none",
}, "<"); // Synchronize with the previous animation
// Scale down the navigation container
tl.to(headerNav, {
scale: 0.8, // Shrinks the entire navigation container
transformOrigin: "center center", // Shrinks from the center
ease: "none",
}, "<"); // Synchronize with the previous animation
// Change the color of each menu link
menuLinks.forEach((link) => {
tl.to(link, {
color: "#000", // Changes the link color to white
ease: "power1.inOut", // Smooth easing for the color change
}, "<"); // Synchronize with the previous animation
});
} else {
// Log an error if one or more selectors are missing
console.error("One or more key elements are missing from the page.");
}
window.addEventListener('resize', () => {
ScrollTrigger.refresh();
});
</script>
CSS Code
Füge dies in den Wrapper-Container ein oder besser direkt in den WordPress Customizer bzw. in dein WordPress CSS.
.lux-header {
position: fixed; /* Sticks the header to the top of the viewport */
top: 0; /* Aligns the header at the very top */
width: 100%; /* Full width of the viewport */
height: clamp(6.25rem, 3.205vw + 5.529rem, 9.375rem); /* Responsive height using CSS clamp */
background: rgba(255, 255, 255, 0.2); /* Transparent white background */
backdrop-filter: blur(10px); /* Applies a blur effect for a frosted glass look */
display: flex; /* Flexbox layout for alignment */
align-items: center; /* Centers items vertically */
justify-content: space-between; /* Spaces items evenly */
padding: 0 20px; /* Adds padding to the left and right */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
z-index: 1000; /* Ensures the header stays above other elements */
transition: all 0.3s ease; /* Smooth transition for all properties */
will-change: transform; /* Optimizes for transform animations */
}
.lux-logo img {
width: clamp(6.25rem, 3.205vw + 5.529rem, 9.375rem);
height: auto; /* Maintains aspect ratio */
object-fit: contain; /* Ensures the image fits within its container */
display: block; /* Removes extra spacing from inline images */
transition: all 0.3s ease; /* Smooth transition for all properties */
transform-origin: center center; /* Scales from the center */
will-change: transform; /* Optimizes for transform animations */
}
.lux-navigation {
display: flex; /* Flexbox layout for navigation links */
justify-content: center; /* Centers links horizontally */
align-items: center; /* Aligns links vertically */
width: 100%; /* Full width for alignment */
position: relative; /* Allows positioning of child elements */
transform-origin: center center; /* Scaling from the center */
transition: all 0.3s ease; /* Smooth transition */
}
.lux-navigation a {
text-decoration: none; /* Removes underline from links */
font-size: 1rem; /* Default font size */
margin: 0px; /* Spacing between links */
transition: font-size 0.3s ease, color 0.3s ease; /* Smooth transitions for size and color */
will-change: transform, color; /* Optimizes for these properties */
text-align: center; /* Centers text inside the links */
}
.elementor-menu-toggle {
align-self: center; /* Vertically centers the toggle */
font-size: 35px; /* Default font size */
cursor: pointer; /* Changes cursor to pointer */
transition: transform 0.3s ease; /* Smooth transition for scaling */
transform-origin: center center; /* Scales from the center */
}
.lux-button {
box-sizing: border-box; /* Includes padding and border in width/height */
display: inline-flex; /* Flexbox for alignment */
justify-content: center; /* Centers content horizontally */
align-items: center; /* Centers content vertically */
transform-origin: center center; /* Scales from the center */
transition: transform 0.3s ease; /* Smooth scaling */
}
.lux-button a {
display: inline-block; /* Allows padding and width adjustments */
text-align: center; /* Centers text inside the button */
padding: 10px 25px; /* Adds padding inside the button */
white-space: nowrap; /* Prevents text wrapping */
line-height: 1.5; /* Improves readability */
transition: all 0.3s ease; /* Smooth transition for all properties */
}
.lux-icon {
width: 30px; /* Default width for the icon */
height: 2px; /* Height for the bars */
background: #333; /* Dark gray color for the bars */
display: block; /* Displays the icon as a block element */
margin: 6px 0; /* Spacing between bars */
transition: all 0.3s ease; /* Smooth transition */
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.lux-logo img {
/* Adjust width for tablets */
transition: all 0.3s ease; /* Smooth transition */
transform-origin: center center; /* Scaling from the center */
}
.elementor-menu-toggle {
font-size: 30px; /* Smaller toggle size for tablets */
transition: all 0.3s ease; /* Smooth transition */
}
.lux-navigation a {
font-size: 1.2rem; /* Larger font size for better readability */
transition: all 0.3s ease; /* Smooth transition */
}
}
@media (max-width: 767px) {
.lux-logo img {
/* Adjust width for mobile */
transition: all 0.3s ease; /* Smooth transition */
transform-origin: center center; /* Scaling from the center */
}
.elementor-menu-toggle {
font-size: 30px; /* Adjust size for mobile */
transition: all 0.3s ease; /* Smooth transition */
}
.lux-navigation a {
font-size: 1.2rem; /* Default font size for links */
color: rgba(30, 30, 30, 1); /* Darker link color */
transition: all 0.3s ease; /* Smooth transition */
}
}
