Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css" />
	<title>Desine for Example </title>
	<link rel="stylesheet" href="css/news_ticker.css">
</head>
<body>
	<div class="wrap">
		<div class="news_feed">
			<p class="newsfeed_label">Latest News </p>
			<ul id="ticker01">
				<li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</a><span>||</span></li>
				<li><a href="#"> 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</a><span>||</span></li>
				<li><a href="#">  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident</a></li>
			</ul>
		</div>
		<div class="header">
		<h1>Website Header</h1>
		</div>
		<div class="navbar">
			<ul class="nav">
				<li><a href="#">Home</a></li>
				<li><a href="#">About us</a></li>
				<li><a href="#">Contact Us</a></li>
				<li><a href="#">Our Services</a></li>
				<li><a href="#">Blog</a></li>
			</ul>
		</div>
		<div class="content">
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis magna sed massa tempor rhoncus. Morbi euismod tellus id vulputate feugiat. Nulla id ullamcorper dui. Nam vel lectus eget quam pharetra tincidunt. Duis molestie rhoncus tincidunt. Phasellus leo dui, ullamcorper vitae velit vitae, fermentum tristique lorem. Duis eros arcu, viverra eget facilisis non, auctor a libero. Cras mattis dapibus justo. Pellentesque laoreet eros hendrerit justo ultrices aliquet. Pellentesque sit amet arcu ac velit viverra congue. Aliquam purus felis, venenatis feugiat nibh at, porta laoreet nulla. Mauris hendrerit purus quam, eu aliquet justo volutpat sit amet. Nulla consequat est ligula, in luctus quam posuere sed. Proin tincidunt in arcu id facilisis. Suspendisse interdum arcu et est convallis sagittis. 
			</p>
			<br />
			<p>
			Nam leo mauris, fermentum vitae neque sit amet, volutpat tempor odio. Aenean vitae adipiscing est. Donec vel ultrices massa. Suspendisse placerat nibh in mauris dictum, ac tincidunt sem luctus. Donec aliquet ante a ligula ultricies, ac mollis elit interdum. Morbi diam arcu, interdum quis varius eu, blandit vitae erat. Cras convallis eros in quam malesuada rutrum. Maecenas porta vitae massa ac malesuada. Sed ut molestie nisl. Maecenas rutrum commodo ligula, vel rutrum odio pretium ultricies. Morbi metus purus, blandit quis quam et, sodales varius ante. Aenean mattis tellus eu dui semper tincidunt. Nullam porta ut est a convallis. Fusce ante tortor, aliquam at dolor non, aliquam tempor turpis. Aliquam vitae bibendum velit, sit amet porttitor neque. Suspendisse potenti. 
			</p>
			<br />
			<p>
			Vivamus et porta velit. Duis quis purus adipiscing eros lacinia vulputate. Ut vel pharetra nisi. Quisque quis consectetur ipsum, a posuere dui. Aenean nisi tellus, iaculis a lorem sed, consectetur dignissim orci. Pellentesque egestas, sapien et semper pharetra, sapien odio auctor ligula, a ultrices tellus enim non felis. Sed in rhoncus orci, in egestas enim. Mauris eu egestas turpis. Duis consectetur tempus lacus, fringilla sollicitudin metus cursus non. Sed tincidunt nisl sit amet mauris aliquet, elementum sollicitudin ligula eleifend. Morbi dignissim convallis interdum. In venenatis fringilla mi, nec gravida ligula tristique sed. Curabitur pulvinar cursus nisi, non fermentum lacus faucibus vitae. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ante nec ipsum fermentum laoreet. Phasellus est ante, commodo nec feugiat fermentum, vehicula quis risus. 
			</p>
			<br />
			<p>
			Integer gravida sed nulla sed aliquet. Nullam rhoncus eget leo ac luctus. Nulla nec dolor arcu. Sed iaculis dictum tempus. Nullam sed justo urna. Integer bibendum ultrices commodo. Sed eu ipsum ante. Proin vel felis a eros hendrerit consectetur vel eget turpis. Vestibulum rhoncus pharetra dui, sed posuere sem commodo vel. Maecenas eget ipsum porta, elementum elit sed, porttitor dui. Fusce vestibulum sagittis nisl, non pellentesque risus mattis ac. Cras interdum est id auctor tincidunt. Aenean laoreet ante velit, sit amet aliquam metus facilisis sit amet. Phasellus sodales dignissim libero, id condimentum dolor fermentum ut. Nam tristique porta ornare. Donec auctor, nisi et interdum gravida, nunc enim aliquam libero, quis placerat orci augue non odio.  
			</p>
			<br />
			<p>
			Morbi scelerisque tortor at sem euismod, eget interdum nulla tincidunt. Phasellus faucibus sagittis nunc ut sollicitudin. Suspendisse augue arcu, vestibulum ut velit quis, volutpat feugiat arcu. Praesent euismod tristique leo non pretium. Aliquam lacinia ac ipsum in volutpat. Suspendisse lacus orci, volutpat quis vulputate in, sollicitudin sed odio. Vestibulum eget ipsum nisi. Sed dignissim varius dolor et facilisis. Fusce massa velit, laoreet ac diam et, posuere dictum leo. Nullam tempus neque libero, quis volutpat turpis condimentum quis.  
			</p>
		</div>
		<div class="footer">
		<p>Designed By: <a href="https://www.facebook.com/ashim.kumar.9803">Ashim Kumar pall</a></p>
		</div>
	</div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--		<script src="js/news_ticker.js"></script>
        <script src="js/plugins.js"></script> -->
</body>
</html>
              
            
!

CSS

              
                *{margin:0;padding:0;}
body{margin:0;padding:0; font-family: "Open Sans",Helvetica,Arial,sans-serif;}
.wrap{width:960px; min-height:1400px;background:#ecf0f1;margin:0 auto;}
.header{min-height:250px;background:#16a085; margin:0;padding:0;}
.header h1{text-align:center; padding-top:80px; color:#fff; font-size:60px; text-shadow:2px 2px 0px #030303;}
.navbar{background:#f39c12; height:40px; padding-left:100px;}
.navbar ul.nav{list-style:none;margin:0;padding:0;}
.navbar ul.nav li{float:left;}
.navbar ul.nav li a{ display:block;padding:10px; text-decoration:none; color:#fff;}
.navbar ul.nav li a:hover{ background:#e67e22;}
.content{padding:30px 150px;}
.content p{font-size:16px; color:#34495e; line-height:25px;}
.footer{height:30px; color:#ff0; background:#34495e;}
.footer p{text-align:center; padding:5px;}
.footer p a{color:#fff;}




/* ==============CSS for News Ticker======================*/
.news_feed{height:29px; background:#fff;}
.newsfeed_label{float: left; font-size: 16px;padding: 5px 10px;color: #fff;background: #e74c3c;}
#ticker01{float: left;}
.tickercontainer .mask {width: 900px !important;}
/* ==============CSS for News Ticker======================*/




/*=======news_ticker.css==============*/

/* liScroll styles */

.tickercontainer { /* the outer div with the black border */
// border: 1px solid #000;
background: #fff; 
//max-width: 538px; 
height: 27px; 
margin: 0; 
padding: 0;
overflow: hidden; 
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 8px;
width: 518px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 550px;
font: bold 14px Verdana;
list-style-type: none;
margin: 0;
padding: 0;

}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #000;
font: bold 14px Verdana;
margin: 0 5px 0 0;
} 
ul.newsticker span {
margin: 0 10px 0 0;
} 

/*=======news_ticker.css==============*/
              
            
!

JS

              
                /*========plugins.js=======*/


    jQuery(function(){
    jQuery("ul#ticker01").liScroll();
    }); 


/*========plugins.js=======*/

/*========news_ticker.js=======*/
/*!
 * liScroll 1.0
 * Examples and documentation at: 
 * http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
 * 2007-2010 Gian Carlo Mingati
 * Version: 1.0.2.1 (22-APRIL-2011)
 * Dual licensed under the MIT and GPL licenses:
 * https://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Requires:
 * jQuery v1.2.x or later
 * 
 */


jQuery.fn.liScroll = function(settings) {
		settings = jQuery.extend({
		travelocity: 0.07
		}, settings);		
		return this.each(function(){
				var $strip = jQuery(this);
				$strip.addClass("newsticker")
				var stripWidth = 1;
				$strip.find("li").each(function(i){
				stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
				});
				var $mask = $strip.wrap("<div class='mask'></div>");
				var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");								
				var containerWidth = $strip.parent().parent().width();	//a.k.a. 'mask' width 	
				$strip.width(stripWidth);			
				var totalTravel = stripWidth+containerWidth;
				var defTiming = totalTravel/settings.travelocity;	// thanks to Scott Waye		
				function scrollnews(spazio, tempo){
				$strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
				}
				scrollnews(totalTravel, defTiming);				
				$strip.hover(function(){
				jQuery(this).stop();
				},
				function(){
				var offset = jQuery(this).offset();
				var residualSpace = offset.left + stripWidth;
				var residualTime = residualSpace/settings.travelocity;
				scrollnews(residualSpace, residualTime);
				});			
		});	
};

/*========news_ticker.js=======*/

              
            
!
999px

Console