Angular Bg Image RND Array

by Andrew Pougher

HTML

<section ng-app="app">
    <div ng-controller="MyCtrl">
        <h2  ng-class="class">{{ttl}}</h2>
<div class="im {{fdClass}}" ng-style="{ 'background-image': 'url(' + bg + ')' }">
  </div>
    </div></section>

CSS

.im {
height: 200px;
width: 200px;
background-repeat:no-repeat;
border: 5px solid #fff;
box-shadow: 2px 2px 1px #eee;
opacity: 0;
-webkit-transition: opacity 0.2s ease-in;
       -moz-transition: opacity 0.2s ease-in;
        -ms-transition: opacity 0.2s ease-in;
         -o-transition: opacity 0.2s ease-in;
            transition: opacity 0.2s ease-in;}

.load {
    opacity: 1;
}
.pinky{color:pink}
h2{text-transform:uppercase;
    border-bottom:2px solid;
    opacity: 0;
-webkit-transition: opacity 0.2s ease-in;
       -moz-transition: opacity 0.2s ease-in;
        -ms-transition: opacity 0.2s ease-in;
         -o-transition: opacity 0.2s ease-in;
            transition: opacity 0.2s ease-in;}

JavaScript

angular.module('app', [])
.controller('MyCtrl',function($scope,$interval){
var c=0;
  
$scope.classes = [
        "animals",
        "nature",
        "abstract",
        "city",
        "people",
        "transport",
        "food"
    ]; 
$scope.bg = 'http://lorempixel.com/200/200/animals';
$interval(function(scope,element,attrs){

var topic = $scope.classes[Math.floor(Math.random() * ($scope.classes.length))];
$scope.bg = 'http://lorempixel.com/200/200/'+topic+'?r='+c;
$scope.fdClass = "load";
$scope.ttl = topic;
$scope.class = "pinky load"; 
c++;
},2000);

})