Member Avatar for devilish demon

i have 3 images, 2 are feather's images and 1 is text image
i am trying to put these two feather images(which are in png format so to be transparent) in opposite corners as well as in front and 3rd text image should come from behind of the start of feather n scroll to the end of the other feather image(it should come and go behind the feathers, not above)
as feathers have little spaces so i want to show that text is going benath the feathers and ends where feather ends

i have attached a sample image

please help me in writing its guide

Untitled-1.png 112.55 KB
  • 3 Contributors
  • 7 Replies
  • 348 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by devilish demon

Dani AI

Generated

As and already hinted: the reliable pattern is twofold — put the feather PNGs in the top layer (stacking order) and animate the text image inside a clipped viewport between them. Avoid the deprecated <marquee>. The example below uses a single container with left/right padding equal to the feather widths so the moving image appears to come out from behind one feather and disappear behind the other.

HTML (structure)

<div class="banner">
  <img src="feather-left.png" class="feather-left" alt="">
  <div class="viewport">
    <img src="text-strip.png" class="ticker" alt="">
  </div>
  <img src="feather-right.png" class="feather-right" alt="">
</div>

CSS (animation + layering)

.banner{
  position:relative;
  --fl:120px; /* override with real feather widths */
  --fr:120px;
  padding-left:var(--fl);
  padding-right:var(--fr);
  overflow:hidden;
  height:120px;
}
.feather-left,.feather-right{
  position:absolute;
  top:0;
  height:100%;
  z-index:3;
  pointer-events:none; /* so hover on .banner still works */
}
.feather-left{ left:0; }
.feather-right{ right:0; }
.viewport{ height:100%; display:flex; align-items:center; }
.ticker{ display:block; will-change:transform; animation:slide var(--dur,8s) linear infinite; }
@keyframes slide{ from{transform:translateX(100%);} to{transform:translateX(-100%);} }
.banner:hover .ticker{ animation-play-state:paused; }

Small JS to auto-set feather widths and sensible duration (optional)

document.addEventListener('DOMContentLoaded',function(){
  const b=document.querySelector('.banner');
  const L=b.querySelector('.feather-left');
  const R=b.querySelector('.feather-right');
  const T=b.querySelector('.ticker');
  if(L && R && T){
    b.style.setProperty('--fl', L.offsetWidth+'px');
    b.style.setProperty('--fr', R.offsetWidth+'px');
    const distance = T.offsetWidth + b.clientWidth;
    b.style.setProperty('--dur', Math.max(4, Math.round(distance/120)) + 's');
  }
});

Troubleshooting notes: make sure feather PNGs actually have transparent pixels where the strip should show; if the ticker still appears above the feathers, check stacking contexts (ancestor elements with transform/opacity can create new contexts) and ensure the feather elements have the higher z-index inside the same stacked context. If feathers must be interactive, remove pointer-events:none and add a hover handler on the banner instead. If you prefer frame-by-frame control, the same measurements feed a JS animation (requestAnimationFrame or jQuery.animate) as suggested.

Recommended Answers

All 7 Replies

Member Avatar for ctaylo21

See below.

Edited by ctaylo21 because: n/a
Member Avatar for ctaylo21

I'm not sure this is what you're looking for but you can simply use z-index to solve your problem:

CSS:
.feather
{
   position: absolute;
   z-index: 3;
}
.img_text{
   position: absolute;
   z-index: 1;
}
<img class="feather" src="feather1.png">
<img class="img_text" src="text.png">
<img class="feather" src="feather2.png">

That should allow the two feather images to appear over the top of the text image.

Edited by ctaylo21 because: n/a
Member Avatar for devilish demon

thanku for letting me know about the z-index usage, but its an incomplete answer.

please let me know which lne should i use to keep the other feather at the other end

and i have put the marquee tag along with the txt image but its nt working , so how should i scroll the txt image

<img src="images nu/Untitled-4.png" width="469" class="feather">
<center>
<marquee behavior="scroll" width="60%" scrollamount="4" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
<img class="img_text" src="images nu/Untitled-3.png">
</marquee>
</center>
<img src="images nu/Untitled-5.png" width="469" class="feather">

please let me know about my mistakes

Edited by devilish demon because: n/a
Member Avatar for lps

My opinion is that you shall position the initial position using CSS and use javascript to do the scrolling(refer jquery API:animate()).

Member Avatar for devilish demon

i need a thorough help, please if anybody can then do

Member Avatar for ctaylo21

You could use float to keep your images on opposite sides. Like:

<img src="images nu/Untitled-5.png" width="469" class="feather" style="float:left">
<center>
<marquee behavior="scroll" width="60%" scrollamount="4" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
<img class="img_text" src="images nu/Untitled-3.png">
</marquee>
</center>
<img src="images nu/Untitled-5.png" width="469" class="feather" style="float:right">

But I agree with lps, you should not be using marquee. It is an old markup that was never fully supported by browsers anyway. Scrolling text makes a page look old in my opinion, but you if you still really want it look into javascript solutions. is an example.

Member Avatar for devilish demon

thanku so much for the help everybody :)

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.