Hero MegaStrip

from SITE-19823

The concept for the animated Hero that Keith Landon explored in DESIGN-17934 ended up being too elaborate/heavy to implement as an animated gif, but before rejecting outright, we will try to build something similar in html+css+js. since the concept is just a slow pan over a very wide "breath-of-content/itunes store" style strip of artworks, it may be possible to recreate the same effect without the prohibitive file sizes that come with the giant animated gif, for use in the stream showtime page.

if possible, this animated hero would work for both desktop + mobile (but not for the amp page)

because the vieport is used to calculate the extra-padding on the inner container, at desktop, this component looks best with developer tools docked to the right

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Stream Showtime^® Now

Try free for 7 days, then only $10.99/month. Cancel anytime.

 

<section class="hero hero--megastrip" data-context="hero">      
  <img class="hero__logo" src="https://www.sho.com/assets/images/stream-showtime/Showtime_logo.svg">  
    <div class="megastrip js-megastrip">
      <ul class="megastrip__inner">
        <li class="megastrip__item megastrip__item-1 "><em class="badge">1 </em><img alt="Ray Donovan"  class="megastrip__image" style="background-image:url(https://www.sho.com/assets/images/stream-showtime/megastrip/07/01.jpg?foo)"   src="https://www.sho.com/assets/images/stream-showtime/clear_200x300.gif" /></li>
        <li class="megastrip__item megastrip__item-2 "><em class="badge">2 </em><img alt="Billions"     class="megastrip__image" style="background-image:url(https://www.sho.com/assets/images/stream-showtime/megastrip/07/02.jpg?baz)"   src="https://www.sho.com/assets/images/stream-showtime/clear_200x300.gif" /></li>
        <li class="megastrip__item megastrip__item-3 "><em class="badge">3 </em><img alt="Your Honor"   class="megastrip__image" style="background-image:url(https://www.sho.com/assets/images/stream-showtime/megastrip/07/03.jpg?wibble)"   src="https://www.sho.com/assets/images/stream-showtime/clear_200x300.gif" /></li>
        <li class="megastrip__item megastrip__item-4 "><em class="badge">4 </em><img alt="Shameless"    class="megastrip__image" style="background-image:url(https://www.sho.com/assets/images/stream-showtime/megastrip/07/04.jpg?wobble)"   src="https://www.sho.com/assets/images/stream-showtime/clear_200x300.gif" /></li>
        ...
      </ul>
    </div>
  <div class="hero__inner">
    <p>headline + copy goes here</p>
  </div>
</section>