CODEWITHSUNDEEP
htmlcsscss-animations
Prasad_Joshi
Prasad_Joshi

Reputation: 662

how to apply translateY for each <p> element

I'm trying to scroll from bottom to top, for which I used translateY property, but it scrolls the div all at once, I wanted to apply it to each p element separately so that each can be viewed separately below is my code

.wrapper {
  position: relative;
  overflow: hidden;
  height: 25px;
  width: 100px;
}

.wrapper p {
  position: absolute;
  margin: 0;
  line-height: 25px;
  white-space: nowrap;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}
<div id="announcements">
  <div class="panel-body">
    <div class="wrapper">
      <p> this is annoumcment #1</p>


      <p> this is annoumcment #2</p>


      <p> this is annoumcment #3</p>


      <p> this is annoumcment #4</p>
    </div>

  </div>
</div>

Upvotes: 0

Views: 76

Answers (2)

Temani Afif
Temani Afif

Reputation: 272901

Simply remove the absolute position and adjust the transfom as needed:

.wrapper {
  position: relative;
  overflow: hidden;
  height: 25px;
  width: 300px;
}

.wrapper p {

  margin: 0;
  line-height: 25px;
  white-space: nowrap;
  animation: marquee 2s linear infinite alternate;
}

@keyframes marquee {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(calc(-4 * 100%)); 
  }
}
<div id="announcements">
  <div class="panel-body">
    <div class="wrapper">
      <p> this is annoumcment #1</p>


      <p> this is annoumcment #2</p>


      <p> this is annoumcment #3</p>


      <p> this is annoumcment #4</p>
    </div>

  </div>
</div>

Upvotes: 2

Red
Red

Reputation: 7299

Instead of animating the <p> elements, wrap them inside a new div. Then animate this div

See snippet below:

.wrapper {
  position: relative;
  overflow: hidden;
  height: 25px;
  width: 200px;

}

.wrapper p {
  margin: 0;
  line-height: 25px;
  white-space: nowrap;
}

.wrapper .animated {
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}
<div id="announcements"> 
                          <div class="panel-body" >
                              <div class="wrapper">
                                  <div class="animated">
                                  <p> this is annoumcment #1</p>
                              
                           
                                  <p> this is annoumcment #2</p>
                              
                            
                                  <p> this is annoumcment #3</p>
                             
                            
                                  <p> this is annoumcment #4</p>
                                  </div>
                           </div>
                         
                         </div>
                     </div>

Upvotes: -1

Related Questions