JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jmpress/0.4.5/jmpress.all.js"></script>
<div ng-app="app" ng-controller="randomData" ui-impress>
    <div ng-repeat="item in data" class="step" data-duration="2000" data-x="{{ item.coordinates.x }}" data-y="{{ item.coordinates.y }}" data-z="{{ item.coordinates.z }}" data-rotate-x="{{ item.rotate.x }}" data-rotate-y="{{ item.rotate.y }}" data-rotate-z="{{ item.rotate.z }}" data-scale="{{ item.scale }}">{{ item.message }}</div>
</div>

CSS

/** ANIMATION **/
 .step {
    opacity: 0.1;
    width: 20em;
    height: 3em;
}
.step.active {
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    opacity: 1;
}

JavaScript

var app = angular.module("app", []);

app.directive('uiImpress', function ($timeout) {
    return {
        restrict: 'A',
        scope: false,
        link: function ($scope, $element) {
            var init = $scope.$watch('data', function (data) {
                if (data) {

                    $timeout(function () {
                        $($element).jmpress();
                        init();
                    });
                };
            });
        }
    };
});

function randomData($scope, $http) {
    $scope.data;

    var slides = 10;

    var config = {
        coordinates: [-1000, 1000],
        rotate: [-180, 180],
        scale: [0.1, 10]
    };

    var randomDataSource = "http://api.icndb.com/jokes/random/" + slides;

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function generateData(messages) {
        return _.range(slides).map(function (value, index) {
            return {
                message: messages[index],
                coordinates: {
                    x: getRandomInt.apply(null, config.coordinates),
                    y: getRandomInt.apply(null, config.coordinates),
                    z: getRandomInt.apply(null, config.coordinates)
                },
                rotate: {
                    x: getRandomInt.apply(null, config.rotate),
                    y: getRandomInt.apply(null, config.rotate),
                    z: getRandomInt.apply(null, config.rotate)
                },
                scale: getRandomInt.apply(null, config.scale)
            };
        });
    }

    $http.get(randomDataSource).then(function (response) {
        var messages = response.data.value.map(function (item) {
            return item.joke;
        });
        $scope.data = generateData(messages);
    })
};