Responsive Hero Switch Text Scroller
The widget overcomes the inherent problems of using a full width, fixed height "hero" image on a fully responsive page design. It loads three different sizes of image - one for each device type - using the HTML5 picture element with media queries. A polyfill is included to support ancient browsers that dont support the <picture> tag.
This allows appropriate sized images to be downloaded for each device type and has the advantage over using background images in allowing the essential alt text atribute for the search engines.
Switch
When viewed on tablets and smart phones, the image switches from responsive width, fixed height to fully responsive which gives a much better viewing experience for those visitors using mobile devices. If viewing this page on a computer, reduce the browser width to see the change in style.
Scrolling Text
There are a few problems associated with using scrolling text on responsive pages - not the least of which is having any autoplay created using javascript like autoplay sliders and, in this case, scrolling text.
The scrolling is created using CSS animation so that gets rid of the power hungry JS. The scrolling animation is prevented when the page is viewed on a mobile phone and the text is centered.
Viewport
The narrow viewport of a mobile phone leaves no room for more than a few words of text. Any excesss will be chopped. To overcome this, the widget has a field for the main text and a span for extra text. The extra text in the span will be hidden on phones.
Note how the text in the above example shows as "Hero Switch Scroller Widget - CSS Animation" when viewed on a wider screen. The " - CSS Animation" text is in the span and is hidden on phones. This, along with a reduction in font size, helps to allow the remaining content to fit.