Ajax animation demo using animation extender in asp.net part-3

Description:-

Here is the article to create animation in webpage. In this article we will Create animation demo using Ajax Control in webpage. To create animation extender register Ajax Control toolkit in your webpage and use Control what you want to use in your webpage. Here I have use panel control to display label control and use animation extender to display animation in my webpage. Animation Extender has many properties to create animation any webpage. Here I have created sample animation extender to create animation using Ajaxcontrol.

OnmouseOver Property to create when we mouse over in panel then it will create animation on panel what we have to do in animation extender. Here I the sample code what I have use in the animation extender.

Default.aspx:-

<div>
  <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
  <div>
    <asp:Panel ID="pnAnimation" runat="server" CssClass="movingPanel">
      <b>Animated Using AnimationExtender</b>
    </asp:Panel>
    <br />
    <asp:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="pnAnimation">
      <Animations>
        <OnClick>
          <Sequence>
            <%-- Disable the button --%>
            <EnableAction Enabled="false" />
            <%-- Show the flyout --%>
            <Parallel AnimationTarget="pnAnimation" Duration=".3" Fps="25">
              <Move Horizontal="150" Vertical="-25" />
              <Resize Height="260" Width="280" />
              <Color AnimationTarget="pnAnimation" 
                PropertyKey="backgroundColor"
                StartValue="#68CB8C" EndValue="#84BDE7"  />
            </Parallel>
          </Sequence>
        </OnClick>
      </Animations>
    </asp:AnimationExtender>
  </div>
</div>

Here I have used Style for panel Control in webpage layout.

<style>
  .movingPanel
  {
    position: fixed;
    height: 200px;
    width: 150px;
    top: 300px;
    left: 200px;
    border-width: 1px;
    border-color: Black;
    border-style: double;
    background-color: #5ADD83;
  }
</style>

Author : Umesh Patel

Related Posts