jquery - 在滚动上显示 html5/youtube 视频

Question

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

编辑:这是我想要实现的效果 - 也许有一些 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

试着理解我在下面的 fiddle 中做了什么。它并不像看起来那么难。

您基本上所做的就是获取 .overlay 元素的 height ，然后当用户滚动时使用 scrollTop() 跟踪滚动位置。功能。

scrollTop(): Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

当scrollTop()达到overlayHeight时，显示按钮。

还要继续添加marginTop:scrollTop()，直到上面的句子为true。这样 .show-when-visible 元素就保持可见，而不是位于文档的顶部。

---

请注意，下面的代码片段是一个基本演示，展示了如何实现 你想要什么。当然，您可以将事件添加到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