MyBB Community Forums

I want it to have the same effect as this: 
https://medium.com/good-music/bound-to-a...60ba9e6c52

When you scroll down the background blurs. If anyone could help me, I'd really appreciate it. I was attempting to use some of these codes: http://stackoverflow.com/questions/20697...-on-scroll

but they just don't seem to be working.

You have a tutorial here: http://pencilscoop.com/2014/02/recreatin...ur-effect/

Thank you! That did the trick... Although I have to say the code provided there wasn't exactly accurate I had to alter a few things for it to actually work. With the code it would break the image, not allowing it to be full and just scroll showing the image below, but the way I did it works smoothly.

Now the problem I have, is when you scroll back up, the image remains blurry.

---

<style>
/* Blur Effect */

.image-wrap {
  position: relative;
  height: 1000px;
  overflow: hidden
  background: fixed;
}

.regular, .blurred {
position:absolute;
width:100%;
height: 100%;
background: fixed;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.regular {opacity:1;}
.blurred { opacity:0;}


.blurImg {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
}
.blurImg > div {
  position: fixed;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center center;
}

.blur {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

</style>

<script>
function fader() {
    var r = $('.blurred'),
        wh = $(window).height(),
        dt = $(document).scrollTop(),
        elView, opacity;
    
    // Loop elements with class "blurred"
    r.each(function() {
        elView  = wh - ($(this).offset().top - dt + 300);
        if (elView > 0) { // Top of DIV above bottom of window.
            opacity = 1 / (wh + $(this).height()) * elView * 3
            if (opacity < 1) // Bottom of DIV below top of window.
                $(this).css('opacity', opacity);
		}
		
    });
}
$(document).bind('scroll', fader);


(function() {
  $(window).scroll(function() {
    var oVal;
    oVal = $(window).scrollTop() / 240;
    return $(".blur").css("opacity", oVal);
  });

}).call(this);
</script>


<script type="text/javascript">
  function showLeftPanel() {
    var elem = document.getElementById("left-panel");
    elem.classList.toggle("show");
  }
</script>