<h3 style="margin-top:0">Catalog</h3>
<h:panelGrid columns="4" cellpadding="5">
    <a:panel id="blind" header="Blind">
        <h:outputText value="click" />
        <a:effect type="blind" event="click">
            <f:param name="direction" value="'horizontal'" />
        </a:effect>
    </a:panel>

    <a:panel id="clip" header="Clip">
        <h:outputText value="click" />
        <a:effect type="clip" event="click" />
    </a:panel>

    <a:panel id="drop" header="Drop">
        <h:outputText value="click" />
        <a:effect type="drop" event="click" />
    </a:panel>

    <a:panel id="explode" header="Explode">
        <h:outputText value="click" />
        <a:effect type="explode" event="click" />
    </a:panel>

    <a:panel id="fold" header="Fold">
        <h:outputText value="doubleclick" />
        <a:effect type="fold" event="dblclick" />
    </a:panel>

    <a:panel id="puff" header="Puff">
        <h:outputText value="doubleclick" />
        <a:effect type="puff" event="dblclick" />
    </a:panel>

    <a:panel id="slide" header="Slide">
        <h:outputText value="doubleclick" />
        <a:effect type="slide" event="dblclick" />
    </a:panel>

    <a:panel id="scale" header="Scale">
        <h:outputText value="doubleclick" />
        <a:effect type="scale" event="dblclick">
            <f:param name="percent" value="90" />
        </a:effect>
    </a:panel>

    <a:panel id="bounce" header="Bounce">
        <h:outputText value="click" />
        <a:effect type="bounce" event="click" />
    </a:panel>

    <a:panel id="pulsate" header="Pulsate">
        <h:outputText value="click" />
        <a:effect type="pulsate" event="click" />
    </a:panel>

    <a:panel id="shake" header="Shake">
        <h:outputText value="click" />
        <a:effect type="shake" event="click" />
    </a:panel>

    <a:panel id="size" header="Size">
        <h:outputText value="click" />
        <a:effect type="size" event="click">
            <f:param name="to" value="{width: 200,height: 60}" />
        </a:effect>
    </a:panel>
</h:panelGrid>

<h3>Target</h3>
<a:commandButton type="button" value="Show" style="display:block" icon="ui-icon-image">
    <a:effect type="puff" event="click" for="img">
        <f:param name="mode" value="'show'" />
    </a:effect>
</a:commandButton>
<a:graphicImage id="img" name="demo/images/nature/nature1.jpg" style="display:none"/>

<a:form>
    <h3>On Load</h3>
    <a:messages id="messages" closable="true">
        <a:effect type="pulsate" event="load" delay="500" />
    </a:messages>

    <a:panel id="panel" header="Message Effects" toggleable="true">
        <h:panelGrid columns="2" cellpadding="5">
            <a:outputLabel for="text" value="Type:" />
            <a:inputText id="text" value="#{effectView.text}" required="true" />

            <h:outputText />
            <a:commandButton id="submit" value="Echo" actionListener="#{effectView.echo}" update="messages"/>
        </h:panelGrid>
    </a:panel>
</a:form>