Html, Css ve jQuery teknolojilerini kullanarak oluşturulan kayan yazı tasarımını kullanımınıza sunuyoruz. Genellikle haber sitelerinde görmeye alışkın olduğumuz son dakika haberin yayınlandığı görsel açıdan çok dikkat çekici olması yönünden sıkça kullanılmaktadır.

Nasıl yapıldığı hakkında kod dizinlerinin yer aldığı bölümleri inceleyebilir, demo adresinden uygulamayı deneyebilirsiniz.

HTML Şablonu

<div class="base-container">

<div class="last-minute-title">
	
		<i class="icon fa-spin2  blink"></i>
		<span>SON DAKİKA</span>
		</div>


<div class="scroll-content">
		<marquee width="490px"  direction="left" scrollamount="5" onMouseOver="stop()" onMouseOut="start()">

<ul class="overview">

<li><a href="#">Reyhanlı’da Bomba Paniği!</a></li>


<li><a href="#">Reyhanlı’da Bomba Paniği!</a></li>


<li><a href="#">Reyhanlı’da Bomba Paniği!</a></li>

			
			</ul>

		</marquee>	
		</div>

	</div>

CSS Şablonu

body {font-family: "Open Sans",Helvetica,sans-serif;}
.icon {font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.fa-spin2:before {content: '\f192';font-size: 13px;}

.base-container {
background: none repeat scroll 0 0 #d82827;
height: 37px;
overflow: hidden;
z-index: 1;width: 610px;
}
.last-minute-title {
float: left;padding-left: 4px;
margin-right: 7px;
position: relative;
color: #fff;
background: #b82323;
}

.last-minute-title span {
display: inline-block;
font-size: 12px;
font-weight: 700;
line-height: 37px;
margin: 0 10px 0 0px;
}

.last-minute-title:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136,183,213,0);
border-left-color: #b82323;
border-width: 6px;
margin-top: -6px;
}
.last-minute .scroll-content {
overflow: hidden;
width: 850px;
height: 37px;
float: left;
position: relative;
}
.last-minute .scroll-content .overview {
position: absolute;
}
.last-minute .scroll-content li {
margin-right: 30px;
padding-right: 30px;
position: relative;
float: left;
}

.blink {color: #fff;}

.overview{left: 0px;margin: 0;}
.overview li {display: -webkit-inline-box; padding: 0px 15px;}
.overview li a{color:#fff;display:block;font-size:14px;line-height:36.7px;text-decoration: none;}
marquee { margin: 0;}

jQuery Şablonu

(function($)
{
	$.fn.blink = function(options)
	{
		var defaults = { delay:500 };
		var options = $.extend(defaults, options);
		
		return this.each(function()
		{
			var obj = $(this);
			setInterval(function()
			{
				if($(obj).css("visibility") == "visible")
				{
					$(obj).css('visibility','hidden');
				}
				else
				{
					$(obj).css('visibility','visible');
				}
			}, options.delay);
		});
	}
}(jQuery))

Demo – İndir