Filter Control Panel

先備知識

範例

img(src='https://goo.gl/ESHnPA')
.text
 h2 Update CSS Variables with 
 span.h1 JS
 .controls
 //min最小值,max最大值
 //value初始值
 //data-sizing單位
 //step刻度單位 (default為1)
 label(for='spacing') Spacing
 input#spacing(type='range', name='spacing', min='10', max='200', value='10', data-sizing='px')
 .value 10px
 br
 
 label(for='blur') Blur
 input#blur(type='range', name='blur', min='0', max='25', value='1.5', step="0.01", data-sizing='px')
 .value 1.5px
 br
 
 label(for='brightness') Brightness
 input#brightness(type='range', name='brightness', min='0', max='1', step="0.01", value='1')
 .value 1
 br
 
 label(for='contrast') Contrast
 input#contrast(type='range', name='contrast', min='0', max='200', value='100', data-sizing='%')
 .value 100%
 br
 
 label(for='grayscale') Grayscale
 input#grayscale(type='range', name='grayscale', min='0', max='100', value='0', data-sizing='%')
 .value 0%
 br
 
 label(for='opacity') Opacity
 input#opacity(type='range', name='opacity', min='0', max='100', value='100', data-sizing='%')
 .value 100%
 br
 
 label(for='saturate') Saturate
 input#saturate(type='range', name='saturate', min='0', max='100', value='100', data-sizing='%')
 .value 100%
 br
 
 label(for='sepia') Sepia
 input#sepia(type='range', name='sepia', min='0', max='100', value='0', data-sizing='%')
 .value 0%
 br
 
 label(for='base') Base Color
 input#base(type='color', name='base', value='#ffc600')
 .value #ffc600
:root {
 --base: #ffc600;
 --spacing: 10px;
 --blur: 1.5px;
 --brightness: 1;
 --contrast: 100%;
 --grayscale: 0%;
 --opacity: 100%;
 --saturate: 100%;
 --sepia: 0%
}

* {
 font-family: Lato;
 box-sizing: border-box;
}

html, body {
 margin: 0;
 padding: 0;
 font-size: 0;
}

img {
 width: 100vw;
 height: 100vh;
 position: relative;
 padding: var(--spacing);
 background: var(--base);
 filter: blur(var(--blur)) brightness(var(--brightness)) contrast(var(--contrast)) grayscale(var(--grayscale)) opacity(var(--opacity)) saturate(var(--saturate)) sepia(var(--sepia));
}

.text {
 position: absolute;
 top: 0;
 left: 30px;
 font-size: 20px;
 color: #24260f;
}

.h1 {
 color: var(--base);
}

label {
 width: 100px;
 display: inline-block;
 margin-top: 20px;
}


.value{
 display: inline;
}
const inputs=document.querySelectorAll(".controls input");
const
values=document.querySelectorAll(".value");

function handleUpdate(){
 const suffix =this.dataset.sizing || ""; 
 //等於這個↓
 const suffix2 =this.getAttribute("data-sizing") || "";
 //dataset is a object, contains all the data info 
 //call data-sizing or nothing
 
 //select css root and change the root css
 document.documentElement.style.setProperty(`--${this.name}`, this.value+suffix);
 
 /****************
 **參數值顯示功能**
 ****************/
 for(i=0;i<9;i++){
 values[i].textContent=inputs[i].value+(inputs[i].dataset.sizing|| "");
 
}
}

inputs.forEach(input => input.addEventListener("change", handleUpdate)) //when all the input value changed, execute handleUpdate function
inputs.forEach(input => input.addEventListener("mousemove", handleUpdate)) //continuously change the value

Display

CODEPEN

Leave a Reply

Your email address will not be published. Required fields are marked *