half blind simulator

my project to win the nobel prize

by John Doe

HTML

<div id="result">
  <h1>Lorem</h1>
  <h2>Ipsum</h2>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quae, laboriosam voluptate! Officiis odio sapiente facere sit placeat? Ea, iste facere autem earum id voluptatibus ratione quis cumque, quidem nostrum!
  <img src="" alt="">
  <p>span span span</p>
  <h2>Dolor</h2>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, blanditiis, doloribus! Modi autem tempore soluta dolore laboriosam omnis consequuntur repellat, placeat esse unde vero illum, eius neque, accusantium impedit nobis.
</div>

<a id="show_blurform" href="javascript:void(0)">show_blurform</a>

<form id="blurform" action="">
  <p>
    <label for="blur">Blur:</label>
    0<input id="blur" type="range" min="0" max="10" value="0">10
  </p>
  <a id="hide_blurform" href="javascript:void(0)">x</a>
</form>

CSS

*{
  box-sizing: border-box;
}
#show_blurform, #blurform{
  position: absolute;
  bottom: 0;
}
#show_blurform{
  right: 15px;
  width: 25px;
  height: 25px;
  text-indent: -99999px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTM1LjM4MSw0OS45MjZjMC0xLjIzNywwLjE1OC0yLjQzOCwwLjQ1NC0zLjU4M2wxNy4zOTcsMTcuMzk4Yy0xLjE0NSwwLjI5Ny0yLjM0NiwwLjQ1NC0zLjU4MywwLjQ1NCAgQzQxLjc3LDY0LjE5NSwzNS4zODEsNTcuODA5LDM1LjM4MSw0OS45MjZ6IE00OS42NSwzNS42NTdjLTEuMjM4LDAtMi40MzgsMC4xNTgtMy41ODMsMC40NTRMNjMuNDY2LDUzLjUxICBjMC4yOTYtMS4xNDUsMC40NTQtMi4zNDYsMC40NTQtMy41ODNDNjMuOTIsNDIuMDQ1LDU3LjUzMSwzNS42NTcsNDkuNjUsMzUuNjU3eiBNNDkuNjUsMjQuNjI5Yy00LjU2MiwwLTguOTc4LDAuNzEzLTEzLjE3LDEuODk2ICBsNS4zNzcsNS4zNzZjMi4zODktMS4wMzQsNS4wMjMtMS42MTEsNy43OTMtMS42MTFjMTAuODQ1LDAsMTkuNjM2LDguNzkyLDE5LjYzNiwxOS42MzZjMCwyLjc3LTAuNTc2LDUuNDA0LTEuNjExLDcuNzkzbDkuNTExLDkuNTEgIEM5MC4zMDUsNTkuODE2LDk4LjkzLDQ5LjkyNiw5OC45Myw0OS45MjZTNzYuODY2LDI0LjYyOSw0OS42NSwyNC42Mjl6IE01Ny40NDMsNjcuOTUxYy0yLjM5MSwxLjAzMy01LjAyMywxLjYxMS03Ljc5MywxLjYxMSAgYy0xMC44NDUsMC0xOS42MzYtOC43OTMtMTkuNjM2LTE5LjYzN2MwLTIuNzcsMC41NzYtNS40MDMsMS42MTEtNy43OTNsLTkuNTEtOS41MUM4Ljk5Nyw0MC4wMzYsMC4zNzEsNDkuOTI2LDAuMzcxLDQ5LjkyNiAgczIyLjA2MywyNS4yOTcsNDkuMjgsMjUuMjk3YzQuNTYyLDAsOC45NzctMC43MTMsMTMuMTY5LTEuODk2TDU3LjQ0Myw2Ny45NTF6IE04MC40OTMsODAuNzdjMS40MTEtMS40MTIsMS40MTEtMy43MDMsMC01LjExNSAgTDIzLjY1OCwxOC44MTljLTEuNDEzLTEuNDEzLTMuNzAzLTEuNDEzLTUuMTE2LDBjLTEuNDEzLDEuNDEzLTEuNDEzLDMuNzAzLDAsNS4xMTZMNzUuMzc3LDgwLjc3ICBjMC43MDYsMC43MDcsMS42MzIsMS4wNjEsMi41NTksMS4wNjFDNzguODYxLDgxLjgzLDc5Ljc4Nyw4MS40NzcsODAuNDkzLDgwLjc3eiI+PC9wYXRoPjwvc3ZnPg==');
  display: inline-block;
  background-size: cover;
}
#blurform{
  width: 100%;
 ...

JavaScript

$('#show_blurform').click(function(){
	$('#blurform').slideDown();
  $(this).slideUp();
});
$('#hide_blurform').click(function(){
	$('#blurform').slideUp();
  $('#show_blurform').slideDown();
});
$('#blurform').hide();
var p = document.getElementById("blur"),
    res = document.getElementById("result");

p.addEventListener("input", function() {
    $(res).css("filter", "blur("+p.value + "px)");
}, false);