Rotating text on a webpage in a circular motion

Question

Rotating text on a webpage in a circular motion

In my website design project, I am faced with the task of moving text from the left side of the screen to the right side. Initially, I used the <marquee> tag which worked smoothly without any errors.

However, my specific requirement is for the text to reappear on the left side as soon as it starts disappearing on the right side, rather than waiting for all the text to vanish before starting over. So far, I have only been able to achieve this using <html>. I would appreciate any suggestions for alternative methods to accomplish this.

javascript html css flash

Answer 1

Answer №1

One way to achieve this effect is by using Javascript:

To create a scrolling text animation, you can have two copies of the text positioned next to each other within a container. The left copy will be visible initially, then animate it offscreen to reveal the right copy. Once the animation completes, jump back to the original position and repeat the process.

Here's a basic example of how you can implement this with jQuery (please note that this code is untested):

<div class="outer">
  <div class="inner">
     some text
  </div>
</div>

CSS:

.outer, .inner {
  width: 100%;
}
.outer {
  position: relative;
  overflow: hidden;
}
.inner {
  position: absolute;
}

Javascript:

(function rerun(){
  var time = 10000 //ms

  $(".inner").slice(0,-1).remove()
  $i1=$(".inner")
  $i2=$i1.clone()

  $i1.css({left:0}).animate({left:"-100%"}, time)
  $i2.insertAfter($i1).css({left:"100%"}).animate({left:0}, time, rerun)
})()

This technique allows the text to continuously scroll from one side to the other smoothly. Adjusting the widths and timing can create different scrolling effects.

Answer 2

One way to achieve this effect is by using Javascript:

To create a scrolling text animation, you can have two copies of the text positioned next to each other within a container. The left copy will be visible initially, then animate it offscreen to reveal the right copy. Once the animation completes, jump back to the original position and repeat the process.

Here's a basic example of how you can implement this with jQuery (please note that this code is untested):

<div class="outer">
  <div class="inner">
     some text
  </div>
</div>

CSS:

.outer, .inner {
  width: 100%;
}
.outer {
  position: relative;
  overflow: hidden;
}
.inner {
  position: absolute;
}

Javascript:

(function rerun(){
  var time = 10000 //ms

  $(".inner").slice(0,-1).remove()
  $i1=$(".inner")
  $i2=$i1.clone()

  $i1.css({left:0}).animate({left:"-100%"}, time)
  $i2.insertAfter($i1).css({left:"100%"}).animate({left:0}, time, rerun)
})()

This technique allows the text to continuously scroll from one side to the other smoothly. Adjusting the widths and timing can create different scrolling effects.

Rotating text on a webpage in a circular motion

Answer №1

Similar questions

Include new options to the select box only if they are not already listed

What is the reason behind React re-rendering child components despite passing props that have been memoized with useMemo?

Gap in footer spacing on Internet Explorer is significantly large

A camera control stick in JavaScript

Developing play and pause capabilities using JavaScript for the existing audio player

Looking to add elements to a specific div dynamically using jQuery? Let's explore how to insert comments seamlessly

Updating the database table using javascript

Is there a way to blend together two elements within a Bigcommerce theme seamlessly?

Error EPERM: Attempting to delete forbidden operation on 'C:Users** ode_modules.node-sass.DELETEvendorwin32-x64-57inding.node'

What is the best way to send a selected value from a dropdown in a Jade template to a REST API in a Node.js application

Designing stylesheets for larger screens to optimize the layout

Unusual conduct exhibited by jQuery's css() function for setting the width

Navigating with UI-Router within a single view for both viewing and editing purposes

Is it possible to apply a template file to all of my HTML pages for consistency?

Trouble mapping an array of objects in ReactJS

Ensure that Google Maps API in React always zooms in to the maximum level upon each

Issue with bootstrap accordion not collapsing other open tabs automatically

Showcasing an array of images on a Jupyter notebook layout

Tips for universalizing the code of a file upload web form to accommodate various forms with distinct id attributes

What methods can be used to retrieve text data from a website built with Angular technology?

Rotating text on a webpage in a circular motion

Answer №1

Similar questions

Include new options to the select box only if they are not already listed

What is the reason behind React re-rendering child components despite passing props that have been memoized with useMemo?

Gap in footer spacing on Internet Explorer is significantly large

A camera control stick in JavaScript

Developing play and pause capabilities using JavaScript for the existing audio player

Looking to add elements to a specific div dynamically using jQuery? Let's explore how to insert comments seamlessly

Updating the database table using javascript

Is there a way to blend together two elements within a Bigcommerce theme seamlessly?

Error EPERM: Attempting to delete forbidden operation on 'C:Users** ode_modules.node-sass.DELETEvendorwin32-x64-57inding.node'

What is the best way to send a selected value from a dropdown in a Jade template to a REST API in a Node.js application

Designing stylesheets for larger screens to optimize the layout

Unusual conduct exhibited by jQuery's css() function for setting the width

Navigating with UI-Router within a single view for both viewing and editing purposes

Is it possible to apply a template file to all of my HTML pages for consistency?

Trouble mapping an array of objects in ReactJS

Ensure that Google Maps API in React always zooms in to the maximum level upon each

Issue with bootstrap accordion not collapsing other open tabs automatically

Showcasing an array of images on a Jupyter notebook layout

Tips for universalizing the code of a file upload web form to accommodate various forms with distinct id attributes

What methods can be used to retrieve text data from a website built with Angular technology?

Error EPERM: Attempting to delete forbidden operation on 'C:Users** ode_modules.node-sass.DELETEvendorwin32-x64-57inding.node'