Crestron Components Lib - Showcase App

ch5-background: transitionEffect

transitionEffect attribute

when more than one image/color provided in url/backgroundcolor attribute this attribute provides the time length of the transition using CSS transition-duration syntax.

Default is ease

<div style="height: 320px;">
    <ch5-background
        refreshrate="3"
        scale="fill"
        transitioneffect="linear"
        url="https://picsum.photos/id/30/800/800 | https://picsum.photos/id/10/800/800 | https://picsum.photos/id/20/800/800">
    </ch5-background>
</div>

Background transitionEffect ease-in-out

<div style="height: 320px;">
    <ch5-background
    transitioneffect="ease-in-out"
    refreshrate="3"
    scale="fill"
    url="https://picsum.photos/id/2/800/800 | https://picsum.photos/id/20/800/800 | https://picsum.photos/id/30/800/800 | https://picsum.photos/id/40/800/800 | https://picsum.photos/id/50/800/800"></ch5-background>
</div>