Scene.js examples number description

index.html

  <div class="squares">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>  
    <div class="square"></div>  
    <div class="square"></div>  
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>  
    <div class="square"></div>   
    <div class="square"></div>  
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>  
    <div class="square"></div>
    <div class="square"></div>
  </div>

scene-js-examples-number-description.markdown

Scene.js examples number description

A Pen by daybrush on CodePen.

License.

script.js

new Scene({
  ".square": i => ({
    opacity: [0, 1],
    options: {
      duration: 1,
      delay: (i % 7) * 0.1 + Math.floor(i / 7) * 0.2,
    }
  }),
}, {
  selector: true,
}).play();

scripts

<script src="//daybrush.com/scenejs/release/latest/dist/scene.js"></script>

style.css

.squares {
  position: absolute;
  font-size: 0;
  width: 300px;
  height: 120px;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.square {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #333;
  margin: 5px;
}