myfaces-html5-demo/src/main/webapp/sections/effects01.xhtml

<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->




<ui:composition template="/sections/sectionTemplate.xhtml"
      xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:hx="http://myfaces.apache.org/html5/html"
      xmlns:fx="http://myfaces.apache.org/html5/core"
      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
      xmlns:common="http://java.sun.com/jsf/composite/components/common">

<ui:define name="title">
    Effects
</ui:define>

<ui:define name="browserSupport">
  <bs:browserSupport webkitSupport="true" />
</ui:define>

<ui:define name="viewChangeLinks">
    <common:viewChange singlePageName="effects" slideId="effects01" />
</ui:define>

<ui:define name="sectionContent">
    <h:outputStylesheet>
        div.effectDemoBox{
            border: 1px dashed blue;
            margin-top : 15px;
            width: 100% !important;
            height:200px !important;
        }

        div.effectDemoBoxText{
            text-align:center;
            width:100%;
        }
    </h:outputStylesheet>
    <h:panelGrid columns="3" width="100%">

        <hx:div styleClass="effectDemoBox">
            <div class="effectDemoBoxText">Hover to Rotate</div>
            <fx:effects event="mouseover" duration="1.5s" timingFunction="ease-in">
                <fx:effectTransform rotate="695deg"/>
            </fx:effects>
            <sh:sh><![CDATA[
<hx:div>
<fx:effects event="mouseover"
    duration="2s"...>
    <fx:effectTransform rotate="695deg"/>
</fx:effects>
</hx:div>
            ]]></sh:sh>
        </hx:div>

        <hx:div styleClass="effectDemoBox">
            <div class="effectDemoBoxText">Click to fade, then mouse out to return back</div>
            <fx:effects event="click" deactivationEvents="mouseout" duration="0.4s" timingFunction="ease-in">
                <fx:effect property="opacity" value="0.3"/>
            </fx:effects>
            <sh:sh><![CDATA[
<hx:div>
<fx:effects event="click"
    deactivationEvents="mouseout" ...>
    <fx:effect property="opacity"
        value="0.3"/>
</fx:effects>
</hx:div>
            ]]></sh:sh>
        </hx:div>

        <hx:div styleClass="effectDemoBox">
            <div class="effectDemoBoxText">Click to puff, then mouse out to return back</div>
            <fx:effects event="click" deactivationEvents="mouseout" duration="0.2s" timingFunction="ease-out">
                <fx:effectTransform scaleX="1.2" scaleY="1.2" />
                <fx:effect property="opacity" value="0"/>
            </fx:effects>
            <sh:sh><![CDATA[
<hx:div>
<fx:effects event="click"
    deactivationEvents="mouseout" ...>
    <fx:effect property="opacity"
        value="0.3"/>
</fx:effects>
</hx:div>
            ]]></sh:sh>
        </hx:div>

        <hx:div styleClass="effectDemoBox">
            <div class="effectDemoBoxText">Drag anything (i.e. select any text on the</div>
            <div class="effectDemoBoxText">page and drag it) to see the effect, drop </div>
            <div class="effectDemoBoxText">or drag out to return back</div>
            <fx:effects event="dragenter" duration="0.3s">
                <fx:effect property="background-color" value="#00AA00" />
            </fx:effects>
            <sh:sh><![CDATA[
<hx:div>
<fx:effects event="dragenter" duration="0.3s">
    <fx:effect property="background-color"
        value="#00AA00" />
</fx:effects>
</hx:div>
            ]]></sh:sh>
        </hx:div>

        <hx:div styleClass="effectDemoBox">
            <div class="effectDemoBoxText">Click to skew, then mouse out to return back</div>
            <fx:effects event="click" deactivationEvents="mouseout" duration="0.2s" timingFunction="ease-out">
                <fx:effectTransform skewX="-20deg"/>
            </fx:effects>
            <sh:sh><![CDATA[
<hx:div>
<fx:effects event="click"
    deactivationEvents="mouseout"
    duration="0.2s" timingFunction="ease-out">
    <fx:effectTransform skewX="-20deg"/>
</fx:effects>
</hx:div>
            ]]></sh:sh>
        </hx:div>


        <hx:div styleClass="effectDemoBox">
            <div class="effectDemoBoxText">Double click to see the complex effect,</div>
            <div class="effectDemoBoxText">then click to return back</div>
            <fx:effects event="dblclick" deactivationEvents="click" duration="2s" timingFunction="ease-in">
                <fx:effectTransform scaleX="1.2" scaleY="1.2" rotate="20deg" translateX="50" translateY="50" skewX="-10deg"/>
                <fx:effect property="opacity" value="0.3" />
                <fx:effect property="background-color" value="yellow"/>
                <fx:effect property="color" value="red" />
            </fx:effects>
            <sh:sh><![CDATA[
<fx:effects event="dblclick" ...>
    <fx:effectTransform scaleX="1.2" scaleY="1.2"
        rotate="20deg" translateX="50"
        translateY="50" skewX="-10deg"/>
    <fx:effect property="opacity" value="0.3" />
    <fx:effect property="background-color"
        value="yellow"/>
    <fx:effect property="color" value="red" />
</fx:effects>
            ]]></sh:sh>
        </hx:div>
    </h:panelGrid>
</ui:define>
</ui:composition>