FOLLOW

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



4 comments:

  1. Our Mumbai Escort Agency prepared them so well that none of our customers stays unsatisfied with the administration our young ladies give.
    Mumbai escorts

    ReplyDelete
  2. Going to the city Mumbai which is loaded with crowed individuals don't have sufficient energy to talk so sharing of sentiments is far of thing.Mumbai escorts

    ReplyDelete
  3. Do you have a spam problem on this website;
    I also am a blogger, and I was wondering your situation; many of us have created some nice methods and we are looking to trade strategies with others, please shoot me an e-mail if interested.
    Bangalore escorts

    ReplyDelete