MagicMirror² v2.12.0 is available! For more information about this release, check out this topic.

[MMM-NewsFeedTicker] scroll from left to right only?



  • Can someone please tell me what to edit to have the news scrolling from left to right only (and not also from right to left)?

    @-webkit-keyframes marquee {
      0% { left: 100%; }
      100% { left: -100%; }
    }
    
    @-moz-keyframes marquee {
      0% { left: 100%; }
      100% { left: -100%; }
    }
    
    @-ms-keyframes marquee {
      0% { left: 100%; }
      100% { left: -100%; }
    }
    
    @-o-keyframes marquee {
      0% { left: 100%; }
      100% { left: -100%; }
    }
    
    @keyframes marquee {
      0% { left: 100%; }
      100% { left: -100%; }
    }
    
    .MMM-NewsFeedTicker {
      width: 100%;
      height: 50px;
      line-height: 100%;
      overflow: hidden;
      background: rgb(104, 9, 9); /* background color - change to 'none' if don't want */
    }
    
    .MMM-NewsFeedTicker .tickerbody {
      margin: 0 auto;
      width: 100%;
      padding-top: 5px;
      position: relative;
      white-space: nowrap;
      overflow: visible;
      -webkit-animation: marquee linear infinite;
      -moz-animation: marquee linear infinite;
      -ms-animation: marquee linear infinite;
      -o-animation: marquee linear infinite;
      animation: marquee linear infinite;
    }
    
    .MMM-NewsFeedTicker .headline {
      font-size: 40px;
      font-weight: bold;
    }
    
    .MMM-NewsFeedTicker .image {
      position: absolute;
      display: inline-block;
      vertical-align: middle;
      bottom: 0;
      left: 0;
      height: 50px;
      z-index: 100;
      background: rgb(255, 255, 255); /* white background for image */
    }
    




  • @sdetweil thanks I already saw that page, but it talks about translateX and there’s no evidence of it in that module’s CSS.



  • @Cr4z33 ok, so. try it. maybe the default is right to left if not specified.

    worst case u have the existing file still



  • @sdetweil nope I didn’t get what I wanted. 🤷🏾


  • Module Developer

    @Cr4z33 : see this

    I think it can help



  • i did this, commented out the old in the MMM-NewsFeedTicker.css
    and replaced with this

    /*@-webkit-keyframes marquee {
      0% { left: 100%; }
      100% { left: -100%; }
    }
    
    @-moz-keyframes marquee {
      0% { left: 100%; }
      100% { left: -100%; }
    }
    
    @-ms-keyframes marquee {
      0% { left: 100%; }
      100% { left: -100%; }
    }
    
    @-o-keyframes marquee {
      0% { left: 100%; }
      100% { left: -100%; }
    }
    
    @keyframes marquee {
      0% { left: 100%; }
      100% { left: -100%; }
    } */
    
    /* new stuff here */
    @keyframes marquee {
      
       0% {
        transform: translate(-100%, 0);
      }
    
      50% {
        transform: translate(-50%, 0);
      }
    
      100% {
        transform: translate(0, 0);
      } 
    }
    


  • @sdetweil thank you gonna try asap! 😃



  • OK this is getting weird now because I applied the above code and it STILL keeps scrolling back and forth! 😧



  • @Cr4z33 did u delete the old code?

    /*@-webkit-keyframes marquee {
      0% { left: 100%; }
      100% { left: -100%; }
    }
    
    @-moz-keyframes marquee {
      0% { left: 100%; }
      100% { left: -100%; }
    }
    
    @-ms-keyframes marquee {
      0% { left: 100%; }
      100% { left: -100%; }
    }
    
    @-o-keyframes marquee {
      0% { left: 100%; }
      100% { left: -100%; }
    }
    
    @keyframes marquee {
      0% { left: 100%; }
      100% { left: -100%; }
    } */
    

    notice the /* and */


Log in to reply