Distract.js example

<!DOCTYPE html>
<html>

  <head>
    <script data-require="distractjs@*" data-semver="0.1.2" src="//cdn.rawgit.com/unkhz/distract.js/0.1.2/dist/distract.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <script src="script.js"></script>
  </body>

</html>

var helloLayer = new Distract.Layer(
  
  // First argument defines the Layer options
  {
    el:document.body,
    particleCount:5
  },
  
  // Second argument defines the Particle options
  {
    text: 'Hello World!',
    className:'hello-particle',
    iterationSpeed: 1,
    iterationRules: [[
        // The first rule modifies the delta for the second and third rule
        {
            parse: function(rule, state, opts, particle) {
                // Use quite small modifications for smooth animation
                state.delta += (Math.random()-0.5)/10;
            }
        },

        // The second rule modifies the X rotation
        {
            property:'transform',
            propertyFunction:'rotateX',
            inc:function(rule, state, opts, particle){
                return state.delta * Math.random();
            }
        },

        // The third rule modifies the Y rotation
        {
            property:'transform',
            propertyFunction:'rotateY',
            inc:function(rule, state, opts, particle){
                return state.delta * Math.random();
            }
        }
    ]],
    initState: function(){
      return {
        delta: 0,
        style: {
          transform: {
              perspective:  [300,'px'],
              rotateX:      [0,'deg'],
              rotateY:      [0,'deg']
          }
        }
      };
    }
  }
);

body {
  width:100%;
  height:100%;
  overflow:hidden;
}
.distract-particle {
    position:absolute;
    display:block;
    top:50%;
    width:100%;
    font-size:60px;
    color:black;
    text-align:center;
}

## A simple Distract.js example

This is an example animation that uses Distract.js library.

https://github.com/unkhz/distract.js