TryIt Editor v2.0 - will-change

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .circle {
      width: 50px;
      height: 50px;
      transform: translate(50px, 0px);
      border-radius: 30px;
      }
      .circle.blue {
      background: #1c87c9;
      will-change: transform;
      }
      .circle.green {
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété will-change</h2>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <script>
      var circles= document.getElementsByClassName("circle blue");
      function update(t) {
        for (var i = 0; i < circles.length; i++) {
          var xpos = Math.sin(t/1000 + 1000*i) * 50 + 50;
          circles[i].style.transform = "translate(" + xpos + "px, 0px)";
        }
        window.requestAnimationFrame(update);
      }
      update();
    </script>
  </body>
</html>