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.
Thank you very much for your time and for reading me !
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.
HTML:
<!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:
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:
"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 !
