JSFiddle - React, Tailwind, and code Playground

by kinduff

HTML

<h1>Ilusión optica</h1>
<p>Los siguientes rectángulos viajan a la misma velocidad y al mismo tiempo.</p>
<div id="wrap" class="stripes">
    <div id="container">
        <div id="b1"></div>
        <div id="b2"></div>
    </div>
</div>
<br />
<p><b>Controles</b></p>
<label><input type="checkbox" id="fondo" checked />Fondo</label>
<label><input type="checkbox" id="highlight" />Highlight</label>

CSS

#wrap {
  width: 480px;
  height: 150px;
  position: relative;
  background-color: #666;
}

.stripes {
  background-image: linear-gradient(90deg, #000000 25%, #ffffff 25%, #ffffff 50%, #000000 50%, #000000 75%, #ffffff 75%, #ffffff 100%);
  background-size: 40.00px 40.00px;
}

#container {
  position: absolute;
  width: 40px;
  height: 80px;
  top: 50%;
  margin-top: -40px;
  animation: moveit 20s linear infinite;
}

#b1,
#b2 {
  width: 40px;
  height: 15px;
  position: absolute;
  left: 0;
}

#b1 {
  background-color: #F3F600;
  top: 0;
}

#b2 {
  background-color: #0000A8;
  bottom: 0;
}

#container.highlight {
  outline: 1px solid red;
}

@-webkit-keyframes moveit {
  0% {
    left: 0;
  }

  50% {
    left: 430px;
  }

  100% {
    left: 0;
  }
}

@keyframes myfirst {
  0% {
    left: 0;
  }

  50% {
    left: 430px;
  }

  100% {
    left: 0;
  }
}

JavaScript

var checkbox = document.getElementById("fondo"),
    wrap = document.getElementById("wrap"),
    highlight = document.getElementById("highlight"),
    container = document.getElementById("container");

checkbox.onclick = function(){
    if (this.checked) {
        wrap.className = 'stripes';
    } else {
        wrap.className = '';
    }
}
highlight.onclick = function(){
    if (this.checked) {
        container.className = 'highlight';
    } else {
        container.className = '';
    }
}