Member Avatar for krishna09

hi frnds..,
pls help me in this qery...,i need to scroll the text around my table in my html page.pls suggest me asap..

Thanks & regards
Krishna

  • 3 Contributors
  • 3 Replies
  • 287 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by krishna09

Dani AI

Generated

A compact, CSS-only way to get "welcome" to orbit a table cell containing "hi" is to make the TD a positioned container and place a small centered wrapper that rotates while the orbiting label counter-rotates to remain readable. This builds on 's containment idea and complements the animation libraries mentioned by (useful if a JS fallback is needed).

HTML example:

<td class="orbit-cell">
  <div class="center">hi</div>
  <div class="orbit-wrapper">
    <div class="orbit-text">welcome</div>
  </div>
</td>

CSS example:

.orbit-cell {
  position: relative;
  width: 200px;
  height: 120px;
  overflow: visible;
  text-align: center;
}

.center {
  position: relative;
  z-index: 2;
  line-height: 120px;
}

.orbit-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;   /* orbit diameter */
  height: 160px;
  margin-left: -80px;
  margin-top: -80px;
  animation: spin 6s linear infinite;
  pointer-events: none;
}

.orbit-text {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  animation: counter-spin 6s linear infinite;
  white-space: nowrap;
  z-index: 1;
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes counter-spin { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(-360deg); } }

/* honor users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .orbit-wrapper, .orbit-text { animation: none; }
}

Notes and troubleshooting:

  • The TD must be position:relative and overflow:visible so the orbiting text isn't clipped. Adjust wrapper width/height to change orbit radius and animation duration for speed.
  • To add multiple orbiters, add extra .orbit-text elements and set initial rotation offsets (or use JS for complex timings).
  • Continuous motion can be distracting; include the prefers-reduced-motion rule or a toggle. For older browsers that lack CSS animation support, a small JS/jQuery fallback (the libraries pointed to) will provide compatibility.

Recommended Answers

All 3 Replies

Member Avatar for drjohn

If you mean wrap the text (scroll means move/animate it), you have to put the table in a div of a given size, probably floated left or right , and the text outside the div.

or more likely like this

<div class="outer">
<div class="inner">
table bit here
</div>
text in here
</div>

the above gives you more control as you can set widths to outer and inner, and set any other attributes you fancy as well.

Member Avatar for krishna09

thank u john for ur great response..,but my output should be like this ....suppose

"hi" is the text given in my table 'td',,then i need a text "welcome" to be keep rotating around the table 'td' text "hi" as mentioned above.i hope u understand my query...,


Thanks in Advance
krishna

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.