Endlessly scrolling text using CSS

Is it possible to create a continuous rolling text effect on an HTML page without any gaps, similar to a ticker tape display? For example, displaying "Hello World ... Hello World ... Hello World ... Hello World ..." continuously.

I attempted using the CSS style animation: marquee to achieve this effect, but the text kept rolling then jumping back to the beginning instead of seamlessly transitioning. Is there a CSS or JS solution available to accomplish this desired effect?

Answer ā„–1

Experience the fascinating "text rolling" effect with text, images, and mouse effects using a combination of JavaScript and CSS!

Answer ā„–2

What are your thoughts on using a library that can achieve this effect?

This particular library, found at , performs really well.

$(document).ready(function() {
  new Marquee('example', {
    // once or continuous
    continuous: true,
    // 'rtl' or 'ltr'
    direction: 'rtl',
    // pause between loops
    delayAfter: 1000,
    // when to start
    delayBefore: 0,
    // scroll speed
    speed: 0.5,
    // loops
    loops: -1
  });
});

////////////////////////////// LIBRARY BELOW ///////

// See: http://www.cssscript.com/marquee-like-horizontal-scroller-with-pure-javascript-marquee-js/
/*
Vanilla Javascript Marquee
Version: 0.1.0
Author: Robert Bossaert <https://github.com/robertbossaert>
Example call:

new Marquee('element');
new Marquee('element', {
direction: 'rtl',
});
*/
var Marquee = function(element, defaults) {
  "use strict";

  var elem = document.getElementById(element),
    options = (defaults === undefined) ? {} : defaults,
    continuous = options.continuous || true, // once or continuous
    delayAfter = options.delayAfter || 1000, // pause between loops
    delayBefore = options.delayBefore || 0, // when to start
    direction = options.direction || 'ltr', // ltr or rtl
    loops = options.loops || -1,
    speed = options.speed || 0.5,
    timer = null,
    milestone = 0,
    marqueeElem = null,
    elemWidth = null,
    self = this,
    ltrCond = 0,
    loopCnt = 0,
    start = 0,
    process = null,
    constructor = function(elem) {

      // Build html
      var elemHTML = elem.innerHTML,
        elemNode = elem.childNodes[1] || elem;

      elemWidth = elemNode.offsetWidth;

      marqueeElem = '<div>' + elemHTML + '</div>';
      elem.innerHTML = marqueeElem;
      marqueeElem = elem.getElementsByTagName('div')[0];
      elem.style.overflow = 'hidden';
      marqueeElem.style.whiteSpace = 'nowrap';
      marqueeElem.style.position = 'relative';

      if (continuous === true) {
        marqueeElem.innerHTML += elemHTML;
        marqueeElem.style.width = '200%';

        if (direction === 'ltr') {
          start = -elemWidth;
        }
      } else {
        ltrCond = elem.offsetWidth;

        if (direction === 'rtl') {
          milestone = ltrCond;
        }
      }

      if (direction === 'ltr') {
        milestone = -elemWidth;
      } else if (direction === 'rtl') {
        speed = -speed;
      }

      self.start();

      return marqueeElem;
    }

  this.start = function() {
    process = window.setInterval(function() {
      self.play();
    });
  };

  this.play = function() {
    // beginning
    marqueeElem.style.left = start + 'px';
    start = start + speed;

    if (start > ltrCond || start < -elemWidth) {
      start = milestone;
      loopCnt++;

      if (loops !== -1 && loopCnt >= loops) {
        marqueeElem.style.left = 0;
      }
    }
  }

  this.end = function() {
    window.clearInterval(process);
  }

  // Init plugin
  marqueeElem = constructor(elem);
}
body {
  background: #edf3f9;
  color: #3f4f5f;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  margin: 0 auto;
  width: 800px;
}

header {
  border-bottom: 2px solid #3f4f5f;
  padding: 6.25em 0 3.95em;
  text-align: center;
  width: 100%;
}

header h1 {
  margin: 0 0 10px;
}

.example {
  padding: 3em 0;
}

h2 {
  text-align: center;
}

pre {
  background: #f5f2f0;
  color: #000;
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  line-height: 26px;
  padding: 1em;
  text-shadow: 0 1px white;
  white-space: pre-wrap;
}

pre span.string {
  color: #690;
}

pre span.number {
  color: #905;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example">
  The quick brown fox ran over to the bar to drink some water. He walked up to the bar tender and said: blah blah blah.
</div>

Answer ā„–3

Here is a demo based upon the lib that Dreamer posted. I didn't like how it set inline styles on the element or how it used cookies to store past settings so I removed that in the crawler.js code.

This is a pretty old library (ie5 is mentioned (!)) but it seems to do the trick.

$(function() {

  marqueeInit({
    uniqueid: 'mycrawler',
    style: {
      
    },
    inc: 5, //speed - pixel increment for each iteration of this marquee's movement
    mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
    moveatleast: 2,
    neutral: 150,
    persist: true,
    savedirection: true
  });
});

//////////////// CRAWLER.JS FOLLOWS ///////////

/* Text and/or Image Crawler Script v1.53 (c)2009-2012 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.cā€¦



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="marquee" id="mycrawler">
  Those confounded friars dully buzz that faltering jay. An appraising tongue acutely causes our courageous hogs. Their fitting submarines deftly break your approving improvisations. Her downcast taxonomies actually box up those disgusted turtles.
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving data from a different thread in JavaScript

After coming across this code snippet, I decided to try it out but faced some challenges. The function "IsValidImageUrl()" is meant to provide an instant result, however, due to running in a separate thread, retrieving the value proved difficult. Even with ...

Managing selected ticket IDs in a table with AngularJS

I have a table that includes options for navigating to the next and previous pages using corresponding buttons. When I trigger actions for moving to the previous or next page (via controller methods), I store the IDs of checked tickets in an array $scope. ...

Leveraging jQuery within Node.js

Greetings, I am a newcomer here and I hope that my message is clear. My current challenge involves trying to incorporate jQuery into node.js, but unfortunately, all my efforts have ended in failure. I have spent hours attempting to resolve this issue to no ...

Troubles encountered when creating select/drop-down optgroup using jquery

Looking to incorporate the <optgroup> tag into a dropdown with JQuery. The option works as expected, but struggling with getting the option group to function correctly. Here's the HTML setup: <select name="DropDownID" id="DropDownID"> ...

Text parsing with jQuery

Hello fellow developers. I am interested in creating a text parser using jQuery. My goal is to develop a function that can take a string as input and convert it accordingly. Imagine we have a div with the following HTML structure: <div class="item"> ...

Executing an Amplifyjs GET request containing a request body

Is it possible to utilize GET requests with a message body using AmplifyJS? Specifically, I am curious about the process of achieving this functionality with AmplifyJS. While synthetic tests function properly (using Fiddler as my test client), I have enc ...

PHP script not running as intended

I created an HTML form where users can input values and select options. Once the user has made their selections, these values are then sent to a PHP script on the server. The PHP script retrieves data from a MySQL database based on the user-selected values ...

SMTPConnection._formatError experienced a connection timeout in Nodemailer

Our email server configuration using Nodemailer SMTP settings looked like this: host: example.host port: 25 pool: true maxConnections: 2 authMethod: 'PLAIN' auth: user: 'username' pass: 'pass' We encou ...

Tips on resolving the issue of an Axios post request not appearing in a get request in React

When using axios to make a post request in this code, a new username is posted, but there is an issue with retrieving the posted name from the API. How can I fix this problem to view my posted request? const App = () => { const [data, setData] = u ...

Handling OnClick events in D3 with Websocket Integration

My goal is to implement a Websocket in JavaScript that transmits a variable obtained when clicking on a node in a D3 chart. While I have made progress using static data, I'm struggling with initiating the code upon node click to retrieve the "user inf ...

When the width of the window is hidden, conceal

My webpage has a carousel with pictures, but on smaller devices, they do not appear properly. I am now trying to figure out how to hide the div if the width is less than 1015px. Here is the code for my div: <html> <body> <div id="myCarou ...

The functionality of changing the category in the second carousel slider on click using JavaScript appears to

Creating a bootstrap carousel slider that dynamically changes based on the selected category. For example, clicking on the hammer category will display only hammer images, while selecting the compass category will show compass images. Everything worked sm ...

Feeling unsure about starting the project with React?

I am encountering difficulties while setting up my React project. The errors I am facing are hindering the process, and I am seeking assistance. The new React app is being created at the following location: H:\React Projects\react-js. As I try ...

Styling just a single div when the state changes

I have a scenario where I am rendering 4 divs based on data fetched from my backend. Each div is colored according to a state change. While I have successfully implemented this, the issue is that all 4 divs can be colored in this way simultaneously. I want ...

Error encountered: JSON data is incomplete at the start of line 1, column 1

My project consists of a database, analysis.php, and index.php web pages. The analysis.php script retrieves data from the database, organizes it in a specific manner, and then displays it using json_encode($array); inside a div element with the id 'da ...

Viewing at full width on mobile exceeds 100% [React]

I'm attempting to make a div cover exactly 100% of the width on mobile devices, but no more. The code I'm using is as follows: Here is my React code: <div className="max-width-100vw"> HELLO I AM A UNIQUE SENTENCE HERE??? </div> And ...

Modifying the className attribute is not feasible in JavaScript

Looking to change the class of the first child inside div#programmation <div id="programmationEtat"> <div class="tab-pane ng-scope">...</div> <div class="tab-pane ng-scope">...</div> <div class="tab-pane ng-scope" ...

How can you achieve a vertical list display for a label while preserving its inline-block properties?

I have chosen to use labels for my radio buttons because I enjoy the convenience of being able to click on the text to select the option. However, I want these labels to appear in a vertical list format. Currently, they are displaying as blocks, causing th ...

Calculate the total of the smallest values in three columns as they are updated in real-time

I'm facing an issue with dynamically adding the sum of the 3 lowest values entered in columns. The Total Cost Field is not displaying any value, and changing the type from number to text results in showing NaN. I've tried various approaches but h ...

Designing a unique shape geometry using THREE JS

I've been struggling to replicate an existing city in a 3D environment using THREE.js. I have coordinates for approximately 1000 buildings, each with a varying number of corners making it impossible to use standard cubeGeometry. I attempted to create ...