Pure CSS and JavaScript news ticker

index.html

<div id="ticker">
		<div id="ticker-wrapper">
			<ul id="ticker-wrapper-inner">
				<li>
                   <figure>
					<img src="http://placehold.it/80x80" alt="" />
				   </figure>
				   <h3>Item #1</h3>
				</li>
				<li>
                   <figure>
					<img src="http://placehold.it/80x80" alt="" />
				   </figure>
				   <h3>Item #2</h3>
				</li>
				<li>
                   <figure>
					<img src="http://placehold.it/80x80" alt="" />
				   </figure>
				   <h3>Item #3</h3>
				</li>
				<li>
                   <figure>
					<img src="http://placehold.it/80x80" alt="" />
				   </figure>
				   <h3>Item #4</h3>
				</li>
				<li>
                   <figure>
					<img src="http://placehold.it/80x80" alt="" />
				   </figure>
				   <h3>Item #5</h3>
				</li>
				<li>
                   <figure>
					<img src="http://placehold.it/80x80" alt="" />
				   </figure>
				   <h3>Item #6</h3>
				</li>
				<li>
                   <figure>
					<img src="http://placehold.it/80x80" alt="" />
				   </figure>
				   <h3>Item #7</h3>
				</li>
				<li>
                   <figure>
					<img src="http://placehold.it/80x80" alt="" />
				   </figure>
				   <h3>Item #8</h3>
				</li>
				<li>
                   <figure>
					<img src="http://placehold.it/80x80" alt="" />
				   </figure>
				   <h3>Item #9</h3>
				</li>
				<li>
                   <figure>
					<img src="http://placehold.it/80x80" alt="" />
				   </figure>
				   <h3>Item #10</h3>
				</li>
			</ul>
		</div>
	</div>	

pure-css-and-javascript-news-ticker.markdown

Pure CSS and JavaScript news ticker

A Pen by Gabriele Romanato on CodePen.

License.

script.js

(function() {
	function Ticker( element ) {
		this.el = document.getElementById( element );
		this.init();
	}

	Ticker.prototype = {
		init: function() {
			this.items = this.el.getElementsByTagName( "li" );
			this.wrapper = document.getElementById( "ticker-wrapper-inner" );
			this.totalItems = this.items.length;
			this.timer = null;
			this.index = 0;

			this.tick();
			this.hover();

			
		},

		tick: function() {
			var self = this;
			self._setElementOffsets();

			self.timer = setInterval(function() {
				self.index++;

				if( self.index == self.totalItems ) {
					self.index = 0;
				}

				var item = self.items[self.index];
				var top = item.getAttribute( "data-top" );
				self.wrapper.style.top = "-" + top + "px";


			}, 1500 );
		},

		hover: function() {
			var self = this;
			var li = self.items;

			for( var i = 0; i < self.totalItems; ++i ) {
				var item = li[i];
				item.addEventListener( "mouseover", function() {
					clearInterval( self.timer );
					self.timer = null;

				}, false);
				item.addEventListener( "mouseout", function() {
					self.tick();

				}, false);
			}	
		},

		_setElementOffsets: function() {
			var self = this;
			var li = self.items;

			for( var i = 0; i < self.totalItems; ++i ) {
				var item = li[i];
				var top = item.offsetTop;

				item.setAttribute( "data-top", top );
			}
		}
	};

	document.addEventListener( "DOMContentLoaded", function() {
		var news = new Ticker( "ticker" );

	});


})();

style.css

#ticker {
	width: 180px;
	height: 400px;
	margin: 2em auto;
}

#ticker-wrapper {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: relative;
	
}

#ticker-wrapper ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	height: 800px;
	position: relative;
	transition: all 1500ms ease-in;
}

#ticker-wrapper li {
	display: block;
	height: 80px;
	width: 100%;
	margin-bottom: 0.3em;
	position: relative;
}

#ticker-wrapper li:nth-child(even) {
	background: #f5f5f5;
}

#ticker-wrapper li figure {
	width: 80px;
	height: 80px;
	float: left;
	margin: 0;
	padding: 0;
}

#ticker-wrapper li figure img {
	display: block;
	width: 100%;
	height: 100%;
}

#ticker-wrapper li h3 {
	float: right;
	margin: 0;
	padding-top: 2em;
	padding-right: 0.5em;
	font-size: 1em;
}