CSS / JS User Controlled Shading Effect

Question

Question: Shading Effect Using JS / CSS to mock user screen brightness control?

Info: By control I was thinking of a simple css/javascript combo to add a dark shaded effect on the entire page mocking brightness control.

But I don't know how to do that exactly. I was wondering if I could use a text box to control the last rgba value with a max/min value or even create a slider but I'm having a bit of trouble connecting css to js and then back to control each other. I don't have any existing code.

If you think this is unclear: My goal is to shade the body page using a js slider to control the shading SIMPLY MOCKING a screen brightness effect.

Future Plans: When I finally figure out how to do the shading effect with the help of you guys my plan is to let the user control the shading to mock a user controlled screen brightness. Thanks Guys!

Only help I've found so far: Add something like background-color:rgba(0,0,0,0.5) to the css. That will cover everything in a black "sheet" with a 50% opacity making everything appear darker. This will also only work on rgba enabled browsers.

Thanks Stack, Hoping For Some Experience CSS / JS Devs To Help Me :)

score 2 · Answer 1 · answered Sep 17 '15 at 00:45

2

Here is a quick example of how to make an overlay that changes opacity based on a range slider.

Live Demo:

var range = document.getElementById("myRange");
var overlay = document.getElementById("overlay");
range.oninput = function() {
    overlay.style.background = "rgba(0, 0, 0, " + (range.value / 100) + ")";
};
range.oninput();

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}
#overlay {
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

<input type="range" id="myRange" value="10" max="70" />
<div>
    Drag the slider to change the page overlay opacity.
</div>
<div id="overlay"></div>

JSFiddle Version: https://jsfiddle.net/vw15w0ds/2/

answered Sep 17 '15 at 00:45

Maximillian Laumeister

19,884
8
59
78

+1 Nice solution. Anyway, be aware of browser compatibility: http://stackoverflow.com/a/12920226/5247200 – David Sep 17 '15 at 01:29
Thanks @Maximillian /david | cross browser is an issue but I can learn from the demo and fit it to my needs. (btw: that slider is awesome and was what I was hoping for, thanks mate!) – leyton harrington Sep 17 '15 at 20:39
OH thanks david I will have to test this fully before using anyways. – leyton harrington Sep 17 '15 at 20:45

score 0 · Accepted Answer · answered Sep 17 '15 at 02:59

Here's my attempt at it: http://codepen.io/IAMZERG/pen/epZZzw

The html:

<div class="black"></div>
<div class="outer-container">
<div class="container">
  <div class="row">
  <h1>Shading effect</h1>
  <hr>
  <p>Lorem ipsum dolor sit amet bla bla bla.</p>
  </div>
  <div class="row">
    <div id="slider"></div>
  </div>
</div>
</div>

The CSS:

.black {
  background: black;
  position: fixed;
  z-index: -1;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
#slider {
  width: 75%;
}

.outer-container {
  min-height: 1500px;
  background: white;
}

The jQuery/jQuery UI... probably overkill for something this simple:

$("#slider").slider({
  values: [100]

});
$(".outer-container").on("slide", function (event, ui) {
  var opaque = ($("#slider").slider("values")[0]+20)/ 100;
  console.log(opaque);
  $(this).css("opacity", opaque);
});

Thanks this was exactly what I was looking for, I won't steal your code though. Just will learn from it :) Thanks Zerg! — leyton harrington, Sep 17 '15 at 20:36
Steal my code all you want, but not learning from it would be quite an affront :P — IAMZERG, Sep 19 '15 at 03:12

CSS / JS User Controlled Shading Effect

2 Answers2