Video als hintergrund parallax CSS

Ich bin mehr backend-Mann als frontend, also, wenn Sie denken, dass meine Frage als dummy, sorry dafür, aber ich konnte nicht finden die Antwort 🙂

Mein Ziel ist es, hintergrund-video mit parallax-Effekt mit CSS. Im Allgemeinen gelang es mir, das zu tun, aber das Ergebnis ist nicht gut genug. Weil aus irgendeinem Grund das video welches im hintergrund läuft, ist unter aller Abschnitte, statt in nur einem Bereich, wo es sein soll...

HTML:

<div class="fullScreenPhoto"></div>
<div class="video-container">
  <video autoplay poster="" class="video-parallax" loop muted>
    <source src="https://showbox-tr.dropbox.com/transcode_video/t/1qz2fy47wt9ay7i/header_background.mp4" type="video/webm">
    <source src="https://showbox-tr.dropbox.com/transcode_video/t/1qz2fy47wt9ay7i/header_background.mp4" type="video/mp4">
  </video>
</div>

<div class="fullScreenPhoto2"></div>

<div class="fullScreenPhoto3"></div>

CSS:

body{
  margin: 0;
  padding:0
}

.fullScreenPhoto{
  width: 100%;
  margin:0;
  height:300px;
  background-color: red;
}

.fullScreenPhoto2{
  width: 100%;
  height:300px;
    margin:0;
  background-color: green;
}
.fullScreenPhoto3{
  width: 100%;
    margin:0;
  height:300px;
  background-color: yellow;
}

video {
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}

.video-container {
    height: 600px;
}

.video-parallax {
    -webkit-transition-position: fixed;
    position: fixed;
}

Hier, die Sie anpassen können:
Fiddle

wo habe ich dupliziert meine Frage. Wenn Sie verbergen ein Teil, oder ändern der z-index für die höheren, Sie sind in der Lage, um zu sehen, dass video ist alles über die Seite...

BTW. Ich weiß über das plugin jQuery -> https://github.com/linnett/backgroundVideo, aber ich möchte nur CSS.

  • im nicht sehen etwas, was in Ihrer fiddle das entspricht parrallax?
InformationsquelleAutor dmoczydlowski | 2017-01-15
  1. 1

    Wenn Sie möchten, video-hintergrund nur für dieses eine div dann kann man sich nicht parallax-Effekt, da brauchst du dann entfernen position: fixed für .video-parallax (also alle Stile, die für diese Klasse so wie ich das sehe), und ändern Sie die Stile für video zu, dass:

    video {
    margin:0 auto;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background-size: cover;
    transition: 1s opacity;
}
    • Mein Ziel zu haben, parallax-Effekt, also basierend auf was Sie schrieb, ist es nicht möglich parallax-Effekt in dieser Art und Weise mit CSS? Ich habe ein LP mit vielen Bildern und Videos angezeigt, bevor das Bild geladen ist..
    • Wenn Sie wollen, um Parallaxe-Effekt für dieses video, dann muss es mehr als nur dieses eine div (sogar die ganze viewport) - vermeidet es zu zeigen, weißen Raum um video, wenn Sie die Seite scrollen.
    InformationsquelleAutor Joint
  2. 1

    Müssen Sie eine css - height für die video element, oder auf das element selbst, wie <video height="400">. Aktualisiert Fiddle.

    • Es funktioniert nicht, hat sich nichts geändert.
    InformationsquelleAutor Cooleronie
  3. 1

    Können Sie ganz einfach tun dies, wie Sie mit Bild-Parallaxe.

    HTML:

    <div class="ParallaxVideo">
  <video autoplay muted loop>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  </video>
  <h1>Video Background</h1>
</div>

    Die CSS -

    .ParallaxVideo{ 
    height: 300px;
    padding-bottom: 50px;
    padding-top: 50px; 
}
.ParallaxVideo video{ 
    min-width: 100%;
    position: fixed;
    top:0;
    z-index: -999;
}
.ParallaxVideo h1 {
  color: #fff;
  font-size: 76px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

    Können Sie auch einen Blick auf diese Anleitung für weitere details:

    https://codeconvey.com/video-parallax-background-using-css3/

    Hier ist demo-version:

    http://codeconvey.com/Tutorials/VideoParallaxBackground/

    InformationsquelleAutor ashfaq ahmed
Schreibe einen Kommentar