Gears of War: E-Day
Community Wishlist

<style>
/* -- The root styles must go in the element of the structure with the name "Hero". --*/
.hero-with-bottom-scroller {
  --hero-with-bottom-scroller-speed-animation: 35s;
  --hero-with-bottom-scroller-transparency-size: 100px;
  
  .hero-with-bottom-scroller__container-img{
    /* If you do not want the gradient masks at the left and right you can remove these styles */
  	-webkit-mask-image: linear-gradient(to right, #000, #000, transparent 0, #000 var(--hero-with-bottom-scroller-transparency-size), #000 calc(100% - var(--hero-with-bottom-scroller-transparency-size)), transparent);
    
    mask-image: linear-gradient(to right, #000, #000, transparent 0, #000 var(--hero-with-bottom-scroller-transparency-size), #000 calc(100% - var(--hero-with-bottom-scroller-transparency-size)), transparent);
  }
  
  /* Row left styles */
  .hero-with-bottom-scroller__row:first-child{    
    .hero-with-bottom-scroller__row-img {
      animation-name: horizontal-scroll-rtl;
      animation-duration: var(--hero-with-bottom-scroller-speed-animation);
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      
      .hero-with-bottom-scroller__img-wrapper{
      	margin-right: var(--space-m);
        
        /* Tablet styles */
        @media(max-width: 991px){
        	margin-right: var(--space-s);
        }
      }
    }
  }
  
  /* Row right styles */
  .hero-with-bottom-scroller__row:last-child{
    .hero-with-bottom-scroller__row-img{
    	animation-name: horizontal-scroll-ltr;
      animation-duration: var(--hero-with-bottom-scroller-speed-animation);
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      
      .hero-with-bottom-scroller__img-wrapper{
      	margin-left: var(--space-m);
        
        /* Tablet styles */
        @media(max-width: 991px){
        	margin-left: var(--space-s);
        }
      }
    }
  }

}
  
  
  
/*-- Animation right to left --*/
@keyframes horizontal-scroll-rtl {
    from {transform: translateX(0%);}
    to {transform: translateX(-100%);}
}

/*-- Animation left to right --*/
@keyframes horizontal-scroll-ltr {
    from {transform: translateX(-100%);}
    to {transform: translateX(0%);}
}
</style>

<script>
  /* The functionality of this script is to duplicate the content of the "Row images" element so you don't have to add twice the same row images or make changes. In case you change the class it is important that you also change it in the script.

If you want to do it manually and duplicate the "Row images" element, you can delete this script. */
  
document.addEventListener('DOMContentLoaded', () => {
  // Select all rows
  const rowContainers = document.querySelectorAll('.hero-with-bottom-scroller__row');

  // Iterate on each row
  rowContainers.forEach(container => {
    // Clone the first element of the list row images
    const copyElement = container.querySelector('.hero-with-bottom-scroller__row-img').cloneNode(true);
    // Add the cloned element to the current container
    container.appendChild(copyElement);
  });
});
</script>