3D video background + sticky title

Hello everyone,

I created a page for my site with a 3D video in the background that playing when you scroll.

The problem is that I can’t do anything else, this video persists in the background. I would like to have section 0 at the top with another background, something completely different.
Then section 1 with the scrolling, the video etc.
Then section 2 with something else as well. But, I can’t do it, this video remains in the background and when I try to put things before or after it, it messes up everything…I think there is nothing complicated but I can’t find the solution, I don’t know if it’s an html problem or in my js script or CSS organization.

Besides, for the section 1 I got another problems, probably with the JS script the sticky titles are not replacing the previous one and titles are overlapping each other…

Capture d’écran 2022-08-04 à 01.53.22

HTML:Copy to clipboard

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Offres</title>
    <link rel="stylesheet" href="/pages/Offres.css">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet"> 
    <script src="https://kit.fontawesome.com/811bffdae6.js" crossorigin="anonymous"></script>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  </head>   
  <body>
  <!-- Section 0 - nos offres -->
        <div class="container2">
        </div>

  <!-- Section 1 - étude de marché -->
    <section class="container">
      <div class="content">
        <h1>L'étude de marché</h1>
        <h2>Pourquoi faire une étude de marché ?</h2>
        <p>blablabla</p>
      </div>
    </section>

      <section class="container">
        <div class="content">
        <h1>L'étude de marché</h1>
        <h2>Et si nous prenions de la hauteur ensemble ?</h2>
        <p>blablabla</p>
        </div>
      </section>

      <section class="container">
        <div class="content">
          <h1>Comment cela va se dérouler ? </h1>
          <p> contactez-nous et discutons de votre projet ! cela nous permettra de bien cimprendre l'objectif de cette etude de marché (est-ee que c'est vraiment utile ?).
             Nous verrrons ensuite, aprés quelques recherches préliminaires, si il y a un marché (nous ne vous ferons pas payé une étude "dans le vent") </p>
          <img src="/ressources/logo provisoire.png" alt="">
          <button> Contactez-nous</button>
        </div>
      </section> 
        
          <div id="set-height"></div>

      <video id="v0" tabindex="0", autobuffer preload>

        <source type="video/mp4" src="/ressources/VIDEO/Market study.mp4"></source>
      </video>

      
      <script src="/pages/sticky.js"></script>
      
    <script>

      enterView({
        selector: "section",
        enter: function(el) {
          el.classList.add("entered");
        }
      })
    
        var frameNumber = 0, // start video at frame 0
        // lower numbers = faster playback
        playbackConst = 1000,
        // get page height from video duration
        setHeight = document.getElementById("set-height"),
        // select video element         
        vid = document.getElementById('v0');
        // var vid = $('#v0')[0]; // jquery option

    // dynamically set the page height according to video length
    vid.addEventListener('loadedmetadata', function() {
    setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
    });


    // Use requestAnimationFrame for smooth playback
    function scrollPlay(){ 
    var frameNumber  = window.pageYOffset/playbackConst;
    vid.currentTime  = frameNumber;
    window.requestAnimationFrame(scrollPlay);
    }

    window.requestAnimationFrame(scrollPlay);

        </script>
  <!-- Section 2 - prévi -->

      
    <section class="previ">
        <div class="previcontent">
          <h1>Le prévisionnel financié</h1>
          <h2>Qu'est ce qu'un prévisionnel financié ?</h2>
          <p>blablabla</p>
        </div>
      </section>

      <section class="previ">
        <div class="previcontent">
          <h1>Le prévisionnel financié</h1>
          <h2>Pourquoi faire un prévisionnel financié ? ?</h2>
          <p>blablabla</p>
        </div>
      </section>

      <section class="previ">
        <div class="previcontent">
          <h1>Le prévisionnel financié</h1>
          <h2>Comment cela va se dérouler</h2>
          <p>blablabla</p>
        </div>
      </section>

      <section class="previ">
        <div class="previcontent">
          <h1>Le prévisionnel financié</h1>
          <h2>Avec Kibyon, gardez un oeil sur l'avenir</h2>
          <button> Contactez-nous</button>
        </div>
      </section>


</body>
</html>

CSS:Copy to clipboard

body{
    font-family: "poppins", sans-serif;
    background-color: black;
    margin: 0;
    padding: 0;
}

/* Section 0 */
.container2{
    width: 100%;
    height: 100vh;
    background-image: white, url(/ressources/sharon-pittaway-N7FtpkC_P7o-unsplash.jpg);
    background-position: center;
    background-size: cover;
}

/* Section 0 fin */

#v0{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
}

#set-height{
    display: block;
}

.container{
    z-index: 1;
    position: sticky;
    padding: 3em;
    top: 0px;

}

.content{
    position: sticky;
    position: -webkit-sticky;
    width: 100%;
    top: 33,3%;
    color: white;
}

.content h1 {
    font-size: 3em;
    background: black;
    display: inline-block;
    padding: 10px 15px;
    border-radius: 20px;
    margin: 0;

}

p {
font-size: 1.5em;
}

section:nth-of-type(1) {
    height: 2200px;
}

section:nth-of-type(2) {
    height: 1300px;
}

section:nth-of-type(3) {
    height: 800px;
}

/* à suivre la mise en forme de l'apparition du texte */

.entered {
        -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
                animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-8-3 17:12:26
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
 @-webkit-keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }

  .content button{
    margin-top: 20px;
    padding: 15px 20px;
    font-size: 15px;
    border-radius: 10px;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: inherit;
    color: white;
    border: 1px solid white;
  }
  .content button:hover {
    background-color: white;
    transition: background-color 0.5s;
    border: 1px solid white;
    color: #0163ac;
    font-weight: bold;
 }

  /* Section previ fi */

  .previ{
    background-image: linear-gradient(to right top, #2c71f6, #0d6fe4, #006cd2, #0068bf, #0163ac, #0162acca,#0162ac8e, #0162ac48, black);
    position: relative;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .previ #text{
    position: absolute;
    color: white;
    font-size: 2vw;
    text-align: center;
    line-height: 0,55em;
  }

  .previ #text span{
    font-size: 3vw;
    letter-spacing: 2px;
    font-weight: 400;
  }

JavaScript:Copy to clipboard

"use strict";!function(e){"function"==typeof define&&define.amd?define(e):"undefined"!=typeof module&&module.exports?module.exports=e():window.enterView=e.call(this)}(function(){var e=function(e){function n(){g=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(e){return setTimeout(e,1e3/60)}}function t(){if(h&&"number"==typeof h){var e=Math.min(Math.max(0,h),1);return q-e*q}return q}function i(){var e=document.documentElement.clientHeight,n=window.innerHeight||0;q=Math.max(e,n)}function o(){y=!1;var e=t();A=A.filter(function(n){var t=n.getBoundingClientRect(),i=t.top,o=i<e;if(o&&!n.__enter_view){if(m(n),_)return!1}else!o&&n.__enter_view&&w&&w(n);return n.__enter_view=o,!0}),A.length||window.removeEventListener("scroll",r,!0)}function r(){y||(y=!0,g(o))}function u(){i(),o()}function f(e){for(var n=e.length,t=[],i=0;i<n;i+=1)t.push(e[i]);return t}function c(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return"string"==typeof e?f(n.querySelectorAll(e)):e instanceof NodeList?f(e):e instanceof Array?e:void 0}function d(){A=c(l)}function a(){window.addEventListener("resize",u,!0),window.addEventListener("scroll",r,!0),u()}function s(){var e=l&&m;e||console.error("must set selector and enter options"),n(),d(),a(),o()}var l=e.selector,m=e.enter,w=e.exit,v=e.offset,h=void 0===v?0:v,p=e.once,_=void 0!==p&&p,g=null,y=!1,A=[],q=0;s()};return e});

Thank you very much for your time and for reading me !

do you have a live example of your code? maybe on replit or codepen? it has a certain complexity and seeing your live version would be better

hey ilenia, thank you for your reply ! I just did it but I don’t succeed to embed my video… so you will not be able to see where it stops etc… you know how to embed it from google drive to codeine ? the I use the html code from google it doesn’t work… there is the link : https://codepen.io/codeurdeb/pen/oNqJMXN

What do you use to embed it locally? You can’t link to a video from google drive

its a video that I did myself on blender so its just stored on my computer and I use maamp in local before releasing my website on hostinger

It would be pretty difficult to help with your code without the main issue. Maybe you can find a different video to embed as placeholder

yeah true, the problem is that the framed are calculated too appear on the good moment, what if I give you the video files ? maybe you could run it on your visual studio code to see ?
here is the google drive folder : website - forum help - Google Drive

just need to change the SRC…
I’m sorry, so thankful that you help me, just don’t know how to make it the easiest for you…

That’s a bit much as a request, I can’t set up anything locally

yeah I totally understand ! don’t know what to do…

This is the culprit. vh is viewport height and setting it to 100 will cause it to take up the entire screen height.

thank you for your answer ! the height : 100vh is for section 0 but the video is on section 1.

its set with that class in css :

#v0{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
}

#set-height{
    display: block;
}

that refer to the js script :

<script>

      enterView({
        selector: "section",
        enter: function(el) {
          el.classList.add("entered");
        }
      })
    
        var frameNumber = 0, // start video at frame 0
        // lower numbers = faster playback
        playbackConst = 1000, 
        // get page height from video duration
        setHeight = document.getElementById("set-height"), 
        // select video element         
        vid = document.getElementById('v0'); 
        // var vid = $('#v0')[0]; // jquery option

    // dynamically set the page height according to video length
    vid.addEventListener('loadedmetadata', function() {
    setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
    });


    // Use requestAnimationFrame for smooth playback
    function scrollPlay(){  
    var frameNumber  = window.pageYOffset/playbackConst;
    vid.currentTime  = frameNumber;
    window.requestAnimationFrame(scrollPlay);
    }

    window.requestAnimationFrame(scrollPlay);

        </script>```

Nobody can help me ? :slight_smile:

once you can provide a live example of your issue it’s going to be much more possible to help you :slight_smile: