/* ========================================================= röner : design – Bewegungssystem „rd-motion“ Gilt auf allen Seiten. Dateien: motion/rd-motion.css, motion/rd-motion.js, motion/rd-motion.php Grundsatz: die Sprache des Hero weitertragen. 1 SETZEN Inhalte kommen aus der Unschärfe in die Klarheit und setzen sich von oben (wie die Hero-Botschaften). Nie von der Seite, nie springend. 2 KASKADE Was gleichzeitig ins Bild kommt, erscheint in Leserichtung nacheinander (70 ms Takt, max. 7 Schritte). Keine Einstellung pro Widget nötig. 3 EINMAL Jedes Element erscheint einmal. Nichts wiederholt sich beim Zurückscrollen. 4 RUHE Im Inhalt läuft nichts dauerhaft. Dauerbewegung gibt es nur im Hero-Logo. 5 PUNKT Rückmeldung bei Interaktion über den Punkt aus dem Logo (Navigation). 6 WECHSEL Seitenwechsel blenden weich über, der Header bleibt stehen. 7 RÜCKSICHT Bei „Bewegung reduzieren“ ist alles sofort da. Ohne JS ebenso. Steuerung im Elementor: CSS-Klasse „rd_anim--none“ an Widget/Container → keine Animation. ========================================================= */ :root{ /* Kurven */ --rdm-ease: cubic-bezier(.16,1,.3,1); /* ankommen – identisch mit Hero-Texten */ --rdm-ease-move: cubic-bezier(.7,0,.16,1); /* verlagern – identisch mit Hero-Logofeld */ --rdm-ease-hover: cubic-bezier(.2,.7,.2,1); /* reagieren */ --rdm-ease-punkt: cubic-bezier(.34,1.6,.64,1); /* federn – identisch mit Hero-Punkten */ /* Dauern */ --rdm-t-micro: .2s; /* Farbe, Linie, Hover */ --rdm-t-short: .4s; /* Pfeile, Punkte, Akkordeon */ --rdm-t-media: .6s; /* Bildzoom bei Hover */ --rdm-t-base: .8s; /* Erscheinen */ --rdm-t-long: 1.1s; /* Bilder öffnen */ /* Wege */ --rdm-set: 10px; /* Text setzt sich von oben */ --rdm-drop: 16px; /* Überschrift setzt sich von oben */ --rdm-blur: 6px; } /* Alt-Klasse aus dem früheren HTML-Widget der Startseite: wird vom System übernommen */ .rd_anim--intro{opacity:1!important;animation:none!important} /* --------------------------------------------------------- 1 · Erscheinen – Vorab ausblenden (nur mit html.rdm, gesetzt von rd-motion.php) Selektoren synchron halten mit RDM_ZIELE / RDM_AUS in rd-motion.js --------------------------------------------------------- */ .rdm :is(.elementor-widget,.elementor-icon-list-item,.e-n-accordion-item,.rdp-card,.rd-kacheln__item):not(.rdm-in):not( .elementor-widget-shortcode,.elementor-widget-html,.elementor-widget-spacer,.elementor-widget-icon-list, .elementor-widget-nested-accordion,.elementor-widget-rd_kacheln,.elementor-widget-ekit-nav-menu,.elementor-widget-menu-anchor, .rd_header *,.rd-minifooter *,.rd-hero-section *,.rd_anim--none,.rd_anim--none *,.e-n-accordion-item * ){opacity:0} /* Startzustände je Art */ .rdm .rdm-text:not(.rdm-in), .rdm .rdm-karte:not(.rdm-in){translate:0 calc(var(--rdm-set) * -1);filter:blur(var(--rdm-blur))} .rdm .rdm-titel:not(.rdm-in){translate:0 calc(var(--rdm-drop) * -1);filter:blur(calc(var(--rdm-blur) * 1.6))} .rdm .rdm-bild.rdm-bild:not(.rdm-in){opacity:1;clip-path:inset(0 0 100% 0)} .rdm .rdm-bild:not(.rdm-in) img{scale:1.08} .rdm .rdm-karte:not(.rdm-in) img{scale:1.06} .rdm .rdm-linie.rdm-linie:not(.rdm-in){opacity:1;clip-path:inset(0 100% 0 0)} /* Übergang – nur während des Erscheinens, danach gelten wieder die eigenen Transitions der Widgets */ .rdm .rdm-in:not(.rdm-done){ transition:opacity var(--rdm-t-base) var(--rdm-ease),translate var(--rdm-t-base) var(--rdm-ease), filter var(--rdm-t-base) var(--rdm-ease),clip-path var(--rdm-t-long) var(--rdm-ease-move); transition-delay:var(--rdm-d,0ms); } .rdm .rdm-bild.rdm-in:not(.rdm-done) img, .rdm .rdm-karte.rdm-in:not(.rdm-done) img{transition:scale var(--rdm-t-long) var(--rdm-ease);transition-delay:var(--rdm-d,0ms)} .rdm .rdm-linie.rdm-in:not(.rdm-done){transition-timing-function:var(--rdm-ease)} /* --------------------------------------------------------- 2 · Interaktion – einheitliche Zeiten und Kurven --------------------------------------------------------- */ .elementor-widget-text-editor a,.elementor-widget-heading a,.rd-mf a{transition:color var(--rdm-t-micro) var(--rdm-ease-hover),border-color var(--rdm-t-micro) var(--rdm-ease-hover)} .elementor .elementor-button{transition:background-color var(--rdm-t-micro) var(--rdm-ease-hover),color var(--rdm-t-micro) var(--rdm-ease-hover),border-color var(--rdm-t-micro) var(--rdm-ease-hover)} .rd-kacheln__item .rd-kacheln__img, .rdp-media .rdp-img{transition:transform var(--rdm-t-media) var(--rdm-ease-hover),filter var(--rdm-t-short) var(--rdm-ease-hover)} .rd-kacheln__label{transition:opacity var(--rdm-t-short) var(--rdm-ease),transform var(--rdm-t-short) var(--rdm-ease)} /* Akkordeon: Pfeil dreht mit der Ankommen-Kurve, Inhalt setzt sich beim Öffnen */ .e-n-accordion-item-title::after{transition:transform var(--rdm-t-short) var(--rdm-ease)!important} .e-n-accordion-item[open] > [role="region"]{animation:rdm-setzen var(--rdm-t-base) var(--rdm-ease) both} @keyframes rdm-setzen{from{opacity:0;translate:0 calc(var(--rdm-set) * -1);filter:blur(var(--rdm-blur))}to{opacity:1;translate:0 0;filter:none}} /* Navigation: der Punkt aus dem Logo – aktive Seite: Punkt federt nach dem Laden ein – Hover (nur Desktop mit Maus): Punkt wächst halb transparent */ @keyframes rdm-punkt{from{scale:0}to{scale:1}} .rdm .elementor-29 .elementskit-navbar-nav > li.current-menu-item:after{animation:rdm-punkt var(--rdm-t-short) var(--rdm-ease-punkt) .35s both} @media (hover:hover) and (pointer:fine) and (min-width:1025px){ .elementor-29 .elementskit-navbar-nav > li:not(.current-menu-item):after{ content:"";display:block;width:10px;height:10px;margin:auto;border-radius:100%;position:relative;top:-4px; background-color:var(--e-global-color-accent);opacity:0;scale:0; transition:scale var(--rdm-t-short) var(--rdm-ease-punkt),opacity var(--rdm-t-micro) var(--rdm-ease-hover); } .elementor-29 .elementskit-navbar-nav > li:not(.current-menu-item):hover:after, .elementor-29 .elementskit-navbar-nav > li:not(.current-menu-item):focus-within:after{opacity:.45;scale:.7} } /* --------------------------------------------------------- 3 · Seitenwechsel (Cross-Document View Transitions; Browser ohne Unterstützung laden normal) --------------------------------------------------------- */ @view-transition{navigation:auto} .rd_header{view-transition-name:rd-header} #wpadminbar{view-transition-name:rd-adminbar} ::view-transition-group(rd-header),::view-transition-group(rd-adminbar){animation:none} ::view-transition-old(root){animation:rdm-vt-aus .28s cubic-bezier(.6,0,.7,.2) both} ::view-transition-new(root){animation:rdm-vt-ein .45s var(--rdm-ease) both} @keyframes rdm-vt-aus{to{opacity:0;filter:blur(var(--rdm-blur))}} @keyframes rdm-vt-ein{from{opacity:0}} /* --------------------------------------------------------- 4 · Rücksicht --------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} .e-n-accordion-item[open] > [role="region"]{animation:none} .e-n-accordion-item-title::after, .elementor-29 .elementskit-navbar-nav > li:after, .rd-kacheln__item .rd-kacheln__img,.rdp-media .rdp-img{transition:none!important} } @media print{ .rdm *{opacity:1!important;translate:none!important;filter:none!important;clip-path:none!important;scale:none!important} }