TranslateZ слайдер глубины изображения - PullRequest
Новая
       57

TranslateZ слайдер глубины изображения

0 голосов
/ 13 января 2019

У меня вопрос по html / javascript.

Мне нужен проект, в котором вы, кажется, прокручиваете подробно, как вы видите на этом сайте: https://www.theweeknd.com/

Я могу добиться этого, если есть пустая страница, но как только я помещаю видео над ним, оно больше не работает

Вот мой HTML-код: 

    <header>
    <div class="left">
        <h1><a href="http://www.foteinimakri.com">Foteini Makri</a></h1>
    </div>
    <div class="logo">
            <a class="active" href="index.html">Home</a>
            <a href="projects.html">Works</a>
    </div>
    <div class="menu">
        <a href="about.html">About me</a>
    </div>
</header>
 <section id="video">
    <video class="video" controls style="width:100%;">
      <source src="playme/playme.mp4" type="video/mp4">
      <source src="playme/playme.ogg" type="video/ogg">
      Your browser does not support the video tag.
    </video>
    <div class="playpause"></div>
</section>

<div id="content">
<div id="viewport">

    <div class="frame image" style="-webkit-transform: translateZ(-6000px);-moz-transform: translateZ(-6000px);">
      <a href="project7.html">  <img src="command\1.JPG"> </a>
    </div>
    <div class="frame image" style="-webkit-transform: translateZ(-5000px);-moz-transform: translateZ(-4000px);">
      <a href="project5.html">  <img src="command/2.JPG"> </a>
    </div>
    <div class="frame image" style="-webkit-transform: translateZ(-4000px);-moz-transform: translateZ(-3000px);">
      <a href="project3.html">  <img src="command/3.JPG"></a>
    </div>
    <div class="frame image" style="-webkit-transform: translateZ(-3000px);-moz-transform: translateZ(-2000px);">
      <a href="project4.html">  <img src="command/4.JPG"> </a>
    </div>

</div>

CSS: 

    #content {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    /* if smaller content box is used and centering is needed: */
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);


}
#viewport {
  position: absolute;
  top: 780px;
  -webkit-perspective:300px;
  -moz-perspective:300px;
  -webkit-perspective-origin:50% 50%;
  -moz-perspective-origin:50% 50%;
  -moz-transform-style: preserve-3d;
  width:100%;
}



.frame{
    position:absolute;
    width:100%;
    height:100%;
    -moz-transform-style: preserve-3d;
}
.frame.text {
    text-align:center;
    -moz-transform-style: preserve-3d;
}
.frame.image {
    text-align:center;
}

И JavaScript: 

    var lastPos = document.body.scrollTop || document.documentElement.scrollTop,
    perspective = 300,
    zSpacing = -1000;
    zVals = [],
    $frames = $(".frame"),
    frames = $frames.toArray(),
    scrollMsg = document.getElementById("instructions-overlay");
    numFrames = $frames.length;

for(var i=0; i<numFrames;i++) { zVals.push((numFrames-i)*zSpacing);}

$(window).scroll(function(d,e) {
  var top = document.body.scrollTop || document.documentElement.scrollTop,
      delta = lastPos - top;
  lastPos = top;
  for(var i=0;i<numFrames;i++){
    var newZVal = (zVals[i]+=(delta*-1.5)),
        frame = frames[i],
        transform = "translateZ("+newZVal+"px)",
        opacity = newZVal < 200 ? 1 : 1 - parseInt((newZVal-200)/(perspective-200)*10)/10,
        display = newZVal > perspective ? "none" : "block";
    frame.setAttribute("style",
      "-webkit-transform:"+transform+";-moz-transform:"+transform+";display:"+display+";opacity:"+opacity);
    if(scrollMsg && zVals[numFrames-1] > 200) {
      scrollMsg.parentNode.removeChild(scrollMsg);
      scrollMsg = null;
    }
  }
});
...