Jump to content

Vertically scrolling text

Recommended Posts

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}

 

Link to comment
  • Replies 1
  • Views 1.7k
  • Created
  • Last Reply
.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

Link to comment

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.