Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Monday, March 26, 2018

Simple Text Animation Using HTML, CSS and JQuery

In this article, we are explaining a very simple way to animate text in different ways.

1. Includes(jquery and bootstrap libraries)
2. CSS to design content
3. Body of content
4. Javascript to perform actions

Animations
1. Blur-in on mouse hover
2. Blur-out on mouse hover
3. Change background to the text
4. Show/hide text in sequence


Includes

   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>    <link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>


css

    <style>
            #fadeIn { font: 15px monospace; }
            #fadeIn .letter { opacity: 0; }
            #fadeIn .opacity {
                -webkit-transition: opacity .15s ease-in-out;
                -moz-transition: opacity .15s ease-in-out;
                -ms-transition: opacity .15s ease-in-out;
                -o-transition: opacity .15s ease-in-out;
                transition: opacity .15s ease-in-out;
                opacity: 1;
            }
            #backgroundPaint .background {
                -webkit-transition: background .3s ease-in-out;
                -moz-transition: background .3s ease-in-out;
                -ms-transition: background .3s ease-in-out;
                -o-transition: background .3s ease-in-out;
                transition: background .3s ease-in-out;
                background: yellow;
            }
            h1, h2
            {
                font-size: 1.6em;
                font-weight: normal;
                margin: 0;
            }
            h2
            {
                font-size: 1.3em;
                margin-top: 1.5em;
            }
            a.blur
            {
                text-decoration: none;
                color: #339;
            }
            a.blur:hover, a.blur:focus
            {
                text-decoration: underline;
                color: #933;
            }
            .textshadow a.blur, .textshadow a.blur:hover, .textshadow a.blur:focus
            {
                text-decoration: none;
                color: rgba(0,0,0,0);
                outline: 0 none;
                -webkit-transition: 400ms ease 100ms;
                -moz-transition: 400ms ease 100ms;
                transition: 400ms ease 100ms;
            }

            .textshadow a.blur,
            .textshadow a.blur.out:hover, .textshadow a.blur.out:focus
            {
                text-shadow: 0 0 4px #339;
            }
            .textshadow a.blur.out,
            .textshadow a.blur:hover, .textshadow a.blur:focus
            {
                text-shadow: 0 0 0 #339;
            }
        </style>



Body

    <body>
        <div id="fadeIn">
            <button>Click</button>
            <h2>Hello Programmer, Welcome to PHP Javascript - Wonderful place to learn programming.</h2>
        </div>

        <div id="backgroundPaint">
            <button>Click</button>
            <h2>Hello Programmer, Welcome to PHP Javascript - Wonderful place to learn programming.</h2>
        </div>

        <p>The following links blur in on hover/focus</p>

        <h1><a href="http://www.phpjavascript.com/" class="blur">Hover me (Blur-in)</a></h1>

        <p>The following links blur out on hover/focus</p>

        <h1><a href="http://www.phpjavascript.com/2018/01/display-json-data-in-table-using-jquery.html" class="blur out">Hover me (Blur-out)</a></h1>
    </body>



JavaScript

<script>
        $.fn.animateText = function (delay, styleclass) {
            var text = this.text();
            return this.each(function () {
                var $this = $(this);
                $this.html(text.replace(/./g, '<span class="letter">$&</span>'));
                $this.find('span.letter').each(function (i, el) {
                    setTimeout(function () {
                        $(el).addClass(styleclass);
                    }, delay * i);
                });
            });
        };

        $('#fadeIn button').click(function () {
            $(this).next('h2').animateText(15, 'opacity');
        });

        $('#backgroundPaint button').click(function () {
            $(this).next('h2').animateText(8, 'background');
        });

        if (document.createElement("detect").style.textShadow === "") {
            document.getElementsByTagName("html")[0].className += " textshadow";
        }
    </script>



Note:Paste javscript code at te bottom of your html code.
*Please share the article and follow our PHP Javascript for more.

Display JSON data in dropdown

Display JSON data in a table



More Posts

FOLLOW