Jump to content

Vertically scrolling text

Recommended Posts

Posted

Can anyone modify this css so it can make text wit the value "scroll" scroll vertically rather horizontally (it works horizontally and I tried replacing the word 'linear' with 'vertical' but that didnt work.

.scroll{
overflow: hidden!important;
 position: relative!important;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);  
 transform:translateX(100%);
 -moz-animation: scroll 10s linear infinite;
 -webkit-animation: scroll 10s linear infinite;
  animation: scroll 10s linear infinite;}
@-moz-keyframes scroll {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}

@-webkit-keyframes scroll  {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translatex(-100%); }
}

#page {overflow-x:hidden}

 

  • Replies 1
  • Views 1.9k
  • Created
  • Last Reply
Posted
.scroll{
overflow: hidden!important;
 position: relative!important;
 -moz-transform:translateY(100%);
 -webkit-transform:translateY(100%);  
 transform:translateY(100%);
 -moz-animation: scroll 10s linear infinite;
 -webkit-animation: scroll 10s linear infinite;
  animation: scroll 10s linear infinite;}
@-moz-keyframes scroll {
 0%   { -moz-transform: translateY(100%); }
 100% { -moz-transform: translateY(-100%); }
}

@-webkit-keyframes scroll  {
 0%   { -webkit-transform: translateY(100%); }
 100% { -webkit-transform: translateY(-100%); }
}

#page {overflow-Y:hidden}

I think your translate properties are causing the issue. Without context it's a little hard to understand the desired effect. Something I have to frequently remind myself is:

translateX -- side to side

translateY -- up and down

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.