How to achieve Smooth Marquee Effect with jQuery

Written by: Muninder

Updated: July, 21, 2022

It’s a known fact that website readers/visitors love some elegance and smoothness in a site these days. So any Web Designer/Developer has to focus more on smaller things rather than just building a functional website. A lot of things have changed in the past few years in the field of Web Designing. With the rise of new scripting technologies like HTML5, CSS3 the user experience has gone to another level.

But with every good thing, a bad thing comes freely. Similarly, with these new scripting technologies the issue of Browser Compatibility comes into the picture. You might say ignore those browsers which cause trouble. But can we really ignore Internet Explorer (IE) and other older builds of Opera, Safari, etc  just because we are unable to implement browser specific hacks ?

In a nutshell, a good designer or a developer’s definition ends with a small but important line. That line states that a person should design or develop such a site that is compatible with all the available browsers. By available browsers, I mean to say popular one’s. And IE is still popular enough in small – medium scale companies.

So we as designers are left with only one choice i.e. to go to basics and make use of javascript. But fortunately today, we have advanced builds of javascripts  in the form of jQuery and AJAX. Obviously, we are also going to use jQuery to add smoothness to the marquee element. The tutorial is very easy as you just have to include one jQuery plugin in your code.

Smooth Marquee Effect jQuery
Snapshot of the Demo ‘Smooth Marquee’ page

Unlike my other tutorials,  I will split this one up into 3 parts – Tutorial, Code & Demo/Download.

Tutorial : Smooth Marquee Effect with jQuery

  1. First of all download the Silky Smooth Marquee jQuery plugin written by Remy Sharp.
  2. Download jQuery (Latest Version) and call it in your HTML file using the <script> tag. I always prefer using the minified version as it’s smaller in size. The uncompressed version would work as well.
  3. Now call the Smooth Marquee Plugin the same way. There is no minified version for this. So you’ve to use the uncompressed version or you can personally minify it using the Minify Javascript tool.
  4. After calling the core jQuery file and the Smooth Marquee plugin; we have to trigger the plugin using a block of code. (Refer the Code section for the same). This code requires some specific edits as you need to add the class of the <marquee> element so that plugin knows which part of your HTML code requires it.
  5. 2nd to 4th point of this tutorial are specific to the Head section of your page/site. Now we move on to setting up the <marquee> element with some specific parameters. Actually Remy’s script includes the stop on hover state & start on non-hover state code. But I didn’t quite like that function. Hence in the code below I’ve used the normal javascript parameters onmouseout=”this.start()” and onmouseover=”this.stop()” to run the Smooth Marquee when not hovered upon it and at the same time to stop it when hovered upon that area.
  6. That’s it! Now you’ll finally see a Smooth Marquee Effect on your site.
<div>I hope you've got the theoretical part of this tutorial. Now we'll see it's practical usage in the Code &amp; the Demo/Download section.</div>

The Final Code

Before starting with the actual code, upload the files mentioned above and call it properly. I have uploaded both – jQuery as well the Smooth Marquee plugin file to the same folder/directory where the index.html file is placed.

<title>Smooth Marquee Effect with jQuery</title>
<script type="text/css>.inner_area p {word-wrap: normal;}</script>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.marquee.js"></script>
$('div.inner_area marquee').marquee('smooth_m').mouseover(function () {
}).mouseout(function () {
}).mousemove(function (event) {
if ($(this).data('drag') == true) {
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
}).mousedown(function (event) {
$(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
}).mouseup(function () {
$(this).data('drag', false);
<div class="inner_area">
<marquee class="smooth_m" behavior="scroll" direction="up" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="1" height="350" width="650">
<h1>First Paragraph</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed magna tortor. Nam dictum arcu sit amet mauris scelerisque bibendum. Nunc et arcu nisi, eu facilisis sapien. Donec ipsum sem, venenatis eu consequat ac, blandit sed turpis. Phasellus porta scelerisque est quis condimentum. Mauris purus metus, aliquam sit amet posuere vitae, pharetra sed risus. Donec sed ipsum vitae justo convallis imperdiet. Proin id felis vitae nibh feugiat condimentum. Phasellus congue diam ac sapien molestie vulputate. Quisque tincidunt mollis est, at aliquet massa rhoncus et. Vestibulum ut elit sed quam feugiat euismod rhoncus ac dui. Quisque metus nisi, volutpat in accumsan ac, luctus a leo. Integer ac risus id quam euismod vulputate et a dolor. Curabitur sagittis rhoncus metus, in porttitor nibh fringilla in. Curabitur ac vulputate leo.</p>
<h1>Second Paragraph</h1>
<p>Vivamus et lorem fermentum lacus volutpat sagittis id a nisl. Nulla facilisi. Nulla eget turpis sit amet nisi tincidunt convallis ac non libero. Phasellus arcu neque, tincidunt quis ullamcorper eget, faucibus nec lacus. Proin placerat, quam sit amet tempor auctor, est magna porta lectus, et commodo eros quam in lectus. Phasellus cursus nulla nec mauris interdum ac viverra metus euismod. Pellentesque sit amet sagittis massa.</p>

If you’ve any doubt/queries regarding this code then use the Comment section to bring the exact problem in front of me. I’ve deliberately not styled (designed) the above piece of code as some of you may require the exact piece of code. So you can just copy paste the code on your site and design it according to your needs.

Demo/Download this jQuery Effect

For showing you a Demonstration of this Smooth Marquee Effect I’ve ‘simple’ designed a page. Below you’ll find the link to the Demo as well as the Download link of this styled piece of code.
Demo Download
I hope you liked this easy tutorial. For more Subscribe to DailyBlogging’s Newsletter / RSS Feeds.
Have you tried any other jQuery plugin to get a similar smooth marquee effect ?


Copyright @2021