1

I currently have two images and an input:

<input type="range" min="0" max="50" value="25">

.image_1 {
  filter: blur(5px);
  opacity: .8;
}

.image_2 {
  filter: blur(5px);
  opacity: .8;
}

The goal is when slider moves right image_2 {filter: blur(0px); opacity: 1; comes into focus and opacity full; meanwhile image_1 {opacity: 0} goes away. Vice versa should happen when the slider is moved to the left.

Any ideas or suggestions are greatly appreciated.

Thank you so far for all your suggestions and answers. I have yet to fully answer my question with provided solutions but I have gotten closer. What I have done is I have added oninput=showVal(this.value) to my input element. I have then created a function:

function showVal(newVal) {
   var img_1 = document.getElementById("img_1");
   var img_2 = document.getElementById("img_2");

   // code to change blur upon value of slider changing (img_1.style.etc)
   // unsure how to do
   console.log(newVal);
 }

Due to all the great answers, I think I have found a solution. However, I am still having an issue with adjusting the opacity. Here is the current open question about it: Google Web Designer dynamically adjust opacity in source code

Community
  • 1
  • 1
Nappstir
  • 995
  • 2
  • 20
  • 38
  • just compare the value if less than 25 it means it moved to left if greater than 25 it moved to right.. are your images hidden on load? and will show image only after range change? – guradio Jun 23 '16 at 02:40
  • You can't do this with only CSS classes, but I think I just answered your problem correctly below – sgarcia.dev Jun 23 '16 at 03:12

6 Answers6

4

Update

If you have two images, and want to change the opacity, you can still listen for the change event.

The first image's opacity value will be the value of the range input divided by its maximum value. The second image's opacity value will be the difference between the maximum and current value divided by the maximum value.

In other words, one image will become more transparent, and the other will become more opaque.

var range = document.getElementById("range");
var imgOne = document.getElementsByClassName("img1")[0];
var imgTwo = document.getElementsByClassName("img2")[0];

range.addEventListener("change", function() {
    imgOne.style.opacity = this.value / this.max;
    imgTwo.style.opacity = (this.max - this.value) / this.max;
});
.img1, .img2 {
  opacity: 0.5;
}
<input id="range" type="range" min="0" max="50" value="25"><br><br>

<img class="img1" height="200" width="200" src="http://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-11.jpg" />

<img class="img2" height="200" width="200" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLg8Fo8YK5SNLqmZUUCjaUh_2Y57jxBgkmjOwxj7dNSui2jZcb" />
Richard Hamilton
  • 25,478
  • 10
  • 60
  • 87
4

Done. There is no real way to do this with only CSS as you probably already noticed. You could also send the max blur from the dom as another function parameter to make the code more modular. Also don't forget to add all the filter implementations (I only added webkit's because of time) and watch out for IE10 since onchange might have some issues. See this answer for a fallback

EDIT: added cross browser filter setting compatibility

var config = {
  img1: document.querySelector('.image_1'),
  img2: document.querySelector('.image_2'),
  maxBlurPx: 10
}

function getInput(value, max) {
  var sliderPercentage = (value / max).toFixed(2);
  config.img1.style.opacity = 1 - sliderPercentage;
  setBlur(config.img1, (10*sliderPercentage).toFixed(2));
  config.img2.style.opacity = sliderPercentage;
  setBlur(config.img2, 10-(10*sliderPercentage).toFixed(2));
  config.img2.style.webkitFilter = "blur(" + (10 - (10 * sliderPercentage).toFixed(1)) + "px)";
}

function setBlur(el, value) {
  if (el.style.hasOwnProperty('filter'))
    el.style.filter = "blur("+value+"px)";
  if (el.style.hasOwnProperty('webkitFilter'))
    el.style.webkitFilter = "blur("+value+"px)";
  if (el.style.hasOwnProperty('mozFilter'))
    el.style.mozFilter = "blur("+value+"px)";
  if (el.style.hasOwnProperty('oFilter'))
    el.style.oFilter = "blur("+value+"px)";
  if (el.style.hasOwnProperty('msFilter'))
    el.style.msFilter = "blur("+value+"px)";
}
.image_1,
.image_2 {
  width: 150px;
}
.image_1 {
  filter: blur(5px);
  opacity: .8;
}
.image_2 {
  filter: blur(5px);
  opacity: .8;
}
<input type="range" min="0" max="50" value="25" oninput="getInput(this.value, this.max)">
<br />
<img src="http://www.istockphoto.com/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/EssentialBackgrounds79139997.jpg" alt="" class="image_1" />
<img src="http://www.istockphoto.com/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/EssentialBackgrounds79139997.jpg" alt="" class="image_2" />
Community
  • 1
  • 1
sgarcia.dev
  • 5,671
  • 14
  • 46
  • 80
  • I really like this answer. I was able to figure out the opacity situation, however, I am unable to get the blur to work. I'm thinking the reason as to why is because this is being built in GWD(google web designer) and you have to use `-webkit-filter:` in order for you to apply filter effects. Now I have to figure out how to target that property. – Nappstir Jun 23 '16 at 05:03
  • I have a question in regards to the solution for `FireFox`. When running the code this is the current response that I get in the console: `mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create` Any idea on how to approach this? – Nappstir Jun 23 '16 at 18:30
2

Try this snippet. I used this code on my website http://stark-cove-24150.herokuapp.com

$(document).ready(function(){
 $("#designer").mouseenter(function(){
     $("#xyz").attr("src", "design.jpg");
     $("#face").css("background-image", "url(des2.jpg)");
     $("#coder").css("opacity", "0.5");
 });
$("#designer").mouseleave(function(){
     $("#xyz").attr("src", "def.jpg");
     $("#coder").css("opacity", "");
 });
 $("#coder").mouseenter(function(){
     $("#xyz").attr("src", "cp2.jpg");
      $("#designer").css("opacity", "0.5");
      $("#face").css("background-image", "url(coding.jpg)");
 });
$("#coder").mouseleave(function(){
     $("#xyz").attr("src", "def.jpg");
     $("#face").css("background-image", "url()");
     $("#designer").css("opacity", "");
 });
 });
Mohammad S. Alam
  • 118
  • 4
  • Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". We make an effort here to be a resource for knowledge. – abarisone Jun 23 '16 at 08:07
  • I used this code in my potrfolio which has three divs named as designer, xyz and coder. The script changes the background image and opacity of the div when the mouse enters the respective div. To illustrate it I had provided the link to my portfolio which describes it well. Thanks – Mohammad S. Alam Jun 24 '16 at 03:42
2

You can create objects where properties, values correspond to current value of input element

var imgs = $(".image_1, .image_2"),
  i = {
    "0.4": .6,
    "0.3": .7,
    "0.2": .8,
    "0.1": .9,
    "0": 1,
    "0.6": .4,
    "0.7": .3,
    "0.8": .2,
    "0.9": .1,
    "1": 0
  },
  blur = {
    "0.5": "5px",
    "0.6": "4px",
    "0.7": "3px",
    "0.8": "2px",
    "0.9": "1px",
    "1": "0px",
    "0.4": "4px",
    "0.3": "3px",
    "0.2": "2px",
    "0.1": "1px",
    "0": "0px"
  };

$("input[type=range]").change(function() {

  var n = this.value;
  if (n == .5) {
    imgs.css({
      "-webkit-filter": "blur(" + blur[n] + ")",
      "-moz-filter": "blur(" + blur[n] + ")",
       "filter": "blur(" + blur[n] + ")"
    })
  };
  if (n > .5) {
    imgs.eq(1).css({
      "opacity": n,
      "-webkit-filter": "blur(" + blur[n] + ")",
       "-moz-filter": "blur(" + blur[n] + ")",
       "filter": "blur(" + blur[n] + ")"
    });
    imgs.eq(0).css({
      "opacity": i[n]
    });
  } else {
    if (n < .5) {
      imgs.eq(1).css({
        "opacity": n
      });
      imgs.eq(0).css({
        "opacity": i[n],
        "-webkit-filter": "blur(" + blur[n] + ")",
         "-moz-filter": "blur(" + blur[n] + ")",
         "filter": "blur(" + blur[n] + ")"
      })
    }
  }
}).focus()
img {
  transition: all .01s linear;
}

.image_1 {
  -webkit-filter: blur(5px);
 -moz-filter: blur(5px);
  filter: blur(5px);
  opacity: .5;
}
.image_2 {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  filter: blur(5px);
  opacity: .5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" step=".1" min="0" max="1" value=".5">
<img src="http://lorempixel.com/100/100/technics" class="image_1" />
<img src="http://lorempixel.com/100/100/nature" class="image_2" />
guest271314
  • 1
  • 15
  • 104
  • 177
1
var val=25;
$("input[type='range']").change(function(){
  if($(this).val()>val){
    $(".image_2").css({
      "filter":"blur(0px)",
      "opacity":"1"
    });
    $(".image_1").css({
      "opacity":"0"
    });
  } else {
    $(".image_1").css({
      "filter":"blur(0px)",
      "opacity":"1"
    });
    $(".image_2").css({
      "opacity":"0"
    });
  }
  val=$(this).val();
});

I havent checked this code yet so im not sure if this will work..

Shrikantha Budya
  • 646
  • 1
  • 4
  • 15
1

here is another example http://codepen.io/mozzi/pen/qNqJXe

<input id="slider" type="range" min="0" max="50" value="25">
<img id="img1" src="http://www.pd4pic.com/images/number-1-red-circle.png" alt="Smiley face" height="200" width="200">
<img id="img2" src="http://images.clipartpanda.com/numbers-clipart-1-10-4cb4KkKgi.png" alt="Smiley face" height="200" width="200">



  $("#img1").fadeTo(0,0.5);
  $("#img2").fadeTo(0,0.5 ) ;

$("#slider").change(function() {
  var rangeVal = $("#slider").val();
  var val1 = (rangeVal/50);
  var val2 = ((50-rangeVal)/50);
  $("#img1").fadeTo(0,val1);
  $("#img2").fadeTo(0,val2 ) ;
});
Mina Jacob
  • 1,881
  • 22
  • 23