Search code examples
jqueryscrollmappingviewportrgba

Mapping scrolling values to change rgba opacity

I would like for the opacity of a color of a div to change as the user scrolls.

It requires a few things though :

  • Checking if the div is in viewport. Did that with this code :

    var scrollBottom = $(window).scrollTop() + $(window).height(),

    ideeHeight = $(this).offset().top;

    if (scrollBottom >= ideeHeight)

  • Mapping the values of the scroll to 0.0 -> 1.0 values. This code :

    var docHeight = $(window).height(), opacity = map(ideeHeight, 0, docHeight, 0.0, 1.0);

  • Changing the opacity of the div's color as we scroll. I tried this :

    $(this).css("background", "rgba(255, 255, 255," + opacity + ")");

This does not seem to work. Can anyone tell me where I've made mistakes or if this isn't the right way to do it at all? Thank you!

$(window).on("scroll", function() {
  function map(num, in_min, in_max, out_min, out_max) {
    return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
  }

  $(".idee").each(function() {
    var scrollBottom = $(window).scrollTop() + $(window).height(),
      ideeHeight = $(this).offset().top;
    if (scrollBottom >= ideeHeight) {
        var docHeight = $(window).height(),
        opacity = map(ideeHeight, 0, docHeight, 0.0, 1.0);

      $(this).css("background", "rgba(255, 255, 255," + opacity + ")");
    }
  });
});
body {
  background: #cdd3d8;
  font-family: Helvetica;
}

.idee {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 80vw;
  min-height: 50vh;
  margin: 2vw auto;
  padding: 1em;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 2px 10px 2px grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>

Also here is a jsfiddle link if it's easier.

Solution

  • Since you want opacity from 0 to 1, the map() function should return a ratio of an input value mapped to the range of output values, rather than the mapped output value itself.

    Based on your comments, I used the calculateVisibilityForDiv() function from Stanislav's answer here to calculate the ratio of an element that is visible in the viewport. The opacity is then set to the ratio (from 0 to 1) that each element is visible.

    var windowHeight = $(window).height();

function calculateVisibilityForDiv($elm) {

  var docScroll = $(document).scrollTop();
  var elmPosition = $elm.offset().top;
  var elmHeight = $elm.height();
  var hiddenBefore = docScroll - elmPosition;
  var hiddenAfter = (elmPosition + elmHeight) - (docScroll + windowHeight);

  if ((docScroll > elmPosition + elmHeight) || (elmPosition > docScroll + windowHeight)) {
    var result = 0;
  } else {
    var result = 1;

    if (hiddenBefore > 0) {
      result -= hiddenBefore / elmHeight;
    }

    if (hiddenAfter > 0) {
      result -= hiddenAfter / elmHeight;
    }

  }
  return result;

}

$(window).on("scroll", function() {

  $(".idee").each(function() {
    var $this = $(this);
    var opacity = calculateVisibilityForDiv($this);
    $this.css("background", "rgba(255, 255, 255," + opacity + ")");
  });

}).trigger('scroll');
    body {
  background: #cdd3d8;
  font-family: Helvetica;
}

.idee {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 80vw;
  min-height: 50vh;
  margin: 2vw auto;
  padding: 1em;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 2px 10px 2px grey;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>

    Attribution:
    Stack Overflow How much of an element is visible in viewport;
    asked by tom and answered by Stanislav.

    Edit:
    Modified not to fade out when element leaves viewport.

    var windowHeight = $(window).height();

function calculateVisibilityForDiv($elm) {

  var docScroll = $(document).scrollTop();
  var elmPosition = $elm.offset().top;
  var elmHeight = $elm.height();
  var hiddenAfter = (elmPosition + elmHeight) - (docScroll + windowHeight);
  var ratio = 1 - (hiddenAfter / elmHeight);
  return ratio > 0 ? (ratio < 1 ? ratio : 1) : 0;

}

$(window).on("scroll", function() {

  $(".idee").each(function() {
    var $this = $(this);
    var opacity = calculateVisibilityForDiv($this);
    $this.css("background", "rgba(255, 255, 255," + opacity + ")");
  });

}).trigger('scroll');
    body {
  background: #cdd3d8;
  font-family: Helvetica;
}

.idee {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 80vw;
  min-height: 50vh;
  margin: 2vw auto;
  padding: 1em;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 2px 10px 2px grey;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>
<div class="idee">
  <p>Hello World</p>
</div>