Den würde ich dann auch bei mir anbieten 
Ich brech mir da echt einen ab - bekomme den nicht hin.
Code: Alles auswählen
@keyframes top-fade {
0%, 30% {
opacity: 0;
}
80%, 100% {
opacity: 1;
}
}
@keyframes bottom-fade {
0%, 30% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Firefox hinkt bei der Unterstützung von view-timeline und animation-timeline leider noch hinterher. Während Chrome und Edge das Feature schon voll integriert haben, muss man es in Firefox aktuell oft noch manuell in den tiefen Systemeinstellungen aktivieren – was natürlich kein normaler Besucher deiner Website macht.
Entwickler an KI hat geschrieben:
Bitte überprüfe diesen Mobirise-Block der Bootstrap5 verwendet. Beim Scrollen sollen sich die Bereiche im Fokus ändern. Das funktioniert auch bestens nur nicht im Firefox-Browser.
Bitte ändere ausschließlich den Bereich der dafür im Firefox verantwortlich ist, sonst nichts ändern. Poste dann den gesamte HTML- und CSS-Code hier neu. Verwende eventuell ersatzweise auch JavaScript.
Code: Alles auswählen
<section data-bs-version="5.1" class="header09" group="Headers" id="diag-final-pro">
<mbr-parameters>
<header>Linie</header>
<input type="range" title="Dicke" name="lineWidth" value="3" min="1" max="20" step="1">
<input type="color" title="Farbe" name="lineColor" value="#e6c63b">
<header>Farben</header>
<input type="color" title="Oben" name="colorTop" value="#0c2c68">
<input type="color" title="Unten" name="colorBottom" value="#4e0606">
<header>Text-Position</header>
<input type="range" title="Oben (Vertikal)" name="textPosTop" value="19" min="0" max="70" step="1">
<input type="range" title="Unten (Vertikal)" name="textPosBottom" value="18" min="0" max="70" step="1">
<header>Buttons ein/aus</header>
<input type="checkbox" title="Button Oben anzeigen" name="showBtnTop" checked>
<input type="checkbox" title="Button Unten anzeigen" name="showBtnBottom">
<header>Hintergrund</header>
<fieldset type="background" name="bg">
<input type="image" title="Image" value="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&q=80" selected>
</fieldset>
</mbr-parameters>
<div class="sticky-viewport">
<div class="fixed-bg"></div>
<div class="layer-color layer-top" style="background-color: {{colorTop}};"></div>
<div class="layer-color layer-bottom" style="background-color: {{colorBottom}};"></div>
<div class="content-overlay">
<div class="content-box top-left" style="margin-top: {{textPosTop}}vh;">
<h1 class="mbr-section-title mbr-fonts-style mbr-white" mbr-theme-style="display-1"><b>Oben Titel</b></h1>
<p class="mbr-text mbr-fonts-style mbr-white" mbr-theme-style="display-7">Hier klicken, um deinen Text für den<br>oberen Bereich zu bearbeiten.</p>
<div class="mbr-section-btn" mbr-if="showBtnTop" mbr-buttons mbr-setbuttons>
<a class="btn btn-primary" href="https://mobirise.com" mbr-theme-style="display-4">Button Oben</a>
</div>
</div>
<div class="content-box bottom-right" style="margin-bottom: {{textPosBottom}}vh;">
<h2 class="mbr-section-title mbr-fonts-style mbr-white" mbr-theme-style="display-2"><b>Unten Titel</b></h2>
<p class="mbr-text mbr-fonts-style mbr-white" mbr-theme-style="display-7"></p>
<div class="mbr-section-btn" mbr-if="showBtnBottom" mbr-buttons mbr-setbuttons>
<a class="btn btn-secondary" href="https://mobirise.com" mbr-theme-style="display-4">Button Unten</a>
</div>
</div>
</div>
<div class="diagonal-line">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<line x1="0" y1="100" x2="100" y2="0" stroke="{{lineColor}}" vector-effect="non-scaling-stroke" style="stroke-width: {{lineWidth}}px;"></line>
</svg>
</div>
</div>
</section>Code: Alles auswählen
position: relative;
height: 300vh !important;
overflow: visible;
view-timeline-name: --precisionScroll;
view-timeline-axis: block;
& when (@bg-type = "image") {
.fixed-bg {
background-image: url(@bg-value) !important;
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-attachment: fixed;
z-index: 1;
}
}
.sticky-viewport {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
}
.layer-color {
position: absolute;
inset: 0;
}
.layer-top {
clip-path: polygon(0 0, 100% 0, 0 100%);
z-index: 2;
animation: top-fade linear both;
animation-timeline: --precisionScroll;
animation-range: entry 0% exit 100%;
}
.layer-bottom {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
z-index: 3;
animation: bottom-fade linear both;
animation-timeline: --precisionScroll;
animation-range: entry 0% exit 100%;
}
.content-overlay {
position: absolute;
inset: 0;
z-index: 20;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content-box {
position: relative;
width: 45%;
pointer-events: auto;
padding: 4rem;
}
.top-left {
align-self: flex-start;
}
.bottom-right {
align-self: flex-end;
text-align: right;
}
@keyframes top-fade {
0%, 30% {
opacity: 0;
}
80%, 100% {
opacity: 1;
}
}
@keyframes bottom-fade {
0%, 30% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.diagonal-line {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
}
.diagonal-line svg {
width: 100%;
height: 100%;
}
@media (max-width: 767px) {
.content-box {
width: 90%;
padding: 2rem;
}
}
H2 {
text-align: center;
}
P {
text-align: left;
}
H1 {
text-align: justify;
}
Kann man das so nicht in Mobirise einbauen? ChatGPT hat geschrieben:
Ich habe mir die veröffentlichte Seite angesehen: Im finalen HTML kommt an dieser Stelle nur normaler Inhalt an — „Es gibt noch keinen Inhalt.“, „Oben Titel“, „Button Oben“, „Unten Titel“ — aber nicht die erwartete Effekt-Struktur mit Sticky-Stage, Overlays und Script-Hooks.
Darum ist die Lage leider ziemlich klar:
Der Custom-HTML-Embed wird von Mobirise beim Publish an dieser Stelle so umgebaut oder bereinigt, dass der eigentliche Effekt-Container nicht vollständig erhalten bleibt. Das erklärt genau dein Ergebnis: Text landet unter dem Bild, und beim Scrollen passiert nichts, weil die nötige Struktur für Positionierung und JS nicht mehr sauber vorhanden ist.
Meine ehrliche Einschätzung:
Mit diesem Publish-Verhalten lohnt weiteres Herumdoktern an HTML/CSS/JS gerade kaum. Das Kernproblem sitzt nicht mehr im Effekt, sondern darin, wie Mobirise den Embed auf der Seite ausliefert. Die funktionierende Standalone-Datei zeigt, dass der Effekt an sich in Ordnung ist; die veröffentlichte Mobirise-Seite zeigt, dass genau diese Struktur dort nicht erhalten bleibt.
Also ja: Ich würde es an dieser Stelle auch erstmal lassen.
Der nützlichste Befund für später ist:
> Standalone: Effekt grundsätzlich okay.
> Mobirise Publish: Struktur wird verändert oder reduziert.
> Deshalb scheitert es nicht primär an Firefox, Edge oder der Scroll-Logik.
Wenn ihr später wieder ran wollt, wäre der sinnvollste Weg wahrscheinlich nicht ein normaler Mobirise-Block, sondern eher ein externer eingebetteter Frame oder ein komplett separat geladenes HTML-Modul.
Code: Alles auswählen
<section data-bs-version="5.1" class="header09" id="sec" style="
--bg-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&q=80');
--glass-color: #0c2c68;
--glass-opacity-val: 0.4;
--glass-blur: 15px;
--line-color: #ffffff;
--line-width: 5px;
--bottom-color: #1e1e1e;
">
<div class="sticky-stage" id="stage">
<!-- Oberes Dreieck -->
<div class="half-top" id="halfTop">
<div class="glass" id="glass"></div>
<div class="solid-overlay" id="solidOverlay"></div>
<div class="content-top">
<h1><strong>Oben Links</strong></h1>
<p>Glasmorph · Hintergrundbild</p>
</div>
</div>
<!-- Unteres Dreieck -->
<div class="half-bottom" id="halfBottom">
<div class="img-reveal" id="imgReveal"></div>
<div class="glass-bottom" id="glassBottom"></div>
<div class="content-bottom">
<h2><strong>Unten Rechts</strong></h2>
</div>
</div>
<!-- Diagonale Linie als SVG (passt sich immer exakt an) -->
<script>
(function () {
var sec = document.getElementById('sec');
var halfTop = document.getElementById('halfTop');
var solidOverlay = document.getElementById('solidOverlay');
var imgReveal = document.getElementById('imgReveal');
var glassBottom = document.getElementById('glassBottom');
function update() {
var rect = sec.getBoundingClientRect();
var total = sec.offsetHeight - window.innerHeight;
var scrolled = -rect.top; // wie weit in die Sektion gescrollt
var p = Math.max(0, Math.min(1, scrolled / total)); // 0 → 1
// ── Bild-Position: scrollt von oben-links nach unten-rechts ──
// background-position: X% Y%
// Start: 50% 20% (leicht oben, wirkt als käme es von oben-links)
// Ende: 80% 80% (unten rechts)
var bpx = 30 + p * 40; // 30% → 70%
var bpy = 20 + p * 60; // 20% → 80%
var bp = bpx.toFixed(1) + '% ' + bpy.toFixed(1) + '%';
halfTop.style.backgroundPosition = bp;
imgReveal.style.backgroundPosition = bp;
// ── Oberes Dreieck: Bild schwindet, Vollton kommt ──
solidOverlay.style.opacity = p.toFixed(3);
// ── Glasmorph im oberen Dreieck: verschwindet mit dem Bild ──
// (optional: auch ausblenden damit Vollton sauber wirkt)
// glasmorph soll bleiben bis p>0.5, dann ausblenden
var glassOut = Math.max(0, Math.min(1, (p - 0.3) / 0.4));
document.getElementById('glass').style.opacity =
(parseFloat(getComputedStyle(sec).getPropertyValue('--glass-opacity-val') || 0.4) * (1 - glassOut)).toFixed(3);
// ── Unteres Dreieck: Bild erscheint ──
imgReveal.style.opacity = p.toFixed(3);
// ── Optional: Glasmorph unten auch einblenden ──
// glassBottom.style.opacity = (p * 0.3).toFixed(3);
}
var ticking = false;
window.addEventListener('scroll', function () {
if (!ticking) {
ticking = true;
requestAnimationFrame(function () { ticking = false; update(); });
}
}, { passive: true });
window.addEventListener('resize', update, { passive: true });
update();
})();
</script>
</div>
</section>Code: Alles auswählen
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #1e1e1e;
font-family: sans-serif;
}
.header09 {
position: relative;
height: 300vh;
}
.sticky-stage {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
}
.half-top {
position: absolute;
inset: 0;
background-image: var(--bg-image);
background-size: cover;
background-position: 50% 50%;
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.half-top .glass {
position: absolute;
inset: 0;
background-color: var(--glass-color, #0c2c68);
opacity: var(--glass-opacity-val, 0.4);
backdrop-filter: blur(var(--glass-blur, 15px));
-webkit-backdrop-filter: blur(var(--glass-blur, 15px));
}
.half-top .solid-overlay {
position: absolute;
inset: 0;
background-color: var(--bottom-color, #1e1e1e);
opacity: 0;
}
.half-bottom {
position: absolute;
inset: 0;
background-color: var(--bottom-color, #1e1e1e);
clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
display: flex;
align-items: flex-end;
justify-content: flex-end;
overflow: hidden;
}
.half-bottom .img-reveal {
position: absolute;
inset: 0;
background-image: var(--bg-image);
background-size: cover;
background-position: 50% 50%;
opacity: 0;
}
.half-bottom .glass-bottom {
position: absolute;
inset: 0;
background-color: var(--glass-color, #0c2c68);
opacity: 0;
}
.diagonal-line {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
}
.diagonal-line svg {
width: 100%;
height: 100%;
}
.content-top {
position: relative;
z-index: 5;
padding: 8vh 6vw;
color: #fff;
}
.content-top h1 {
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 700;
text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.content-top p {
margin-top: 1rem;
font-size: 1.1rem;
opacity: 0.8;
}
.content-bottom {
position: relative;
z-index: 5;
padding: 8vh 6vw;
color: #fff;
text-align: right;
}
.content-bottom h2 {
font-size: clamp(1.5rem, 4vw, 3rem);
font-weight: 700;
text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.after-section {
height: 80vh;
background: #1e1e1e;
display: flex;
align-items: center;
justify-content: center;
color: #444;
font-size: 1rem;
letter-spacing: 0.1em;
}
ChatGPT hat geschrieben:
Ich vergleiche kurz die veröffentlichte Seite mit dem funktionierenden Custom-HTML-Block. Der entscheidende Unterschied dürfte sein, dass dieser Block deinen Code fast unverändert ausliefert, während der andere Blocktyp HTML und Struktur beim Publish interpretiert und umschreibt.
Nachgedacht für 13s
Ja — und der Grund ist ziemlich wahrscheinlich genau dieser:
Der Custom HTML Block behandelt deinen Inhalt im Wesentlichen wie einen rohen Embed. Der andere Weg, den wir vorher probiert haben, läuft dagegen durch die normale Mobirise-Blocklogik mit Template-Verarbeitung, Inhaltsfeldern und Block-Rendering. Auf deiner veröffentlichten Seite sieht man bei den vorherigen Versuchen im ausgelieferten HTML praktisch nur den normalen Textinhalt wie „Es gibt noch keinen Inhalt.“, „Oben Titel“ und „Button Oben“ — aber nicht die erwartete Spezialstruktur mit deinen Layern, Sticky-Containern und JS-Hooks.
Das heißt in der Praxis:
Custom HTML Block: gibt dein HTML/CSS/JS weitgehend unverändert aus → deshalb funktioniert der Effekt.
Normaler Mobirise-Block / parametrischer Ansatz: Mobirise interpretiert, zerlegt oder rendert Teile neu → dadurch gehen genau die Strukturen kaputt, die dein Effekt braucht.
Warum du die Texte dort nicht bequem im Arbeitsbereich ändern kannst, ist dieselbe Ursache:
Der Custom-HTML-Block ist eben kein semantischer Mobirise-Inhaltsblock, sondern eher ein Code-Container. Mobirise erkennt darin deine Überschriften und Texte nicht als eigene editierbare Felder, sondern nur als HTML.
Die gute Nachricht ist:
Jetzt wissen wir wenigstens sicher, warum es dort läuft.
Der sauberste Weg wäre deshalb, auf diesem funktionierenden Custom-HTML-Block aufzubauen und die „editierbaren Inhalte“ anders zu lösen, zum Beispiel so:
1) Texte direkt im Code lassen und nur dort pflegen.
2) Oder den Block so umbauen, dass die Texte am Anfang des HTML gebündelt stehen und leicht auffindbar sind.
3) Oder wir bauen eine Art Mini-Konfigurationsbereich über data-... Attribute oben im <section> ein, damit du Texte, Farben, Bild-URL und Maße an einer Stelle ändern kannst, statt im ganzen Code suchen zu müssen.
Zum Beispiel statt Texten tief im HTML:
Code: Alles auswählen
<section class="header09" id="sec" data-top-title="Mobirise-Tutorials.com" data-top-text="Hintergrundbild" data-bottom-title="Mobirise-Tutorials.com">
und per JavaScript werden diese Werte dann in die sichtbaren Bereiche geschrieben.
Das ist zwar immer noch Code-Editor, aber deutlich angenehmer als an vielen Stellen im HTML zu ändern.
Mein Fazit:
Ja, ich erkenne den Unterschied.
Der Custom-HTML-Block funktioniert, weil Mobirise dort deinen Effekt nicht kaputtrendern muss. Der Nachteil ist die fehlende visuelle Bearbeitung im Arbeitsbereich.
Wenn du willst, baue ich dir als Nächstes genau dafür eine komfortable Custom-HTML-Version mit zentralem Konfigurationsbereich oben im Code — also weiterhin stabil, aber viel leichter zu pflegen.
ES GEHT !!!! Mitglieder in diesem Forum: Volker und 0 Gäste