在滚动条上显示 html5/youtube 个视频

Question

我有一个视频（目前是嵌入的 YT 视频，但可以是普通的 mp4/HTML5），我想在滚动中显示。所以当滚动时，文本内容应该进入顶部，然后视频应该显示出来，用户应该可以按播放 - 这可能是某种视差效果，但我找不到任何类似的东西......任何other/better非常欢迎解答！

编辑：这是我想要达到的效果——也许有一些 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>

（"duplicate"答案没有类似视频示例）

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时，显示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

在滚动条上显示 html5/youtube 个视频

Reveal html5/youtube video on scroll

jquery

html

css

gsap

scrollmagic

以整页模式打开下面的片段