Trying to get a blur effect over video on scroll

Question

I found a great little script that blurs background images on scroll. Was hoping I could get it to work over a background video. And it sort of does. But it seems to work backwards in a way. The video loads correctly at first. When you start to scroll, it instantly goes away, then starts to fade back IN instead of OUT. Not sure how, or if, I can make it work properly. Seems to be fine on a background image. But not on a video.

(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;
}







    
      
    
    
      
      
        
          Headline 1
          Some text describing the headline
        
      
    
  
  
    original pen/script created by harayu
    Laura Sage is trying to make it work over a video

Fozzle · Accepted Answer

The way the linked source works is there are two images, one which is blurred and one which is not. The blurred one is overlaid over the non-blurred one, but it starts out with no opacity. As you scroll the page it becomes more opaque, making it look like the original image was blurring.

The HTML code you've linked only has one video element, and it starts out fully opaque. So since the JS you adapted from the example is built on the assumptions:

1.) there are two media elements

2.) the blurred element starts with no opacity and becomes more opaque on scroll

You get the behavior you see.

You may want to try mimicking the linked source closer by using two similar videos, one blurred and one non-blurred. I've no idea if that'd achieve the same effect, but, hopefully you get the idea.

Trying to get a blur effect over video on scroll

Answers (1)

Related Questions