Very Simple, Very Smooth, JavaScript Marquee

Very Simple, Very Smooth, JavaScript Marquee

hiya simple demo from recommendations in above comments: http://jsfiddle.net/FWWEn/

with pause functionality on mouseover: http://jsfiddle.net/zrW5q/

hope this helps, have a nice one, cheers!

html

<h1>Hello World!</h1>
<h2>I'll marquee twice</h2>
<h3>I go fast!</h3>
<h4>Left to right</h4>
<h5>I'll defer that question</h5>​

Jquery code

 (function($) {
$.fn.textWidth = function(){
var calc = '<span style="display:none">' + $(this).text() + '</span>';
$('body').append(calc);
var width = $('body').find('span:last').width();
$('body').find('span:last').remove();
return width;
};

$.fn.marquee = function(args) {
var that = $(this);
var textWidth = that.textWidth(),
offset = that.width(),
width = offset,
css = {
'text-indent' : that.css('text-indent'),
'overflow' : that.css('overflow'),
'white-space' : that.css('white-space')
},
marqueeCss = {
'text-indent' : width,
'overflow' : 'hidden',
'white-space' : 'nowrap'
},
args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args),
i = 0,
stop = textWidth*-1,
dfd = $.Deferred();

function go() {
if(!that.length) return dfd.reject();
if(width == stop) {
i++;
if(i == args.count) {
that.css(css);
return dfd.resolve();
}
if(args.leftToRight) {
width = textWidth*-1;
} else {
width = offset;
}
}
that.css('text-indent', width + 'px');
if(args.leftToRight) {
width++;
} else {
width--;
}
setTimeout(go, args.speed);
};
if(args.leftToRight) {
width = textWidth*-1;
width++;
stop = offset;
} else {
width--;
}
that.css(marqueeCss);
go();
return dfd.promise();
};
})(jQuery);

$('h1').marquee();
$('h2').marquee({ count: 2 });
$('h3').marquee({ speed: 5 });
$('h4').marquee({ leftToRight: true });
$('h5').marquee({ count: 1, speed: 2 }).done(function() { $('h5').css('color', '#f00'); })​

How to create a simple, smooth marque?

 (function($) {
$.fn.textWidth = function(){
var calc = '<span style="display:none">' + $(this).text() + '</span>';
$('body').append(calc);
var width = $('body').find('span:last').width();
$('body').find('span:last').remove();
return width;
};

$.fn.marquee = function(args) {
var that = $(this);
var textWidth = that.textWidth(),
offset = that.width(),
width = offset,
css = {
'text-indent' : that.css('text-indent'),
'overflow' : that.css('overflow'),
'white-space' : that.css('white-space')
},
marqueeCss = {
'text-indent' : width,
'overflow' : 'hidden',
'white-space' : 'nowrap'
},
args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args),
i = 0,
stop = textWidth*-1,
dfd = $.Deferred();

function go() {
if(that.css('overflow')!="hidden") {
that.css('text-indent', width + 'px');
return false;
}
if(!that.length) return dfd.reject();
if(width == stop) {
i++;
if(i == args.count) {
that.css(css);
return dfd.resolve();
}
if(args.leftToRight) {
width = textWidth*-1;
} else {
width = offset;
}
}
that.css('text-indent', width + 'px');
if(args.leftToRight) {
width++;
} else {
width--;
}
setTimeout(go, args.speed);
};

if(args.leftToRight) {
width = textWidth*-1;
width++;
stop = offset;
} else {
width--;
}
that.css(marqueeCss);
go();
return dfd.promise();
};
// $('h1').marquee();
$("h1").marquee();
$("h1").mouseover(function () {
$(this).removeAttr("style");
}).mouseout(function () {
$(this).marquee();
});
})(jQuery);


DEMO

Simple left right scrolling marquee

I suggest the Silky Smooth Marquee.

It uses the standard html marquee tag, so it will work without javascript enabled. However, with javascript enabled, it uses jquery to enhance the marquee and provides many customization options.

Here's the demo page.

Javascript Marquee to replace <marquee> tags

Here is a jQuery plugin with a lot of features:

http://jscroller2.markusbordihn.de/example/image-scroller-windiv/

And this one is "silky smooth"

http://remysharp.com/2008/09/10/the-silky-smooth-marquee/

Javascript Marquee text is clipped for large fontsizes

The reason you are not getting the expected results is because your calculate function is not returning what you expect.

This is because:

The span that is created is wrapping. to fix this add the css 'white-space: nowrap'. And also because the span has a different font-size compared to the H1 (you grab the H1 text and put it into the span, this does not come with the H1 font-size).

Fiddle: http://jsfiddle.net/xYdBj/210/

Here is an updated textWidth function:

$.fn.textWidth = function(){
var calc = '<span style="display:none; white-space: nowrap; font-size: '+$(this).css('font-size')+'">' + $(this).text() + '</span>';
$('body').append(calc);
var width = $('body').find('span:last').width();
$('body').find('span:last').remove();
return width;
};

CSS3 Marquee Effect, Without Empty Space

Here is a sample how you can do, and by setting the delay and duration you control the space between the texts

.marquee {  background-color: #ddd;  width: 500px;  margin: 0 auto;  overflow: hidden;  white-space: nowrap;}.marquee span {  display: inline-block;  font-size: 20px;  position: relative;  left: 100%;  animation: marquee 8s linear infinite;}.marquee:hover span {  animation-play-state: paused;}
.marquee span:nth-child(1) { animation-delay: 0s;}.marquee span:nth-child(2) { animation-delay: 0.8s;}.marquee span:nth-child(3) { animation-delay: 1.6s;}.marquee span:nth-child(4) { animation-delay: 2.4s;}.marquee span:nth-child(5) { animation-delay: 3.2s;}
@keyframes marquee { 0% { left: 100%; } 100% { left: -100%; }}
<p class="marquee">  <span>this is a</span>  <span>simple marquee</span>  <span>using css</span>  <span>only tech</span>  <span>with a delay</span></p>


Related Topics



Leave a reply



Submit