JSFiddle - React, Tailwind, and code Playground

Randomizer Angular ng-repeat with animation

by Andrew Pougher

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<div ng-app='app' ng-controller="colorswitch" class="container-fluid text-center">
<span class="animated tada">{{caption}}</span>
<div class="container-fluid">
<div ng-repeat="panel in panels |orderBy:random" class="animated flipInY square {{panel.dir}} pull-left" ng-style="{'background-image':panel.im, 'background-repeat': 'no-repeat', 'background-size':'contain',  'background-position': 'bottom left'}">X</div>
</div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:100,200,300,400|Domine:400|Montserrat:700);
 
 body{   font-family: Montserrat;}
.square {
  width: 50%;
   text-align: center;
   display: flex;
  justify-content: center;
  align-items: center;
  font-size:3em;
  color:white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.square:after {
  content: "";
  display: inline-block;
  padding-bottom: 100%;

}


.tl {
    background: rgba(245,45,45,0.7);
}
.tr {
    background: rgba(143,198,45,0.7);
}
.ml {
     background: rgba(433,233,133,0.7);
}
.mr {
    background: rgba(226,11,10,0.8);;
}
.bl {
    background: rgba(12,22,10,0.8);;
}
.br {
    background: rgba(243,202,10,0.8);;
}

JavaScript

var app = angular.module('app', []);
app.run(function($rootScope, $timeout) {
  $rootScope.caption=("ProphyPerfect")
   var billboards = ['Dental Products ', 'Flossers', 'Childrens Brushes', 'Fun Bags', 'Customized Brushes'];
  var speed = 2000;
  $rootScope.onTimeout = function(){
	$rootScope.counter--;
   $rootScope.caption =  billboards[Math.floor($rootScope.counter)];
 if ($rootScope.counter > 0) {
            mytimeout = $timeout($rootScope.onTimeout,speed);
              $rootScope.random = function() {
        return 0.5 - Math.random();
    };
  
        }
        else {
		$rootScope.counter = billboards.length;
        mytimeout = $timeout($rootScope.onTimeout,speed);
        }
    }
    	var mytimeout = $timeout($rootScope.onTimeout,speed);
  
});
app.controller('colorswitch', function ($scope) {
 
   $scope.panels = [{
    "id": 1,
		"dir": 'tl',
    "col": 'orange',
    "im" : 'url("\http://prophyperfect.brandoral.com/dev/productImg/1.png"\)'
  },{
    "id": 2,
		"dir": 'tr',
    "col": '#bb0058',
    "im" : 'url("\http://prophyperfect.brandoral.com/dev/productImg/2.png"\)'
  },{
    "id": 3,
		"dir": 'ml',
    "col": 'blue',
    "im" : 'url("\http://prophyperfect.brandoral.com/dev/productImg/3.png"\)'
  },{
    "id": 4,
		"dir": 'mr',
    "col": '#ecd453',
    "im" : 'url("\http://prophyperfect.brandoral.com/dev/productImg/4.png"\)'
  },{
    "id": 5,
		"dir": 'bl',
    "col": '#ecd453',
    "im" : 'url("\http://prophyperfect.brandoral.com/dev/productImg/5.png"\)'
  },{
    "id": 6,
		"dir": 'br',
    "col": '#ecd453',
    "im" : 'url("\http://prophyperfect.brandoral.com/dev/productImg/6.png"\)'
  }];
});