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



27 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
  13. Hey there, You have done a fantastic job. I’ll definitely digg it and personally suggest to my friends. I am sure they'll be benefited from this site. website consultants

    ReplyDelete
  14. The best way for mining Bitcoin is The ASIC Hardware, so the only suggestion is MicroBT Whatsminer M20s 72 THS it's the only best and profitable Bitcoin Miner, visit the manufacturer here for purchasing: "Bitcoin Mining Hardware"

    ReplyDelete
  15. The creation of text animation is an easy task for both front-end developer and for any programmer. but this type of task is difficult for humanitarians, even for the most clever humanitarians - pro-writers who works for the best essay writing service https://orderessay.net/writing-an-essay-about-yourself.html (that also propose writing essay that has a type "essay about yourself"/"essay about myself")

    ReplyDelete
  16. Thank you so much for sharing these amazing tips. Digital Signature Certificate

    ReplyDelete
  17. Thanks for sharing the relevant information with us…It are good for us. Digital Signature Certificate

    ReplyDelete
  18. My developer is trying to persuade me to move to .net from PHP. I have always disliked the idea because of the costs. But he's tryiong none the less. I've been using Movable-type on a number of websites for about a year and am worried about switching to another platform. I have heard fantastic things about blogengine.net. Is there a way I can transfer all my wordpress posts into it? Any help would be really appreciated!
    how to market a product

    ReplyDelete
  19. I was wondering if you ever considered changing the page layout of your website? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having 1 or 2 pictures. Maybe you could space it out better? lead generation website

    ReplyDelete
  20. Best Corporate Video Production Company in Bangalore and top Explainer Video Company, 3d, 2d Animation Video Makers in Chennai
    Many many thanks for sharing such a valuable tips. we really appreciate your nice explanation. I will certainly dig it and personally suggest to my friends.

    ReplyDelete
  21. Very good content on this site Always looking forward to new post. Class 2 Digital Signature Certificate

    ReplyDelete
  22. I highly admire your post. Thanks for sharing such wonderful information, I see your post very often and share them on all social media channels.
    Digital Signature Certificate in Delhi

    ReplyDelete
  23. I highly admire your post. Thanks for sharing such wonderful information, I see your post very often and share them on all social media channels.
    Digital Signature Certificate in Delhi

    ReplyDelete

More Posts

FOLLOW