Kayan Yazı Tasarımı
1
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))
Paylaş
Benzer Konular
Yorumlar
-
Arda
Merhaba, Sizin belirttiğiniz gibi kayan yazıyı kullanıcıların yazacağı mesajlardan oluşmasını istiyorum. Yani kullanıcı mesaj yazacak ve yazdığı mesaj yayınlanacak bunu nasıl yapabilirim.
Bunun için bir buton olacak ve butona tıklayınca mesaj yaz paneli açılacak, Yazılan mesaj aracılığı ile kayan mesaj olarak yayınlanacak..Teşekkürler..