@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
368 lines (314 loc) • 8.96 kB
CSS
/**
* Smooth Scroll CSS-Komponente
* ---------------------------
* Diese Datei enthält Stile für erweiterte Scroll-Funktionalitäten und -Effekte.
*
* Eigenschaften:
* - Sanftes Scrollen (smooth-scroll) für eine verbesserte Benutzererfahrung
* - Scroll-Snap für präzises Positionieren von Elementen beim Scrollen
* - Fortschrittsanzeigen für die Visualisierung der Scroll-Position
* - Parallax-Effekte für tiefenwirksame Layouts
* - Scroll-Animation-Effekte (fade, scale, slide, rotate)
* - Gestaffelte Scroll-Animationen für Gruppen von Elementen
* - Scroll-zu-Top-Funktionalität
* - Scroll-Spy für Navigation
* - Barrierefreiheitsanpassungen für reduzierte Bewegung
*
* Verwendung:
* Fügen Sie die entsprechenden Klassen zu Ihren HTML-Elementen hinzu,
* um die verschiedenen Scroll-Effekte und -Funktionen zu aktivieren.
*
* @layer core - Grundlegende Scroll-Funktionalitäten und -Effekte
* @layer components - Wiederverwendbare Scroll-Komponenten
*/
/* Animationen */
@keyframes scroll-timeline-fade {
0% {
opacity: 0;
transform: translateY(var(--spacing-5, 1.25rem));
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@layer smooth-scroll {
/* Smooth Scroll Variables */
:root {
--scroll-behavior: smooth;
--scroll-padding-top: 0;
--scroll-snap-type: none;
--scroll-snap-align: none;
--scroll-snap-stop: always;
--scroll-margin: 0;
--scroll-timeline-name: none;
--scroll-timeline-axis: block;
--scroll-timeline-view-offset: 0;
}
/* Base Smooth Scroll */
html {
scroll-behavior: var(--scroll-behavior, smooth);
scroll-padding-top: var(--scroll-padding-top, 0);
}
/* Scroll Snap */
.scroll-snap-container {
height: 100vh;
overflow-y: auto;
scroll-snap-type: var(--scroll-snap-type, none);
}
.scroll-snap-item {
scroll-margin: var(--scroll-margin, 0);
scroll-snap-align: var(--scroll-snap-align, none);
scroll-snap-stop: var(--scroll-snap-stop, normal);
}
/* Scroll Progress */
.scroll-progress {
background: linear-gradient(to right, var(--color-primary, #3b82f6) var(--scroll), transparent 0);
height: var(--spacing-1, 0.25rem);
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: var(--z-50);
}
/* Scroll Timeline */
.scroll-timeline {
scroll-timeline-axis: var(--scroll-timeline-axis);
scroll-timeline-name: var(--scroll-timeline-name);
scroll-timeline-view-offset: var(--scroll-timeline-view-offset);
}
/* Parallax Scrolling */
.parallax-container {
height: 100vh;
overflow: hidden auto;
perspective: var(--border-width);
}
.parallax-layer {
inset: 0;
position: absolute;
}
.parallax-layer-back {
transform: translateZ(calc(-1 * var(--border-width))) scale(2);
}
.parallax-layer-base {
transform: translateZ(0);
}
.parallax-layer-front {
transform: translateZ(var(--border-width)) scale(0.5);
}
/* Scroll Reveal */
.scroll-reveal {
opacity: 0;
transform: translateY(var(--spacing-5, 1.25rem));
transition: all var(--transition-normal, 200ms ease);
}
.scroll-reveal.visible {
opacity: 1;
transform: translateX(0);
}
/* Scroll Fade */
.scroll-fade {
opacity: 0;
transition: opacity var(--transition-normal, 200ms ease);
}
.scroll-fade.visible {
opacity: 1;
}
/* Scroll Scale */
.scroll-scale {
opacity: 0;
transform: scale(0.95);
transition: all var(--transition-normal, 200ms ease);
}
.scroll-scale.visible {
opacity: 1;
transform: scale(1);
}
/* Scroll Slide - Konsolidierte Version */
.scroll-slide {
opacity: 0;
transition: all var(--transition-normal, 200ms ease);
}
.scroll-slide.visible {
opacity: 1;
transform: translate(0, 0);
}
/* Scroll Slide Richtungs-Varianten */
.scroll-slide-left { transform: translateX(-50px); }
.scroll-slide-right { transform: translateX(50px); }
.scroll-slide-up { transform: translateY(50px); }
.scroll-slide-down { transform: translateY(-50px); }
/* Scroll Rotate */
.scroll-rotate {
opacity: 0;
transform: rotate(-15deg);
transition: all var(--transition-normal, 200ms ease);
}
.scroll-rotate.visible {
opacity: 1;
transform: rotate(0);
}
/* Scroll Stagger */
.scroll-stagger > * {
opacity: 0;
transform: translateY(var(--spacing-5, 1.25rem));
transition: all var(--transition-normal, 200ms ease);
}
/* Stagger Delays - Kompakte Version */
.scroll-stagger > *:nth-child(1) { transition-delay: 0.1s; }
.scroll-stagger > *:nth-child(2) { transition-delay: 0.2s; }
.scroll-stagger > *:nth-child(3) { transition-delay: 0.3s; }
.scroll-stagger > *:nth-child(4) { transition-delay: 0.4s; }
.scroll-stagger > *:nth-child(5) { transition-delay: 0.5s; }
.scroll-stagger.visible > * {
opacity: 1;
transform: translateX(0);
}
/* Scroll Progress Bar */
.scroll-progress-bar {
background: var(--slider-track-color);
height: var(--spacing-1, 0.25rem);
left: 0;
position: fixed;
top: 0;
width: 100%;
}
.scroll-progress-bar::before {
background: var(--color-primary, #3b82f6);
content: '';
height: 100vh;
left: 0;
position: absolute;
top: 0;
transition: width var(--transition-normal, 200ms ease);
width: var(--scroll);
}
/* Scroll to Top Button */
.scroll-to-top {
align-items: center;
background: var(--color-primary, #3b82f6);
border-radius: 5px;
bottom: var(--spacing-5, 1.25rem);
color: var(--color-white, #fff);
cursor: pointer;
display: flex;
height: var(--spacing-10, 2.5rem);
justify-content: center;
opacity: 0;
position: fixed;
right: var(--spacing-5, 1.25rem);
transform: translateY(var(--spacing-5, 1.25rem));
transition: all var(--transition-normal, 200ms ease);
width: var(--spacing-10, 2.5rem);
z-index: var(--z-50);
}
.scroll-to-top.visible {
opacity: 1;
transform: translateX(0);
}
.scroll-to-top:hover {
background: var(--color-primary-dark);
transform: translateY(calc(-1 * var(--border-width-thick)));
}
/* Scroll Spy Navigation */
.scroll-spy-nav {
position: fixed;
right: var(--spacing-5, 1.25rem);
top: 50;
transform: translateX(-50);
}
.scroll-spy-nav a {
background: var(--slider-track-color);
border-radius: 5px;
display: block;
height: var(--space-small-10px);
margin: var(--space-small-10px) 0;
transition: all var(--transition-normal, 200ms ease);
width: var(--space-small-10px);
}
.scroll-spy-nav a.active {
background: var(--color-primary, #3b82f6);
transform: scale(1.2);
}
/* Scroll Timeline Animation */
.scroll-timeline-animation {
animation: scroll-timeline-fade 1s ease-out forwards;
animation-range: entry 10 cover 30;
animation-timeline: view();
}
/* Scroll Performance */
.scroll-performance {
backface-visibility: hidden;
transform: translateZ(0);
will-change: transform, opacity;
}
/* Respektiere Nutzereinstellung für reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
/* Deaktiviere alle Scroll-Animationen */
html,
body,
.scroll-smooth,
.scroll-behavior-smooth,
.scroll-mt,
.scroll-mb,
.scroll-ms,
.scroll-me,
.scroll-pt,
.scroll-pb,
.scroll-ps,
.scroll-pe,
[data-scroll-trigger],
.scroll-snap-container,
.scroll-snap-item {
animation: none ;
scroll-behavior: auto ;
scroll-padding: 0 ;
scroll-snap-type: none ;
transition: none ;
}
}
/* Responsive Anpassungen */
@media (max-width: 640px) {
.touch-feedback::after {
block-size: 150;
inline-size: 150;
}
.focus-ring:focus-visible {
box-shadow: 0 0 0 var(--border-width) var(--color-primary, #3b82f6);
}
}
@media (min-width: 640px) {
/* Fade Stagger Delays - Kompakte Version */
.scroll-fade-staggered > *:nth-child(2) { animation-delay: 0.1s; }
.scroll-fade-staggered > *:nth-child(3) { animation-delay: 0.2s; }
.scroll-fade-staggered > *:nth-child(4) { animation-delay: 0.3s; }
}
@media (min-width: 768px) {
.scroll-to-top {
bottom: var(--spacing-8);
right: var(--spacing-8);
}
}
@media (min-width: 1024px) {
.scroll-parallax {
transform: translateY(calc(var(--scroll-offset) * 0.15));
}
}
/* Reduzierte Bewegung für Barrierefreiheit */
@media (prefers-reduced-motion: reduce) {
:root {
--scroll-behavior: auto;
}
.scroll-fade,
.scroll-scale,
.scroll-slide,
.scroll-rotate,
.scroll-parallax,
.scroll-fade-staggered > * {
animation: none;
opacity: 1;
transform: none;
transition: none;
}
}
}