Question

我正在尝试在视频上创建类似于qz.com的滚动的幻灯片动画效果。 https://qz.com/

你知道如何使用jquery实现这一目标吗？

Answer 1

以下是一个例子：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    var $video = $('video');
    var $window = $(window);
    var totalTime = 6; // total time you want to play

    $(window).bind('scroll', function () {

        if($video[0].getBoundingClientRect().top < $window.height() && $video[0].getBoundingClientRect().bottom > 0) {

            var progress = 100 - 100 / ($window.height() + $video.height()) * ($video[0].getBoundingClientRect().top + $video.height());
            $video[0].currentTime = Math.round(totalTime / 100 * progress);
            $video[0].paused = true;

        }

    });
</script>

调整totalTime以控制可查看的秒数。基本上，滚动功能会检查视频是否在视口中可见，如果是，则计算0到100％之间的进度，然后将用于计算当前时间。

电影胶片动画类似于qz.com

1 个答案: