This is my initial foray into AngularJS, where I am creating a ticker display comprised of boxes.
Check out the CodePen here
The Code:
index.jade:
doctype html
html(ng-app="ticker")
head
script(src="../bower_components/angular/angular.js", type="text/javascript")
script(src="script.js")
link(rel="stylesheet", href="css.css")
body
div(ng-controller="tickerCtrl")
.ticker
.viewport(ng-class="{moving: moving}", ng-click="moveLeft()")
.box(ng-repeat="box in boxes")
span {{ box.title }}
button(type="button", ng-click="moveLeft()") < Move left
script.js
angular.module('ticker', [])
.controller('tickerCtrl', ['$scope', '$window', function($scope, $window) {
$scope.boxes = [
{title: 'Box 1'},
{title: 'Box 2'},
{title: 'Box 3'},
{title: 'Box 4'},
{title: 'Box 5'},
{title: 'Box 6'},
{title: 'Box 7'},
{title: 'Box 8'},
{title: 'Box 9'},
{title: 'Box 10'}
];
$scope.moving = false;
$scope.moveLeft = function() {
$scope.moving = true;
$window.setTimeout($scope.switchFirst, 2000);
};
$scope.switchFirst = function() {
$scope.boxes.push($scope.boxes.shift());
$scope.moving = false;
$scope.$apply();
};
}]);
css.less
.ticker {
width: 90%;
padding: 1em 1em;
height: 100px;
overflow: hidden;
position: relative;
.viewport {
&.moving {
animation: moveLeft 1 2s linear;
}
position: absolute;
height: 100px;
border-width: 1px 0;
border-style: solid;
border-color: #cccccc;
white-space: nowrap;
.box {
display: inline-block;
width: 100px;
height: 100%;
border: 1px solid #eee;
margin: 0 5px;
text-align: center;
}
}
}
@keyframes moveLeft {
0% { transform: translateX(0) }
100% { transform: translateX(-110px) }
}
Challenges Faced:
How can I achieve continuous movement? Adding
within$window.setInterval($scope.moveLeft, 2000);tickerCtrlonly triggers the animation once.Is it possible to dynamically retrieve element dimensions? Currently, the viewport shifts by
110pxbut ideally should match the first element'souterWidth.Should I continue with AngularJS or switch to jQuery for this task?