Nappstir Nappstir - 5 months ago 43
CSS Question

Google Web Designer dynamically adjust opacity in source code

Right now I currently have a slider and two images on my Google ad

input class="gwd-input-13xh" type="range" min="0" max="50" value="25" id="slider" oninput="getInput(this.value, this.max)">

.img_1 {
position: absolute;
width: 180px;
height: 130px;
left: 62px;
top: 1px;
-webkit-filter: blur(5px);
opacity: .8;
}

.img_2 {
position: absolute;
width: 180px;
height: 130px;
left: 62px;
top: 1px;
-webkit-filter: blur(5px);
opacity: .8;
}


This slider, if moved right of slider value(higher 25) should remove blur and set opacity to 1. If moved left of slider value(lower 25) then vice versa occurs. Here is the current code I have to do this:

function getInput(value, max) {
var img_1 = document.getElementById("img_1");
var img_2 = document.getElementById("img_2");
var sliderPercentage = (value / max).toFixed(2);
img_1.style.opacity = 1 - sliderPercentage
setBlur(img_1, (10 * sliderPercentage).toFixed(2));
img_2.style.opacity = sliderPercentage;
setBlur(img_2, 10 - (10 * sliderPercentage).toFixed(2));
}

function setBlur(ele, value) {
if (ele.style.hasOwnProperty('filter')) {
ele.setAttribute("style", "-webkit-filter:blur(" + value + "px)")
}
}


This code works flawlessly. However, for whatever reason, the
opacity
will not change. IDK if it is because the
opacity
is set in stone when working within
GWD
. If you
console.log(img_1.style.opacity = 1 - sliderPercentage)
you will see the math on the code works.. it just isn't adjusting the opacity.

Any suggestions and ideas would greatly be appreciated. It also should be noted, when I do NOT run the
setBlur
function then the
setOpacity
function works. It just does not work when I am running
setBlur
.

myf myf
Answer

Not familiar with GWD either, but I assume the problem is you are re-assignin whole style property, so later alteration overrides former. So replacing ele.setAttribute("style", "...") with

ele.style["-webkit-filter"] = "blur(" + value + "px)";

should fix your issue.

Comments