I'd like to control the opacity of the animated CSS background-image from my first code snippet. Therefore I want to use a slider as seen in my second code snippet.
This is just one example, but I'm often in the situation that I don't know how to take an already existing image and use it for another operation. What can I do in such a case?
.page-header:after { animation: img1 .85s infinite linear; background-image: url(https://i.imgur.com/LZJVN0S.png); content: ""; z-index: 100; pointer-events: none; height: 300%; left: -50%; opacity: 1; position: fixed; top: -110%; width: 300%; } @keyframes img1 { 0% { background-position: top 150px left 120px, 110px 90px; } 50% { background-position: top 150px left 100px, 362px 90px; } 100% { background-position: top 150px left 120px, 615px 90px; } }
<div class="page-header"></div> <div style="position:absolute; top:0px; left:0px;"></div>
var rangeVal = document.getElementById('rangevalue'); var range = document.getElementById('range'); var updateVal = function(val) { rangeVal.innerHTML = val; rangeVal.style.left = val + '%'; }; updateVal(range.value); var imgP = document.getElementsByClassName("imgP")[0]; range.addEventListener("input", function(value) { imgP.style.opacity = this.value / this.max; });
.imgP { opacity: 1; }
<div class="range" style="position:absolute; top:10px; left:20px"> <input type="range" id="range" value="100" min="0" max="100" step="1" oninput="updateVal(this.value)" style="position:fixed; top:32px; left:8px"> <div id="rangevalue" class="range-thumb"></div> <img class="imgP" height="imageheight" width="imagewidth" src='https://png.icons8.com/nolan/50/000000/percentage.png' style="position:fixed; top:56px; left:18px">
Add .imgP
to .page-header
in the HTML (or replace imgP
with page-hader
in the JavaScript.)
var rangeVal = document.getElementById('rangevalue'); var range = document.getElementById('range'); var updateVal = function(val) { rangeVal.innerHTML = val; rangeVal.style.left = val + '%'; }; updateVal(range.value); var imgP = document.getElementsByClassName("imgP")[0]; range.addEventListener("input", function(value) { imgP.style.opacity = this.value / this.max; });
.imgP { opacity: 1; } .page-header:after { animation: img1 .85s infinite linear; background-image: url(https://i.imgur.com/LZJVN0S.png); content: ""; z-index: 100; pointer-events: none; height: 300%; left: -50%; opacity: 1; position: fixed; top: -110%; width: 300%; } @keyframes img1 { 0% { background-position: top 150px left 120px, 110px 90px; } 50% { background-position: top 150px left 100px, 362px 90px; } 100% { background-position: top 150px left 120px, 615px 90px; } }
<div class="page-header imgP"></div> <div style="position:absolute; top:0px; left:0px;"></div> <div class="range" style="position:absolute; top:10px; left:20px"> <input type="range" id="range" value="100" min="0" max="100" step="1" oninput="updateVal(this.value)" style="position:fixed; top:32px; left:8px"> <div id="rangevalue" class="range-thumb"></div>
var rangeVal = document.getElementById('rangevalue'); var range = document.getElementById('range'); var updateVal = function(val) { rangeVal.innerHTML = val; rangeVal.style.left = val + '%'; }; updateVal(range.value); var imgP = document.getElementsByClassName("page-header")[0]; range.addEventListener("input", function(value) { imgP.style.opacity = this.value / this.max; });
.page-header:after { animation:img1 .85s infinite linear; background-image: url(https://i.imgur.com/LZJVN0S.png); content: ""; z-index:100; pointer-events:none; height:300%; left:-50%; opacity:1; position:fixed; top: -110%; width: 300%; opacity:1; } @keyframes img1 { 0% {background-position: top 150px left 120px, 110px 90px;} 50% {background-position: top 150px left 100px, 362px 90px;} 100% {background-position: top 150px left 120px, 615px 90px;}
<div class="range" style="position:absolute; top:10px; left:20px;bottom:20"> <input type="range" id="range" value="100" min="0" max="100" step="1" oninput="updateVal(this.value)" style="position:fixed; top:32px; left:8px"> <div id="rangevalue" class="range-thumb"></div> <div class="page-header"></div> <div style="position:absolute; top:0px; left:0px;"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.