Simple Touch-enabled News Ticker Plugin
Newstape is a really small jQuery text scroller plugin which automatically & vertically scrolls through a list of news feeds with support for mouse wheel, mouse drag and touch swipe events.
Load jQuery library and the jQuery newstape plugin in your html page.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.newstape.js"></script>
Load the optional jQuery mousewheel plugin for mouse wheel support.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
Load the optional jquery.event.drag plugin for drag & swipe support.
<script src="https://cdn.jsdelivr.net/jquery.event.drag/2.2/jquery.event.drag.min.js"></script>
Create a basic news ticker as follow.
<div class="newstape">
<div class="newstape-content">
<div class="news-block">
<h3>News 1</h3>
<small>13.04.2015</small>
<p class="text-justify"> Content 1 ... </p>
<div class="text-right"> <a href="#">More</a> </div>
<hr />
</div>
<div class="news-block">
<h3>News 2</h3>
<small>13.04.2015</small>
<p class="text-justify"> Content 2 ... </p>
<div class="text-right"> <a href="#">More</a> </div>
<hr />
</div>
<div class="news-block">
<h3>News 3</h3>
<small>13.04.2015</small>
<p class="text-justify"> Content 3 ... </p>
<div class="text-right"> <a href="#">More</a> </div>
<hr />
</div>
</div>
</div>
Add your own CSS styles to the news ticker.
.newstape {
background-color: #3BB0D6;
color: #fff;
height: 400px;
overflow: hidden;
}
.newstape-content {
position: relative;
padding: 15px;
}
.newstape-drag { cursor: ns-resize; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
Call the plugin to start the news ticker.
$('.newstape').newstape();
Default settings.
$('.newstape').newstape({
// timer period
period: 30,
// offset pixel count
offset: 1,
// mousewheel scrolling
mousewheel: true,
// mousewheel offset pixel count
mousewheelRate: 30,
// dragging tape content
dragable: true
});