Text Animation in HTML5

You can create text marquee (i.e. scrolling text left to right and right to left on the canvas) and can create a text animation such as text rotation, text highlight etc.

The article demonstrate the following text animations on the canvas. See the Demo.

All example, displays the text “Welcome” in the various animation. In the first example the text “welcome” is scrolling continuously left to right on the other hand in the second example text is scrolling right to left.And in the third example the text spins in starting small and growing to its full size as it spins. The forth animation displays text small to big size.

Examples with code

The below example shows us how to scroll the text left to right on the canvas in HTML5 without using any CSS.

Example 1 – Scrolling text left to right in HTML5

The following example display a similar result to the above method but in this example text scrolls top to bottom.

Example 2 -Scrolling text top to bottom in HTML5

The Following example gives you an idea to scrolling the text on the canvas in HTML 5.

Example 2 -Scrolling text right to left in HTML5

Example 4 -Text rotation in HTML5

Example 5 -Text animation small to its full size in HTML5

The following code example demonstrates how to text fade in and fade out effect on the canvas in HTMl5.

Example 6 – Text fade-in and fade-out in HTML5

Thanks

Create new row in the table after dropping an element using jquery ui

You can see the additional work in drag and drop functionality, When user will drop the element in the last row of the table, then new row will be inserted automatically. Continue reading “Create new row in the table after dropping an element using jquery ui”

Highlight a droppable area on hover using jquery ui

The example contains multiple droppable div elements. You can drag items from the list and can drop to any of these div. When you are dragging an element and it is hovered over a droppable div then that div will highlighted. Continue reading “Highlight a droppable area on hover using jquery ui”

Remove dragged item after dropping using JQuery UI

The demo shows the basic functionality of drag and drop using JQuery. After dropping, dragged item will be removed from the dragged list. Continue reading “Remove dragged item after dropping using JQuery UI”

Swap elements when drag and drop one onto another using jQuery UI

Demo shows how to swap elements between two list using drag and drop functionality. The Example have two elements list, you can drag and drop elements from one to another. Continue reading “Swap elements when drag and drop one onto another using jQuery UI”

Show dynamic dialog box using JQuery

Dialog box is commonly used user interface for the web development, especially to show the action information to the user. Some time we need to show the dialog box with dynamic content, you can get some idea from the below example. Continue reading “Show dynamic dialog box using JQuery”

Drag li element and drop to td of the html table using jQuery UI

The following example shows how to perform drag and drop between li and html table. You can drag items from left-hand side and can drop to td element of the html table. Continue reading “Drag li element and drop to td of the html table using jQuery UI”

Drag and Drop li elements into Textbox


From the below example you can drag a li element from a list and drop it into a textbox with comma separator. Continue reading “Drag and Drop li elements into Textbox”

Example – Drag and Drop li to div

Demo

Drag li elements with the mouse anywhere with in yellow section(div). In this example, you will learn how to drag and drop li elements to div using jQuery UI plugin. See the demo and source code.

Drag from here

  • Item A
  • Item B
  • Item C
  • Item D
  • Item E
  • Item F
  • Item G
  • Item H
  • Item I

Drop here

Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .ui-drop-hover
        {
            border: 2px solid #bbb;
        }
        #dragdiv
        {
            width: 180px;
            height: 400px;
            float: left;
        }
        #dropdiv
        {
            width: 380px;
            height: 350px;
            background-color: #F9F887;
            float: right;
            margin-right: 10px;
        }
        #dropdiv li
        {
            padding-left: 10px;
        }
        #maindiv
        {
            width: 600px;
            height: 450px;
            border: 2px solid #bbb;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"
        type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#dragdiv li").draggable({
                appendTo: "body",
                helper: "clone",
                cursor: "move",
                revert: "invalid"
            });
 
            initDroppable($("#dropdiv"));
            function initDroppable($elements) {
                $elements.droppable({
                    activeClass: "ui-state-default",
                    hoverClass: "ui-drop-hover",
                    accept: ":not(.ui-sortable-helper)",
 
                    over: function (event, ui) {
                        var $this = $(this);
                    },
                    drop: function (event, ui) {
                        var $this = $(this);
                        $("<li></li>").text(ui.draggable.text()).appendTo(this);
                        if (this.children.length > 0) {
                            return false;
                        }
 
                    }
                });
            }
        });
    </script>
</head>
<body>
    <div id="maindiv">
        <div id="dragdiv">
            <h3>
                <span>Drag from here</span></h3>
            <ul id="allItems" runat="server">
                <li id="node1">Item A</li>
                <li id="node2">Item B</li>
                <li id="node3">Item C</li>
                <li id="node4">Item D</li>
                <li id="node5">Item E</li>
                <li id="node6">Item F</li>
                <li id="node7">Item G</li>
                <li id="node8">Item H</li>
                <li id="node9">Item I</li>
            </ul>
        </div>
        <h3>
            <span>Drop here</span></h3>
        <div id="dropdiv">
        </div>
    </div>
</body>
</html>