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…

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:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.