JSFiddle - React, Tailwind, and code Playground

random positioned letters with Angular + wiggle

by Andrew Pougher

HTML

<script src="//code.jquery.com/jquery-3.1.1.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<div ng-controller="MyCtrl" class="container">

  <h2 class="shake hide">A</h2>
  <div class="me hide"></div>
  <em class="me  shake  text-danger" ng-repeat="l in groups" ng-style="{'position':'absolute',top': t+'px','left':l + 'px'}">{{l.name}}</em> 
  <small class="hide small">{{groups}}</small>
</div>

CSS

@import url("https://fonts.googleapis.com/css?family=Work+Sans:900");
body {
  font-family: 'Work Sans', sans-serif;
}

.shake,
.shake.inline {
  //display: inline-block;
  position:absolute
}

@-webkit-keyframes spaceboots {
  0% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(0px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(2px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(2px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
  }
}

.shake:hover,
.shake:focus {
  -webkit-animation-name: spaceboots;
  -webkit-animation-duration: 0.8s;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

JavaScript

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
  //$(document).ready(showLetter);
  var imgsArray = ["A", "N", "D", "R", "E", "W", "P", "O", "U", "G", "H", "E", "R"];

  $scope.groups = [];
  for (var i = 0; i < imgsArray.length; i++) {
   showLetter()
    $scope.groups.push({
      name: imgsArray[i],
      items: [],
      l :  Math.floor(Math.random() * 400) ,
      t : Math.floor(Math.random() * 400),
      show: true
    });
  };

  function generateRandomForArray() {
    var num = Math.floor(Math.random() * imgsArray.length);
    return num;
  }

  function generateRandom() {
    var num = Math.floor(Math.random() * 400);
    return num;
  }

  function showLetter() {
    var letter = imgsArray[generateRandomForArray()];
    $(".container").append("<span class='shake text-info  fa-3x'>" + letter + "</span>");
    var left = generateRandom();
    var top = generateRandom();
    $(".shake").last().css({
      "position": "absolute",
      "top": top + "px",
      "left": left + "px"
    });
  }

});