CREATING A ROLLING TEXT BANNER ON THE HOME PAGE

photoslikam

Could ayone please advise how can I create a rolling text banner on the top of my home page at www.photoslikam.com. The text should read something like this: "Check out our new Gallery for XXXX".

Thank you,
Oliver

Allen

Check this page.
https://www.html.am/html-codes/marquees/css-scrolling-text.cfm

Working here. This is in center body content. Might have to add it the your "homepage" in the header area. See right fly-out.
https://www.photosbyat.com/Test-Page-No-1/n-KXSvC

photoslikam

Thanks for the response Allen.
Unfortunatelly, it does not work (does not show up) neither on the Home Page nor on the Entire Site Header, also after removing the the webkit and moz items.
If I put your HTML code <marquee behavior="scroll" direction="left">HTML marquee...</marquee>, it shows up without scrolling.
Any new idea how to fix it?

Hikin' Mike

@photoslikam said:
Thanks for the response Allen.
Unfortunatelly, it does not work (does not show up) neither on the Home Page nor on the Entire Site Header, also after removing the the webkit and moz items.
If I put your HTML code HTML marquee..., it shows up without scrolling.
Any new idea how to fix it?

It works for me too. If you just copied the code from Allen's link, it will not work. You need to remove the <style style="text/css"> and </style> in the CSS section. Copied from my testing page. Use a HTML/CSS block and add this to your HTML section:

<div class="scroll-left">
  <p>"Check out our new Gallery for XXXX</p>
</div>

Add this to the CSS section:

.scroll-left {
  height: 50px; 
  overflow: hidden;
  position: relative;
  background: yellow;
  color: orange;
  border: 1px solid orange;
}
.scroll-left p {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  /* Starting position */
     -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%);   
          transform:translateX(100%);
  /* Apply animation to this element */ 
     -moz-animation: scroll-left 15s linear infinite;
  -webkit-animation: scroll-left 15s linear infinite;
          animation: scroll-left 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
  0%   { -moz-transform: translateX(100%); }
  100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
  0%   { -webkit-transform: translateX(100%); }
  100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
  0%   { 
     -moz-transform: translateX(100%); /* Browser bug fix */
  -webkit-transform: translateX(100%); /* Browser bug fix */
          transform: translateX(100%);      
 }
 100% { 
     -moz-transform: translateX(-100%); /* Browser bug fix */
  -webkit-transform: translateX(-100%); /* Browser bug fix */
          transform: translateX(-100%); 
 }
}

photoslikam

This wors! Thanks Mike.