使用 .animate 滚动文本

Question

我正在尝试创建类似 this 网页的内容，其中使用视频作为背景，当用户上下滚动时，text/background 视频会相应地发生变化以告知一个故事。

现在让视频播放是唯一有效的方法。视频将按预期加载和播放。然而 <div> 元素只是简单地一个接一个地堆叠在视频下方。当用户单击页面上的任意位置时，我希望文本从底部向上滚动，并在它们到达页面上与前一个文本相同的位置后完成滚动……但我不认为我m 正确使用 .animate() 函数。

这似乎相对容易做到，所以这是我公认的较弱的第一次尝试。

fiddle: http://jsfiddle.net/f06w76bv/

<!DOCTYPE html>
<html>
    <head>
    <style>
    .textConatiner{
        position: absolute;
        background-color: rgba(0, 0, 0, 0.9);
        color: #fff;
        left:10%;
    }
    video.bgvid{
        position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        background: url(TurbineStill.png) no-repeat;
        background-size: cover;
    }
    </style>
    </head>
    <body>
        <video autoplay loop poster="TurbineStill.png"  class="bgvid">
            <source src="Turbine.mp4" type="video/mp4">
        </video>    
        <section>
            <div class="textConatiner" id="one" style="top:50%;">
                <h2>Video Backgrounds One</h2>                          
            </div>      
        </section>      
        <section>
            <div class="textConatiner" id="two" style="top:150%;">
                <h2>Video Backgrounds One</h2>                          
            </div>      
        </section>
    </body> 
    <script src="js/jquery-1.11.1.js"></script>
    <script>
    $(document).ready(function () { 
        $(document).click(function () {
            var myDiv = $("#two");
            var scrollto = myDiv.offset().top + (myDiv.height() / 2);
            myDiv.animate({ scrollTop: scrollTo }, 1000);
        });
    });
    </script>
</html>

编辑通过将 position 添加到 div 容器中，我能够在页面加载时准确地获得原始 div 位置。但是，我仍然无法使用 animate 方法将第二个 div 从下方移动到页面中。

Answer 1

您的问题并不完全是新问题，它实际上只是一堆问题。

首先 - 对于您的定位，您将能够像使用任何 DOM 元素一样使用纯 CSS。例如，教程位于 W3Schools。

在 this Whosebug-Question 中回答了使用 JQuery 滚动到元素的问题。

可以找到另一个关于通过滚动移动视频的 Whosebug 问题 here。

使用 .animate 滚动文本

Use .animate to scroll text

html

javascript

css

video

jquery