CODEWITHSUNDEEP
csscss-animations
yasir
yasir

Reputation: 127

how to make the text shadow next to the real text so it looks like duplicated text in css?

I'm creating marquee. These are the steps: enter image description hereenter image description hereenter image description here To do that I have to make a text-shadow next to the original text. The problem is the text width is not constant so I can do something like:

...{
  text-shadow: 619px 0 0 black;
}

this is my code:

.marquee {
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  text-shadow: 619px 0 0 black;
}

.marquee>* {
  width: 100%;
  display: inline-block;
  transform: translateX(0%);
  animation: marquee 5s linear infinite;
  will-change: transform;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}
<div class="marquee">
  <h1>lorem ipsum dolor ist as ment lorem ipsum</h1>
</div>

NOTE: I know I can get the width of the text and set the shadow depending on it in JavaScript.

Upvotes: 2

Views: 182

Answers (1)

VilleKoo
VilleKoo

Reputation: 2855

You could achieve this with html data attribute and css after pseudo-element

Just duplicate the text inside the h1 tag to data-text attribute.

.marquee {
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

.marquee > h1 {
  width: 100%;
  display: inline-block;
  transform: translateX(0%);
  animation: marquee 5s linear infinite;
  will-change: transform;
}

h1::after {
  /* this is where you will use the data-attribute */
  content: attr(data-text);
  display: inline;
  margin-left: 50px;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}
<div class="marquee">
  <h1 data-text="lorem ipsum dolor ist as ment lorem ipsum">lorem ipsum dolor ist as ment lorem ipsum</h1>
</div>

Upvotes: 4

Related Questions