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
How to Get the Cursor Position in a Textarea
Changing Nav-Bar Color After Scrolling
Html 5 Canvas Lineto() Line Color Issues
Angular: Conditional Class With *Ngclass
How to Get the Background Color Code of an Element in Hex
Check Element CSS Display With JavaScript
Detect Ipad/Iphone Webview Via JavaScript
Which Equals Operator (== VS ===) Should Be Used in JavaScript Comparisons
How to Merge Properties of Two JavaScript Objects Dynamically
How to Add a ≪Script≫ Element to the Dom and Execute Its Code
Play an Audio File Using Jquery When a Button Is Clicked
PHP+Js: How to Do Fileuploads in HTML Form as Content-Type Multipart (Via Js)
How to Use Jquery to Select a Dropdown Option
Force Dom Redraw/Refresh on Chrome/Mac
Accessing a CSS Custom Property (Aka CSS Variable) Through JavaScript
How to Correctly Detect Orientation Change Using Phonegap on Ios