Hallo liebe Community,
mir ist auch klar, dass das Thema Parallaxer Effekt bei manchen ziemlich abgedroschen ist.
Ich versuche aber gerade einen solchen Effekt ganz dezent einzusetzen, aber ohne JavaScript nur mit reinem CSS.
Die Seite wo ich ein passendes Beispiel entdeckt habe findet sich hier.
Mittels eigenem Layoutbereich wird mir dieser Code vor dem umschließenden Element erzeugt:
HTML-Code:
<div class="custom">
<div id="parallax">
<div class="inside">
<div id="kontakt-33" class="mod_article first last block">
<h1 id="down" class="ce_headline first">Überschrift 1</h1>
<div class="ce_text block">
<p>
</div>
<h2 id="down" class="ce_headline">Überschrift 2</h2>
<div class="ce_text last block">
<p>
</div>
</div>
<div class="headerpicture">
<img class="logo" src="" alt="">
</div>
</div>
</div>
</div>
screenshot.jpg
Das Problem ist nun, dass mir nur der .mod_article angezeigt wird.
Ich habe mittels Dreamweaver die HTML und CSS Datei des Originals übernommen, da stimmt die Darstellung, sobald ich die von Contao erzeugten div-Klassen: .custom und .inside, sowie die div-id #parallax einsetze wird mir das Bild nicht mehr angezeigt.
Mein Problem ist, dass das ganze lokal unter Xampp läuft.
Die CSS Datei sieht so aus:
HTML-Code:
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
font-size: 120%;
line-height: 1.625;
font-family: 'Whitney SSm A', 'Whitney SSm B', Helvetica Neue, Helvetica, Arial, sans-serif;
-webkit-perspective: 1px;
-moz-perspective: 1px;
-ms-perspective: 1px;
-o-perspective: 1px;
perspective: 1px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
body * {
-webkit-perspective: 1px;
-moz-perspective: 1px;
-ms-perspective: 1px;
-o-perspective: 1px;
perspective: 1px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
p {
margin-bottom: 1em;
}
hr {
margin: 4em 0;
}
.mod_article {
padding: 20px 20%;
position: relative;
top: 60%;
background-color: white;
}
.headerpicture {
position: absolute;
top: -20%;
left: 0;
width: 100%;
height: 60%;
padding-top: 20%;
background: url(files/Bildmaterial/Jellyfish.jpg) no-repeat 50% 50%;
background-size: cover;
-webkit-transform: translateZ(-0.9px) scale(1.9);
-moz-transform: translateZ(-0.9px) scale(1.9);
-ms-transform: translateZ(-0.9px) scale(1.9);
-o-transform: translateZ(-0.9px) scale(1.9);
transform: translateZ(-0.9px) scale(1.9);
z-index: -900;
text-align: center;
}
.logo {
width: 100%;
max-width: 300px;
z-index: 0;
}
Vielen Dank schonmal für Eure Hilfe und allen ein schönes und erholsames WE
[Gelöst] Parallax ohne Javascript in eigenem Layoutbereich
Zitieren
.
!
Zitat von Stefan01
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Lesezeichen