Question: seen afew websites with this effect, however it seems to drop the framerate in my attempt. I basically want to change the opacity of an element the more the user scrolls. 

```
$(window).scroll(function(event){
        $("#responsive-slider-with-blocks-1").css("opacity", 1 - $(window).scrollTop() / 1500);
      }

```

Is there a better way to do this? (would be ace just CSS, but not possible). 

I'm really not a fan of binding to the scroll event. 

Edit:

Due to changing the opacity on an element which covers the entire viewport could be why the framerate drops so much. Would fading in black div covering the element maybe not drop the framerate so much?

Answer: 
Scroll events fire so fast, you're right, every little optimization will help. The [docs](https://developer.mozilla.org/en-US/docs/Web/Events/scroll) for the scroll event have advice along those lines:

> 
> Since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame, setTimeout or customEvent...
> 
> 
> 

You can adapt the example they have there to your purposes (and I'm trying to leave out jquery on purpose to remove the overhead):

```
var last_known_scroll_position = 0;
var ticking = false;

var responsiveSlider = document.getElementById('responsive-slider-with-blocks-1');
function doSomething(scroll_pos) {
  responsiveSlider.style.opacity = 1 - scroll_pos / 1500;
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;
  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });
  }
  ticking = true;
});

```

This is certainly longer, and there are some global scope messes to consider, but something like this may make the performance difference you are looking for.
Scroll event I believe will be triggered very often during scrolling. When scroll event triggered, jQuery needs to find DOM element based on the selector. This operation alone is quite expensive.

Changing the opacity make it worse as more pixels had to be processed.

* Move code to select DOM using jQuery selector outside scroll event handler. That way you can avoid jQuery to lookup DOM element each time scroll event fires.
* Limit size of element to reduce number of pixels need to be compute when opacity changed.
* Change opacity at certain time interval helps reduce number of paint operations that browser need to do during scrolling operation. So instead of changing opacity everytime event fires, you wait until certain time has elapsed and then change opacity.