滚动显示html5 / youtube视频

Question

我有一个视频（目前是嵌入式YT视频，但可能是普通的mp4 / HTML5），我希望在滚动中显示。因此，当滚动时，文本内容应该进入顶部，然后视频应该显示，用户应该能够按Play - 它可能是某种视差效果，但我找不到类似的东西......任何其他/更好的解决方案非常受欢迎！

编辑：这是我想要实现的效果 - 也许有一些ScrollMagic解决方案..？ https://www.invisionapp.com/studio

笔：https://codepen.io/anon/pen/wjMwqE

.container {
  width: 1200px;
  height: 600px;
  margin: 0 auto;
  background: lightgrey;
  padding: 100px;
}

.video-container {
  width: 800px;
  background-color: lightblue;
  margin: 100px auto;
  position: relative;
}

.text-container {
  width: 100%;
  height: 100%;
  background-color: rgba(234, 654, 123, .3);
  position: absolute;
  top: 0;
  left: 0;
}

.text-container-content {
    text-align: center;
    margin: 150px auto;
}

<div class="container">
  <div class="video-container">
    <iframe width="800" height="415" src="https://www.youtube.com/embed/HECa3bAFAYk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    <div class="text-container">
      <div class="text-container-content">
        <h3>Title here</h3>
        <p>Subtitle here</p>
        <button>Button</button>
      </div>
    </div>
  </div>
</div>

（“重复”答案没有类似的视频示例）

Answer 1

试着去理解我在下面的小提琴里做了些什么。它没有它看起来那么难。

您基本上只是获取height元素的.overlay，然后在用户滚动时使用scrollTop()函数跟踪滚动位置。

  

scrollTop（）： 获取匹配元素集中第一个元素的滚动条的当前垂直位置，或者设置滚动条的垂直位置每个匹配的元素。

当scrollTop()到达overlayHeight时，请显示button。

同时继续添加marginTop: scrollTop()，直到上面的句子为true。因此，.show-when-visible元素保持可见，而不是位于document的顶部。

请注意，以下代码段是一个基本演示，展示了如何实现 你想要什么。当然，您可以将event添加到buttonShowWhenVisible。其中打开一个带有相应视频的弹出窗口/ iframe。即：

buttonShowWhenVisible.click(function() {
    // code the show the video
});

在整页模式下打开以下代码段

$(document).ready(function() {
  
  var win = $(window); // Window
  var content = $(".content") // Content jquery element
  var overlay = $(".overlay"); // Overlay jquery element
  var buttonShowWhenVisible = $(".show-when-visible"); // This is the button which will fade in
  var showAfterScroll = $(".show-after-scroll"); // On scroll fade in
  
  var overlayHeight, scrollTop, stopMargin, opacityOut, opacityIn;
  
  win.scroll(function(e) {
    
    scrollTop = win.scrollTop();
    overlayHeight = overlay.outerHeight(); // The height of the overlay
    stopMargin = false;
    opacityOut = (1 - scrollTop / overlayHeight);
    opacityIn = (scrollTop / overlayHeight);
    
    if(opacityOut > 0.00)
      overlay.css("opacity", opacityOut);
    
    if(opacityIn < 1)
      showAfterScroll.css("opacity", opacityIn);
    
    if(scrollTop >= overlayHeight) {
      stopMargin = true;
      buttonShowWhenVisible.fadeIn();
    } else {
      buttonShowWhenVisible.fadeOut();
    }
    
    // Keep adding margin on top so that the element stays in the view until it reached overlayheight
    if(!stopMargin) {
      content.css({
        marginTop: scrollTop
      });
    }
    
  });
  
});

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}

h1 span {
  color: orange;
}

.content {
  min-height: 2000px;
}

.overlay {
  background-color: rgba(0, 0, 0, .8);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  color: #fff;
  padding: 40px 0;
  text-align: center;
  z-index: 9999;
}

.show-after-scroll {
  text-align: center;
  padding: 60px 0;
  opacity: 0;
}

.btn-lg {
  background-color: orange;
  color: #fff;
  font-size: 12px;
  padding: 20px 80px;
  border-radius: 40px;
  border: none;
}

.show-when-visible {
  display: none;
}

.overlay p {
  max-width: 600px;
  font-size: 44px;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="overlay">
    <h1>Studio<span>.</span></h1>
    <p>This is some long big text saying hello</p>
    <br/><br/><br/>
    <button class="btn-lg">REQUEST EARLY ACCESS</button>
  </div>
  <div class="show-after-scroll">
    <p>There will a button appear when you scroll down, try it out!</p>
    <button class="btn-lg show-when-visible">BONJOUR</button>
  </div>
</div>

您可以在此处播放代码段：https://codepen.io/richardmauritz/pen/QrKvBQ?editors=0010