CREATING A ROLLING TEXT BANNER ON THE HOME PAGE

photoslikamphotoslikam Registered Users Posts: 3 Big grins
edited June 19, 2019 in SmugMug Customization
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

Comments

  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited June 19, 2019

    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

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • photoslikamphotoslikam Registered Users Posts: 3 Big grins
    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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%); 
     }
    }
    
  • photoslikamphotoslikam Registered Users Posts: 3 Big grins
    This wors! Thanks Mike.
Sign In or Register to comment.