stCMYblend

CMYの減法混色シミュレートのベースロジック

by STSHISHO

HTML

<div class="container">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
  <div class="box box-3"></div>
</div>
<div class="slider">
  <span class="rowHead">濃度</span><input type="range" id="slider_all" min="0" max="100" step="1" value="100"><span class="rowTail">100%</span>
</div>

CSS

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* if you need */
  height: 400px;
  position: relative;
  /* 中央揃えの場合は指定しなくても意図通りに表示 */
}

.box {
  width: 300px;
  height: 300px;
  mix-blend-mode: multiply;
  position: absolute;
}

.box-1 {
  /* cyan */
  background: rgba(0, 255, 255, 1);
}

.box-2 {
  /* magenta */
  background: rgba(255, 0, 255, 1);
}

.box-3 {
  /* yellow */
  background: rgba(255, 255, 0, 1);
}

/* スライダー設定 */
.slider {
  margin: 2em auto;
  width: 300px;
  text-align: center;
}

.rowHead {
  display: inline-block;
  width: 2.5em;
  text-align: center;
  font-size: 1em;
}

.rowTail {
  display: inline-block;
  width: 3em;
  height: 2em;
  text-align: center;
  vertical-align: middle;
  font-size: .8em;
  margin-left: .5em;
}

input[type='range'] {
  width: 65%;
}

JavaScript

window.onload = () => {
  const t = document.querySelector('.container')
  const s = document.querySelector('#slider_all')

  s.addEventListener('input', e => t.style.opacity = e.target.value * 0.01, false)
}