Member Avatar for Virangya

Hi, i have a marquee on my page which looks like the following

------------------------------------------------------------------------------
|Picture(div)-|-Marquee(div)--------------------------------------------|
|---------------|--------------------------------------------------------------|
|---------------|--------------------------------------------------------------|
------------------------------------------------------------------------------

so my marquee stops at the picture and starts again from the beginning . here picture is a square area but i want to use some curved image to that place and marquee should stop at the curved image(next example). Since it's not a straight line i don't have an idea how to do this with divs or anything. please help me..


------------------------------------------------------------------------------
|Picture(div)*--Marquee(div)--------------------------------------------|
|---------------*--------------------------------------------------------------|
|-----------------*------------------------------------------------------------|
--------------------*-----------------------------------------------------------

Edited by Virangya because: n/a
  • 2 Contributors
  • 5 Replies
  • 178 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Virangya

Dani AI

Generated

OP asked for a marquee that “stops at” a curved picture edge; steered things toward CSS text-wrapping. Two important points up front: the <marquee> element is deprecated and brittle, so swap it for a CSS/JS ticker; and CSS text-wrapping (shapes) works for flowed paragraphs, not for an old single-line <marquee>. (developer.mozilla.org)

Practical approach that is simple and reliable: create a CSS-animated ticker (translateX on a long inline track) and place your curved image (PNG/SVG with transparency) above the ticker as an absolutely-positioned overlay. The opaque part of the image visually hides the scroller where you want it to “stop” while the visible curved transparency shows the rest — no fancy per-letter bending needed. Example structure:

<div class="ticker">
  <img class="curved" src="curved-left.png" alt="" />
  <div class="track">
    <span class="msg">This is the scrolling message — repeat it or duplicate for a smooth loop.</span>
    <span class="msg">This is the scrolling message — repeat it or duplicate for a smooth loop.</span>
  </div>
</div>
.ticker { position:relative; overflow:hidden; height:64px; }
.ticker .curved { position:absolute; left:0; top:0; height:100%; z-index:2; pointer-events:none; }
.ticker .track { display:inline-block; white-space:nowrap; transform:translateX(100%); animation:marquee 12s linear infinite; z-index:1; }
@keyframes marquee { from{transform:translateX(100%);} to{transform:translateX(-100%);} }
@media (prefers-reduced-motion: reduce){ .ticker .track{ animation:none; } }

This uses CSS animations for the motion; masks/clip-paths are alternatives if you need programmatic clipping rather than an image overlay. If you actually want text to reflow around a non-rectangular shape (multi-line wrap), look into CSS Shapes (shape-outside) on a floated image — that is for flowed paragraphs, not single-line tickers. (developer.mozilla.org)

Notes and gotchas: supply the curved asset with transparency (PNG or SVG). pointer-events:none keeps the overlay from blocking clicks. Test older browsers and provide a rectangular fallback if needed (clip/mask support varies). Also respect prefers-reduced-motion for accessibility. (caniuse.com)

Recommended Answers

All 5 Replies

Member Avatar for fusedreality

There's no such thing as a curved image on the web. Every image only has a set width and height. You can't really 'bend' elements or skew them in any way, although there are a few people that have played around with doing this with javascript but it's often quite buggy and doesn't work in all browsers.

Best of luck.

Member Avatar for Virangya

There's no such thing as a curved image on the web. Every image only has a set width and height. You can't really 'bend' elements or skew them in any way, although there are a few people that have played around with doing this with javascript but it's often quite buggy and doesn't work in all browsers.

Best of luck.

thanx for your reply. well. javascript is ok if u can give me an idea how to do it with javascript?

Member Avatar for fusedreality

Actually, you can do it in CSS. Just found this that may be of help:

Happy coding!

Member Avatar for Virangya

thanxx looks really cool!

Member Avatar for Virangya

hi, i tried it. but i can't apply it to a marquee. I tried it several times still doesn't work because marquee is one line text... not like a paragraph..

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.