javascript - 试图在滚动视频上获得模糊效果

问题描述

我发现了一个很棒的小脚本，可以模糊滚动上的背景图像。希望我可以让它在背景视频上工作。它确实如此。但它似乎在某种程度上倒退了。视频首先正确加载。当您开始滚动时，它会立即消失，然后开始淡入而不是淡出。不确定如何或是否可以使其正常工作。在背景图像上似乎很好。但不是在视频上。

(function() {
        'user strict';
        var hello = document.getElementById('homeheadline'),
            blur = document.getElementById('video'),
            windowHeight = window.innerHeight,
            isScroll = false;

        var latestScroll = 0;
        var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

        window.requestAnimationFrame = requestAnimationFrame;

        var init = function() {
            window.addEventListener('scroll', function(){
                latestScroll = window.scrollY;
                checkScroll();
            }, false);
        }

        var checkScroll = function() {
            if(!isScroll) {
                window.requestAnimationFrame(update);
            }
            isScroll = true;
        }

        var update = function() {
            currentScroll = latestScroll;
            isScroll = false;
            var helloScroll = currentScroll / 4,
                blurScroll = currentScroll * 2;

            hello.style.transform = 'translate3d(0, ' + helloScroll + 'px, 0)';
            blur.style.opacity = (blurScroll / windowHeight - .1).toFixed(2);
            if(blur.style.opacity >= 1) {
                blur.style.opacity = 1;
            }
        }

        init();
    })();

.jumbotron {
    min-height: 60vh;
    width: 100%;
    overflow: hidden;
    position: relative;
    top: 0;
}

.jumbotron .video-container {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}

video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
    object-fit: cover;
    opacity: 1;
}

@media (min-width:768px) {
    video {
        height: auto;
        width: 100%;
        overflow: hidden;
    }
}

.jumbotron .container-fluid {
    z-index: 2;
    position: relative;
    top: 30%;
    padding: 0;
    margin: 0;
}

@media (min-width:768px) {
    .jumbotron .container-fluid {
        z-index: 2;
        position: relative;
        top: 40%;
        padding: 0;
        margin: 0;
    }
}

.jumbotron .alternate {
    background-color: rgba(50,88,125,.4) !important;
    background-blend-mode: multiply;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    margin: 20rem 0 15rem;
}

.jumbotron .alternate h1 {
    color: #fff;
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 700;
}

.jumbotron .alternate h1:after {
    display: block;
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 90%;
    height: 4px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#32587d+0,b5c1af+33,c88362+66,e0c094+100 */
    background: rgb(50,88,125); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(50,88,125,1) 0%, rgba(181,193,175,1) 33%, rgba(200,131,98,1) 66%, rgba(224,192,148,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(50,88,125,1) 0%,rgba(181,193,175,1) 33%,rgba(200,131,98,1) 66%,rgba(224,192,148,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(50,88,125,1) 0%,rgba(181,193,175,1) 33%,rgba(200,131,98,1) 66%,rgba(224,192,148,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32587d', endColorstr='#e0c094',GradientType=1 ); /* IE6-9 */
}

.jumbotron .alternate p {
    color: #fff;
    text-transform: none;
    font-size: 1.25rem;
    font-weight: 400;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="jumbotron jumbotron-fluid">
    <div class="video-container">
      <video id="video" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" autoplay loop>
        <source src="https://www.thepixelpixie.com/px-c0nt3n5/uploads/2021/07/Vienna-13394.mp4" type="video/mp4">
      </video>
    </div>
    <div class="container-fluid hero-text d-flex align-items-center">
      <!--<div class="row">
                    <div class="col-md-5">
                        <h1>Meet Us<br />at the Mall.</h1>
                        <p>We're redefining what the mall means to our communities by adding in-demand retail, dining, entertainment, and other mixed-uses. See what else is in store. Meet us at the mall.</p>
                    </div>
                </div>-->
      <div id="homeheadline" class="row alternate w-100 justify-content-center homeheadline">
        <div class="col-12 col-md-8 col-lg-6">
          <h1 class="w-100 text-center font-effect-destruction">Headline 1</h1>
          <p class="w-100 text-center font-effect-destruction">Some text describing the headline</p>
        </div>
      </div>
    </div>
  </div>
  <section class="about">
    <p>original pen/script created by <a href="http://harayu.com">harayu</a></p>
    <p>Laura Sage is trying to make it work over a video</p>
  </section>

标签： javascript

javascript - 试图在滚动视频上获得模糊效果

问题描述

解决方案

推荐阅读