Wie würde ich mehrere Homepageabschnitte erstellen, alle mit Parallax Hintergrundbildern und einer schrägen Kante?Parallax div Abschnitte mit einer Neigung
Dies ist der Entwurf, den ich zu erstellen bin versucht: http://prnt.sc/ea0avx
Wenn es hilft, ich baue in Wordpress Avada Thema als meine Basis.
https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms
Die Autorendetails wie CSS so schreiben, dass die Abschnitte angewinkelt Grenzen haben.
Sie können die abgewinkelten Divs einfach umwandeln und über den Bildschirm legen.
<style>
body {
margin: 0;
}
.angle {
margin: -75px;
top: 350px;
height: 400px;
background: green;
transform: rotate(-5deg);
z-index: 5;
}
.revAngle {
margin: -75px;
width: 150%;
height: 400px;
background: green;
transform: rotate(5deg);
z-index: 5;
}
.strait {
height: 500px;
background: pink;
}
</style>
<html>
<div class="strait"></div>
<div class="angle"></div>
<div class="strait"></div>
<div class="revAngle"></div>
<div class="strait"></div>
</html>Um einen Parallaxe Hintergrund-Effekt Gebrauch etwas in diesen Codezeilen zu erreichen.
Beispiel:
.parallaxdiv {
/* The image used */
background-image: url("img_parallax.jpg");
/* The Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Ich bin nicht ganz sicher, was Sie von einer schrägen Kante bedeuten, aber man kann versuchen CSS Clip-Pfade zu verwenden, eine schräge beeinflussen zu erreichen.
Ein Beispiel:
.img {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}
Bitte stimmen, wenn es hilft!