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



14 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
  4. Really time saving script code. It helps in saving lots of time. Kudos to the team for sharing such a wonderful script

    ReplyDelete
  5. If you are going for most excellent contents like I do, simply pay a quick visit this web site all the time as it provides quality contents, thanksHigh Bay Led Lighting

    ReplyDelete
  6. June Florist - Same day flower delivery singapore. Call June Florist for floral arrangements for wedding, decorations for conferences, hand banquet decorations, Flower Box, table flower arrangement & more. Tel: +65 6282 7555
    order flowers online same day delivery
    funeral flowers singapore

    ReplyDelete
  7. We offer university assignment help fulfilling the specific and precise needs of students. Poor quality of an assignment drastically affects the score sheet of a student. Here at Calltutors.com, the writers know how to proceed with an assignment writing task to make the end-result appreciable with world-class university assignment help online. We even welcome the feedback from the client’s end and try to sort out the shortcomings as soon as possible.
    https://www.calltutors.com/Articles/Writing-Assignment-for-University

    ReplyDelete
  8. Hi, I am a marketing manager at All Assignment Help; it is an online platform which offer Assignment help
    for all university students. We have a team of professional writers & provide best solution according to given guideline.

    ReplyDelete
  9. Our My Assignment Help Reviews go through hundreds of websites each month to select only the best. We also offer reviews of such websites which are not up to the mark so that you may know about them as well.

    ReplyDelete
  10. I go through all of your posts and I really really like it, I understand your point.

    ReplyDelete
  11. You made some decent points there. I looked on the internet for the topic and found most people will go along with with your site. local seo packages

    ReplyDelete
  12. I found your this post while searching for details about blog-related research ... It's a good post .. keep posting and updating information.
    Content marketing

    ReplyDelete

More Posts

FOLLOW