CreateAHTMLBannerUsingEffectsAndPoll

    <script type="text/javascript">
                first=true;
                flip=false;
                function loopIt()
                {
                    if( first )
                    {
                        Appear1();
                        Fade0();
                        first = false;
                    }
                    else if( flip )
                    {
                        Fade2();
                        Appear1();
        
                        flip = false;
                        setTimeout( 'Box2afterTwoSeconds()', 2000 );
                    }
                    else
                    {
                        Fade1();
                        Appear2();
    
                        flip = true;
                        setTimeout( 'Box1afterTwoSeconds()', 2000 );
                    }
                }
    
                function Box1afterTwoSeconds()
                {
                    reRender1();
                }
    
                function Box2afterTwoSeconds()
                {
                    reRender2();
                }
            </script>
    
            <a4j:region>
                <h:form>
                    <a4j:poll id="poll1" interval="5000" enabled="true" reRender="serverDate" oncomplete="loopIt();"></a4j:poll>
                    <a4j:jsFunction reRender="fadebox1" name="reRender1" ></a4j:jsFunction>
                    <a4j:jsFunction reRender="fadebox2" name="reRender2" ></a4j:jsFunction>
                </h:form>
            </a4j:region>
    
            <h:form>
                <h:outputText id="serverDate" style="font-size:16px" value="This Server Date changes: #{Scroller.date}"></h:outputText>
            </h:form>
    
            <rich:panel id="fadebox0" style="position: absolute; width: 400px" >
                <f:facet name="header">Welcome to this website</f:facet>
                <h:outputText value="Welcome to this website" ></h:outputText> 
            </rich:panel>
    
            <rich:panel id="fadebox1" style="position: absolute; width: 400px; z-index:1;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;">
                <f:facet name="header">Fade Effect 1</f:facet>
                <h:outputText value="This does change: #{Scroller.date}" ></h:outputText>
            </rich:panel>
    
            <rich:panel id="fadebox2" style="position: absolute; width: 400px; z-index:2;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;">
                <f:facet name="header">Fade Effect 2</f:facet>
                <h:outputText value="This does change: #{Scroller.date}" ></h:outputText>
            </rich:panel>
    
            <rich:effect for="fadebox0" type="Fade" name="Fade0" ></rich:effect>
    
            <rich:effect for="fadebox1" type="Fade" name="Fade1" ></rich:effect>
            <rich:effect for="fadebox1" type="Appear" name="Appear1"  ></rich:effect>
    
            <rich:effect for="fadebox2" type="Fade" name="Fade2"  ></rich:effect>
            <rich:effect for="fadebox2" type="Appear" name="Appear2" ></rich:effect>