Das ist noch nicht die Endfassung !!!
Code: Alles auswählen
<section data-bs-version="5.1" class="header1 custom-diagonal-engine" group="Headers" id="diag-engine-final-v4">
<mbr-parameters>
<header>DIAGONALE FARBEN</header>
<input type="color" title="Farbe Oben" name="colorTop" value="#0c2c68">
<input type="color" title="Farbe Unten" name="colorBottom" value="#22a5e5">
<header>TRENNLINIE</header>
<input type="color" title="Linienfarbe" name="lineColor" value="#ffffff">
<input type="range" title="Liniendicke" name="lineWidth" value="1" min="0" max="30" step="1">
<header>CONTENT 1 (Unten/Rechts)</header>
<input type="range" inline title="X1" name="contentX1" min="0" max="100" value="72">
<input type="range" inline title="Y1" name="contentY1" min="0" max="100" value="70">
<input type="checkbox" title="Button Zeigen" name="showButton1" checked>
<header>CONTENT 2 (Oben/Links)</header>
<input type="range" inline title="X2" name="contentX2" min="0" max="100" value="27">
<input type="range" inline title="Y2" name="contentY2" min="0" max="100" value="30">
<input type="checkbox" title="Titel 2" name="showTitle2" checked>
<input type="checkbox" title="Text 2" name="showText2" checked>
<header>BACKDROP</header>
<input type="image" title="Hintergrundbild" name="bgImg" value="file:///F:/mobirise%20Bl%C3%B6cke/demo7/assets/images/mbr-1920x1080.png">
</mbr-parameters>
<div class="diagonal-viewport">
<div class="fixed-img-layer" mbr-style="{'background-image': 'url(' + bgImg + ')'}"></div>
<div class="diag-engine-layer layer-top" style="background-color: {{colorTop}};"></div>
<div class="diag-engine-layer layer-bottom" style="background-color: {{colorBottom}};"></div>
<div class="diagonal-line-svg">
<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 class="content-z-wrapper group-1" style="--posX: {{contentX1}}%; --posY: {{contentY1}}%;">
<div class="movable-content">
<h1 class="mbr-section-title mbr-fonts-style mb-3 display-1" mbr-theme-style="display-2"><b>niederastroth.de</b></h1>
<p class="mbr-text mbr-fonts-style mb-4 display-7" mbr-theme-style="display-7">Der mit den Mobirise Blöcken...</p>
<div class="mbr-section-btn" mbr-if="showButton1" mbr-buttons mbr-theme-style="display-4"><a class="btn btn-black" href="#" data-app-placeholder="Type Text">Info</a></div>
</div>
</div>
<div class="content-z-wrapper group-2" style="--posX: {{contentX2}}%; --posY: {{contentY2}}%;">
<div class="movable-content">
<h2 class="mbr-section-subtitle mbr-fonts-style mb-2 display-2" mbr-if="showTitle2" mbr-theme-style="display-2"><b>Overlay Block</b></h2>
<p class="mbr-text mbr-fonts-style display-7" mbr-if="showText2" mbr-theme-style="display-7">Diagonal</p>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const engine = document.querySelector('.custom-diagonal-engine');
if (!engine) return;
const tL = engine.querySelector('.layer-top');
const bL = engine.querySelector('.layer-bottom');
const sync = () => {
const rect = engine.getBoundingClientRect();
const scrollH = engine.offsetHeight - window.innerHeight;
if (scrollH <= 0) return;
const p = Math.max(0, Math.min(1, -rect.top / scrollH));
if (tL) tL.style.opacity = p.toFixed(3);
if (bL) bL.style.opacity = (1 - p).toFixed(3);
};
window.addEventListener('scroll', sync, { passive: true });
window.addEventListener('resize', sync);
sync();
});
</script>
</section>
Code: Alles auswählen
position: relative;
height: 300vh !important;
overflow: visible;
.diagonal-viewport {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
}
.fixed-img-layer {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-attachment: fixed;
z-index: 1;
}
.diag-engine-layer {
position: absolute;
inset: 0;
z-index: 2;
will-change: opacity;
}
.layer-top {
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.layer-bottom {
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.diagonal-line-svg {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
}
.diagonal-line-svg svg {
width: 100%;
height: 100%;
}
.content-z-wrapper {
position: absolute;
inset: 0;
pointer-events: none;
}
.group-1 {
z-index: 15;
}
.group-2 {
z-index: 12;
}
.movable-content {
pointer-events: auto;
position: absolute;
left: var(--posX);
top: var(--posY);
transform: translate(-50%, -50%);
width: 80%;
max-width: 600px;
text-align: center;
color: #ffffff;
}
.mbr-section-title, .mbr-section-subtitle, .mbr-text {
color: #ffffff;
}
Naja ist jetzt auch kein standard Mobirsie Block mehr wie die normalen Header Blöcke, hält sich aber an die css und übernimmt somit auch die Werte aus den mbr-parameters - was genau das Problem im einzelen war kann ich nicht sagen, weil es hat ja überall gehakt eigentlich - aber egal es läuft jetzt
Und wenn du die KI fragst bekommst nur so was in der Art an Antworten :
Ganz ehrlich? Wir haben hier gegen zwei „Geister“ in der Mobirise-Engine gekämpft. Es war eine Mischung aus der Art, wie Mobirise Pfade verwaltet, und wie der Code-Editor mit dem internen Asset-Manager kommuniziert.
lol das nennt man sich raus reden
