How can I achieve an endless scrolling text effect within a square on a webpage using CSS?

My header currently displays a horizontal infinite scroll of text, but I am looking to achieve a square pattern wrapping around the page. Can you provide guidance on how this can be accomplished?

Below is the code snippet I am working with:

.marquee {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 5s linear infinite;
}

.marquee2 span {
  animation-delay: 2.5s;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}


<h1 class="marquee">
         <span>Stan Urbiel &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stan
Urbiel&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stan Urbiel
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
     </h1>

     <h1 class="marquee marquee2">
         <span>Stan Urbiel &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stan
Urbiel &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stan Urbiel
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
     </h1>

I have considered using the following animation for achieving the desired effect:

div {
   height: 400px;
   width:500px;
   border: solid 1px blue;
   position: relative;
}
h3 {
    background-color: tomato;
    display: inline-block;
    margin: 0;
    padding: 10px;
    animation: move 5s infinite linear;
    position: absolute;
}


@keyframes move {
    0% { left: 0px; top: 0%; transform: translate(-0%, 0%);}
   25% { left: 0px; top: 100%; transform: translate(0%, -100%);}
   50% { left: 100%; top: 100%; transform: translate(-100%, -100%);}
   75% { left: 100%; top: 0%; transform: translate(-100%, -0%);}
   100% { left: 0px; top: 0%; transform: translate(-0%, 0%);}
}

<!-- language: lang-html -->

    <div>
      <h3>Hai</h3>
    </div>

<!-- end snippet -->

Rather than sticking to horizontal movement during direction changes, my goal is to have the text transition either horizontally or vertically depending on the current direction.

htmlcss

Answer №1

Is this the specific design you're referring to? Customization may be necessary to adjust the text layout around the border.

When implementing this strategy, keep in mind two crucial factors:

  1. The square component plays a vital role in correctly positioning the rectangular element post-rotation.
  2. As text overflows the square element, excess content extends beyond borders, requiring the use of a wrapper to hide it.

.wrapper {
  height: 400px;
  width:500px;
  border: solid 1px blue;
  position: relative;
  overflow: hidden;
}

.move-around {
  background-color: pink;
  display: inline-block;
  animation: moveAround 5s infinite linear;
  position: absolute;
  height: 50px;
  width: 50px;
}

.change-direction {
  background-color: #ccf4;
  display: inline-block;
  animation: changeDirection 5s infinite steps(1, end);
  white-space: nowrap;
  height: 50px;
  position: absolute;
...

@keyframes changeDirection {
    0% { transform: rotate(90deg); }
   25% { transform: rotate(0deg); }
   50% { transform: rotate(270deg); }
   75% { transform: rotate(180deg); }
}
<div class="wrapper">
  <div class="move-around">
    <div class="change-direction">
      <h3>Hello There!</h3>
    </div>
  </div>
</div>

If you are considering a marquee-type border instead, replicating the existing setup on all sides of the element could be beneficial.

An issue arises with overlapping corners. Utilizing colored boxes to cover these areas may improve the aesthetic appeal.

.marquee {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  position: absolute
...
38610%
translate(-100%,
0);
}
}
<span class="part.two">
Stan Urbiel &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stan Urbiel &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stan Urbiel &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></answer1>
<exanswer1><div class="answer" id="unique-id-59013070" lang="4.0s" code="1574539181" i="59013069" l="4.0" c="1574539181" a="anNlYQ==" ai="1682070">
<p>Is this the specific style you're talking about? Customization might be required to adapt the text layout around the border.</p>

<p>When following this method, consider two vital aspects:</p>

<ol>
<li>The square component is essential for accurately placing the rectangular element after rotation.</li>
<li>Due to overflowing text within the square element, additional content goes beyond the borders, which calls for a wrapper to conceal it.</li>
</ol>

<div>
<div>
<pre class="snippet-code-css lang-css"><code>.wrapper {
  height: 400px;
  width:500px;
  border: solid 1px blue;
  position: relative; 
  overflow: hidden;
}

.move-around {
  background-color: pink;
  display: inline-block;
  animation: moveAround 5s infinite linear;
  position: absolute;
  height: 50px;
  width: 50px;
}

.change-direction {
  background-color: #ccf4;
  display: inline-block;
  animation: changeDirection 5s infinite steps(1, end);
  white-space: nowrap;
  height: 50px;
  position: absolute;
  left: -50%;
}

@keyframes moveAround {
    0% { left: 0px; top: 0%; transform: translate(0%, 0%); }
   25% { left: 0px; top: 100%; transform: translate(0%, -100%); }
   50% { left: 100%; top: 100%; transform: translate(-100%, -100%); }
   75% { left: 100%; top: 0%; transform: translate(-100%, 0%); }
  100% { left: 0px; top: 0%; transform: translate(0%, 0%); }
}

@keyframes changeDirection {
    0% { transform: rotate(90deg); }
   25% { transform: rotate(0deg); }
   50% { transform: rotate(270deg); } 
   75% { transform: rotate(180deg); }
}
<div class="wrapper">
  <div class="move-around">
    <div class="change-direction">
      <h3>Hello There!</h3>
    </div>
  </div>
</div>

If considering a marquee-style border, duplicating the current setup on all sides of the element could be helpful.

A challenge emerges with overlapping corners. Using colored boxes to cover these areas could enhance the visual appeal.

.marquee {
  margin: 0;
  white-space: nowrap; 
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  height: 1em;
  width: 100%;
}

.marquee.bottom {
  top: auto;
  right: auto;
  left: 0; 
  bottom: 0;
  transform: rotate(180deg);
}

.marquee.left {
  bottom: auto;
  right: auto;
  top: 50%;
  left: calc(-50%</div>
</div></answer1>
<exanswer1><div class="answer" id="unique-id-59013070" lang="4.0s" code="1574539181" i="59013069" l="4.0" c="1574539181" a="anNlYQ==" ai="1682070">
<p>Is this the particular style you're referencing? Customization might be necessary to adapt the text arrangement around the border.</p>

<p>Following this approach involves considering two important aspects:</p>

<ol>
<li>The square component's role is critical in properly positioning the rectangular element post-rotation.</li>
<li>Text overflowing the square element extends beyond borders, requiring the use of a wrapper to hide it.</li>
</ol>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>.wrapper {
  height: 400px;
  width: 500px;
  border: solid 1px blue;
  position: relative;
  overflow: hidden;
}

.move-around {
  background-color: pink;
  display: inline-block;
  animation: moveAround 5s infinite linear;
  position: absolute;
  height: 50px;
  width: 50px;
}

.change-direction {
  background-color: #ccf4;
  display: inline-block;
  animation: changeDirection 5s infinite steps(1, end);
  white-space: nowrap;
  height: 50px;
  position: absolute;
  left: -50%;
}

@keyframes moveAround {
    0% { left: 0px; top: 0%; transform: translate(0%, 0%); }
   25% { left: 0px; top: 100%; transform: translate(0%, -100%); }
   50% { left: 100%; top: 100%; transform: translate(-100%, -100%); }
   75% { left: 100%; top: 0%; transform: translate(-100%, 0%); }
  100% { left: 0px; top: 0%; transform: translate(0%, 0%); }
}

@keyframes changeDirection {
    0% { transform: rotate(90deg); }
   25% { transform: rotate(0deg); }
   50% { transform: rotate(270deg); } 
   75% { transform: rotate(180deg); }
}
<div class="wrapper">
  <div class="move-around">
    <div class="change-direction">
      <h3>Hello There!</h3>
    </div>
  </div>
</div>

If you are looking at a marquee-style border instead, you can duplicate the current configuration on all sides of the element to potentially find value.

An obstacle arises with corner overlap. Consider using colored boxes to mask these areas for improved aesthetics.

.marquee {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  height: 1em;
  width: 100%;
}

.marquee.bottom {
  top: auto;
  right: auto;
  left: 0;
  bottom: 0;
  transform: rotate(180deg);
}

.marquee.left {
  bottom: auto;
  right: auto;
  top: 50%;
  left: calc(-50%</div>
</div></answer1>
<exanswer1><div class="answer" i="59013069" l="4.0" c="1574539181" a="anNlYQ==" ai="1682070">
<p>Are you referring to this specific design? Customization may be required to adjust the text layout around the border.</p>

<p>When using this technique, you need to consider two crucial points:</p>

<ol>
<li>The importance of the square component in accurately positioning the rectangular element after rotation.</li>
<li>Because of text overflowing the square element, there is an extension beyond borders, necessitating the utilization of a wrapper to conceal it.</li>
</ol>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>.wrapper {
  height: 400px;
  width:500px;
  border: solid 1px blue;
  position: relative; 
  overflow: hidden;
}

.move-around {
  background-color: pink;
  display: inline-block;
  animation: moveAround 5s infinite linear;
  position: absolute;
  height: 50px;
  width: 50px;
}

.change-direction {
  background-color: #ccf4;
  display: inline-block;
  animation: changeDirection 5s infinite steps(1, end);
  white-space: nowrap;
  height: 50px;
  position: absolute;
  left: -50%;
}

@keyframes moveAround {
    0% { left: 0px; top: 0%; transform: translate(0%, 0%); }
   25% { left: 0px; top: 100%; transform: translate(0%, -100%); }
   50% { left: 100%; top: 100%; transform: translate(-100%, -100%); }
   75% { left: 100%; top: 0%; transform: translate(-100%, 0%); }
  100% { left: 0px; top: 0%; transform: translate(0%, 0%); }
}

@keyframes changeDirection {
    0% { transform: rotate(90deg); }
   25% { transform: rotate(0deg); }
   50% { transform: rotate(270deg); } 
   75% { transform: rotate(180deg); }
}
<div class="wrapper">
  <div class="move-around">
    <div class="change-direction">
      <h3>Hello There!</h3>
    </div>
  </div>
</div>

If a marquee-style border is being considered instead, you could replicate the current setup four times for each side of the element....le overlapping corners. Maybe using colored boxes to cover the corners would yield a visually appealing result?

.marquee {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  height: 1em;
  width: 100%;
}

.marquee.bottom {
  top: auto;
  right: auto;
  left: 0;
  bottom: 0;
  transform: rotate(180deg);
}

.marquee.left {
  bottom: auto;
  right: auto;
  top: 50%;
  left: calc(-50% + 0.5em);
  transform: rotate(270deg);
}

.marquee.right {
  left: auto;
  bottom: auto;
  top: 50%;
  right: calc(-50% + 0.5em);
  transform: rotate(90deg);
}
...
]</div></div></answer1>
<exanswer1><div class="answer" i="59013069" l="4.0" c="1574539181" a="anNlYQ==" ai="1682070">
<p>Is this what you're talking about? You'll have to figure out how to alter it to fit your needs, but the words are circling the border.</p>

<p>The two caveats with the way I did it are:</p>

<ol>
<li>The square element is necessary to get the rectangular one to align properly when rotated</li>
<li>Because the words extend past the square element, they go out of bounds which is why I set the wrapper to hide overflow.</li>
</ol>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>.wrapper {
  height: 400px;
  width:500px;
  border: solid 1px blue;
  position: relative;
  overflow: hidden;
}

.move-around {
  background-color: pink;
  display: inline-block;
  animation: moveAround 5s infinite linear;
  position: absolute;
  height: 50px;
  width: 50px;
}

.change-direction {
  background-color: #ccf4;
  display: inline-block;
  animation: changeDirection 5s infinite steps(1, end);
  white-space: nowrap;
  height: 50px;
  position: absolute;
  

@keyframes moveAround {
    0% { left: 0px; top: 0%; transform: translate(0%, 0%); }
   25% { left: 0px; top: 100%; transform: translate(0%, -100%); }
   ...
]

@keyframes changeDirection {
    0% { transform: rotate(90deg); }
   25% { transform: rotate(0deg); }
   50% { transform: rotate(270deg); } 
   75% { transform: rotate(180deg); }
}
<div class="wrapper">
  <div class="move-around">
    <div class="change-direction">
      <h3>Hello There!</h3>
    </div>
  </div>
</div>

I do get the feeling you meant a ticker border though. In which case, you could maybe just do what you already figured out, except 4 times for each side of the element.

The issue here is figuring out what to do at the corners when they overlap. Beats me! Maybe it will look good if you have colored boxes covering the corners?

QUIZ_MESSAGE_BODY ]]

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

Does Internet Explorer 10 support the FormData object?

I've developed a JavaScript app that enables me to upload images asynchronously, and it works seamlessly in most browsers. However, the infamous Internet Explorer is causing some trouble... To address this issue, I devised a workaround for IE9- versi ...

javascriptajaxhtmlinternet-explorerfile-upload

Elements are failing to respond to the padding and margin adjustments in my CSS styling

I've been experimenting with creating a visually appealing div that serves as the centerpiece of a website. Imagine it resembling a standard "news" link. The width set at 80%, an image aligned to the left with a border, a headline detailing the lates ...

htmlcssmarginpadding

Implementing color transitions in javascript

Everyone talks about transitioning things in CSS, but have you ever thought about transitioning background colors in JavaScript? I'm currently working on a function that changes the background color of a div with the id of ex1 to green. However, I&apo ...

javascripthtmlcss

How can I connect an HTML page to an MS-Access database?

Hello everyone, I am looking to connect an HTML page to an Access database. If anyone has the HTML code for searching that database, I would greatly appreciate it. Thank you! I am using Access 2010. ...

htmldatabasems-access

What is the best way to auto-fill input fields with data from a Json file

My goal is to automatically populate HTML form fields based on user selection. I have obtained code for related functions, such as fetching JSON data and creating dropdown lists, from a friend. Here is the link to that code: https://jsfiddle.net/r4zuy7tn/1 ...

javascriptjqueryhtmljson

Tips for retrieving the option text value following an onchange event in AngularJS

Whenever I change the selection in my dropdown menu for 'Cities', the alert is displaying the value of the previous selection instead of the current one. For example, if I select a state and then switch to Cities, the alert shows the text related ...

javascripthtmlangularjs

The styling of Bootstrap CSS is not displaying correctly within the body of the webpage

I'm facing an issue where the content in the body of my page is not rendering correctly due to a problem with my bootstrap css. Specifically, the paragraph tag seems to be rendering inside the image tag even though both are within the body. @{ Lay ...

cssasp.net-mvcbootstrap-4

Preserve input values after form submission in <?php> code block

I would like to retain form values after submission. I have come across some techniques that claim to do just that: However, when I try to run the HTML file, I encounter two issues: firstly, the code does not function as intended and secondly, PHP snippet ...

phphtmlforms

Issue with uploading files in Internet Explorer using Ajax not resolved

I've been encountering an issue while uploading images using Ajax and PHP. Surprisingly, everything runs smoothly on Firefox but fails to work on Internet Explorer (I.E). Take a look at my HTML code below: <!doctype html> <head> <titl ...

phphtmlajaxinternet-explorerfile-upload

Syntax: Implement variable for css property value

Is there a way to center a box vertically within another box using jQuery instead of CSS? I believe it's more reliable. var textH = $(".Text").height(); var vertAlign = ((140 - textH)/2); $(".Text").css({ marginTop: 'vertAlign' }); I& ...

jquerycssmathvar

Display navigation bar upon touch or lift

In the mobile version of a website, there is a fixed navigation bar at the top. The positioning of this navbar is achieved using position:absolute: .navbar-fixed-top{position:absolute;right:0;left:0;z-index:1000; The goal is to make the navbar invisible ...

javascriptjquerycss

Smooth animation is not being achieved with the Jquery dlmenu

I have implemented a multi-level navigation menu using a demo of the jquery dlmenu plugin v1.0.2. Although most of the functions are working smoothly, the CSS3 menu navigation lacks the fluidity of the jQuery left/right sliding effect. Is there a way to ...

javascriptjqueryhtmlcssjquery-animate

CSS Navigation Menu - Submenu displaying above main link

<div id="header"> <div class="cont"> <div id="banner"> <div id="nav"> <ul> <li><a href="index.htm">home</a></li> <li><a href="work.html">Works»</a> <ul> ...

htmlcss

Are there any known browser compatibility issues with using "./" (dot slash) before HTML files?

Within the realm of shells, using ./ to indicate the current directory is quite common and generally not perceived as risky when specifying a path. On the other hand, in HTML coding, it's typical to omit ./ and instead directly specify the file name. ...

htmlcss

Adjusting the width of a button can result in gaps forming between neighboring buttons

I am currently working on a calculator project that involves customizing the width of a specific button with the ID equal. However, when I adjust the width of this button, it results in unexpected spacing between the third and fourth buttons in each row, c ...

htmlcsstwitter-bootstrapbutton

Obtain the value for every span class and insert the corresponding string into the input field

I have a series of tags labeled as 'tag-label' in spans. My goal is to combine the values of these tags and insert them into an input field, separating each value with commas. To demonstrate this, I've created a JSFiddle that showcases the ...

javascriptjqueryhtml

Generate dynamic lines with evolving hues using CSS3

While working on a fresh web project, I came across the need to emphasize my headers (h1, h2, h3, h4) with underlines. My goal is to have these underlines grow and change color dynamically, similar to what can be seen here: . Is there a way to achieve thi ...

jquerycss

Transitioning the height of a Vue component when switching routes

I've been struggling to implement a transition slide effect on my hero section. The height of the hero is set to 100vh on the homepage and half of that on other pages. Despite trying various methods, I haven't been able to get it working properly ...

javascriptcssvue.jsfrontendvuejs3

Alert users before visiting external websites

Is there a way to notify users about external pages without using popups like in the first example here: https://i.sstatic.net/5QJLu.png Instead of the unwanted code shown above, is there an alternative solution? Is there a different approach that can be ...

javascripthtmljquerycsshyperlink

What is the best way to flip cards with the onClick event in JavaScript?

My cards are currently facing down with the code* provided. What steps should I take to flip them face up using onClick functions? Furthermore, how can I store the IDs in an Array and use them to retrieve images from my image collection? HTML <table s ...

javascripthtmlcss