JarCastingangular-ticker
Simple angular ticker. Demo
Dependencies
Angular.
Usage
-
bower install simple-angular-ticker --save -
Add the scripts and css:
<link rel="stylesheet" href="bower_components/simple-angular-ticker/release/ticker.css">
<script src="bower_components/simple-angular-ticker/release/ticker.js"></script>
- Add the
simpleAngularTickermodule as a dependancy to your app:
angular.module('myApp', [ 'simpleAngularTicker' ])
- Define your ticker items, eg:
$scope.myTickerItems = [
{
title: 'item 1',
copy: 'amazing copy here'
},
{
title: 'item 2',
copy: 'wow, this is great'
},
{
title: 'item 3',
copy: 'hello angular'
}
]
- Add the ticker to your template (item
$indexis optional):
<ul ticker>
<li ng-repeat="item in myTickerItems" class="item-{{$index}}">
{{item.title}} - {{item.copy}}
</li>
</ul>
- (optional) Customise styles to get the design you desire. See styling notes below.
Options
timing (optional): accepts a string of numbers. This scrolls the items every X seconds. Regular JS milliseconds.
<ul ticker timing="2500">
<li ng-repeat="item in myTickerItems">
{{item.title}} - {{item.copy}}
</li>
</ul>
Styling
angular-ticker styling is as minimal as possible. For simplicity, only desktop is catered for as a default.
Depending on your requirements and for responsive design in particular, you will more than likely need to adjust some styles, or simply only show the ticker for larger screen sizes. For example:
- The ticker has a default fixed height value of
195px. Custom styles could be:
[ticker].active {
height:250px;
}
- Each ticker
lihas a height of39px(this isn't specifically defined). The height of anliis used to begin the scrolling effect with a minus margin of the same value. You may want to change this for different breakpoints (mobile could have 2 lines of text for example). Custom styles could be:
[ticker] .minus-margin-top {
margin-top:-60px;
}
@media (min-width:768px) {
[ticker] .minus-margin-top {
margin-top:-30px;
}
}