CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
saplingPro
saplingPro

Reputation: 21329

CSS marquee, how can I make the text move from bottom to top

I have made the marquee completely using css. Here is the jsfiddle of it. But I want the text to move from bottom to up. Currently it is moving left to right. How can I make it move from bottom to up ?

CSS

/* define the animation */
@-webkit-keyframes marquee {
  0%   { -webkit-transform: translate(0, 0); }
  100% { -webkit-transform: translate(-100%, 0); }
} 

@-moz-keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

/* define your limiting container */
.marquee {
  border: solid 2px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
/* this is the tray moving around your container */
.marquee span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  animation: marquee 15s linear infinite; /* here you select the animation */
  -webkit-animation: marquee 15s linear infinite; /* here you select the animation */
}
/* pause the animation on mouse over */
.marquee span:hover {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

HTML

<p class="marquee">
    <span>
        Hey! What's up? <br />
        Second Line <br />
        Third Line <br />
        Fourth Line <br />
        Fifth Line <br /    
    </span>

Upvotes: 2

Views: 5997

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157364

Remove padding-left: 100%; and tweak the transform like

@keyframes marquee {
  0%   { -webkit-transform: translate(0, 0); }
  100% { -webkit-transform: translate(0, -100%); }
}

Demo

Explanation : 0, 0 means x and y axis respectively, so instead of using (0,0) to (-100%,0) which is nothing but you are moving the text on x axis, take the -100% to the y axis and get rid of padding-left: 100%; in .marquee span

As you commented that you wanted to show 1-2 lines on load and then start scrolling, so provide some height to the container element and use padding-top or you can use margin-top for your span element like

Demo 2

Also, @harry has suggested similar in his comment, take a look

Upvotes: 4

Related Questions