Liste der Anhänge anzeigen (Anzahl: 1)
[Gelöst] Parallax ohne Javascript in eigenem Layoutbereich
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>
Anhang 15366
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
Parallax ohne Javascript in eigenem Layoutbereich
Eigentlich so wie auf der original Seite. Wo habe ich den Fehler den reingebracht?
Gesendet von iPhone mit Tapatalk
Parallax ohne Javascript in eigenem Layoutbereich
Wie bereits weiter oben geschrieben, wenn ich das CSS so übernehme und die beiden div Elemente alleine in den body-Bereich packe (in externem Editor erstellt) funktioniert alles so wie beim Original.
Gesendet von iPhone mit Tapatalk
