Scroll Through Text On Hover - jQuery SlideText

An ultra light (~1kb minified) jQuery plugin to simulate the traditional <marquee> behavior that automatically scrolls through any text within a container on mouse hover.

See also:

• Best Text Typing Animation jQuery Plugins

How to use it:

1. Insert the minified version of the jQuery SlideText plugin after loading jQuery library (slim build is recommended).

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="dist/jquery.slidetext.min.js"></script>

2. Wrap the text into an element with the slidetext__content class and add it to a container with the slidetext class.

<div class="slidetext">
  <span class="slidetext__content">
      In sed nibh vel nulla tincidunt pretium non ut turpis. Quisque est quam, dapibus mattis dapibus sit amet, pellentesque congue ante. Pellentesque nec eros ac dui ultrices imperdiet vel sit amet ipsum. Pellentesque id sollicitudin ex. Nullam vitae velit massa. Proin aliquam arcu ac lectus egestas, interdum tempus justo sollicitudin. Proin venenatis quam vel tellus bibendum tempor. Mauris viverra, nisl ac molestie imperdiet, leo nisl pretium est, eget sagittis sapien tortor vel mi.
  </span>
</div>

3. Initialize the SlideText plugin and done.

$(function(){
  SlideText();
});

4. Specify the animation speed (px/sec).

$(function(){
  SlideText({
    'speed': 177
  });
});

5. Override the default CSS selecters if needed.

$(function(){
  SlideText({
    'elbox': '.slidetext',
    'elcontent': '.slidetext__content'
  });
});

---

This awesome jQuery plugin is developed by DimNS. For more Advanced Usages, please check the demo page or visit the official website.