Create Image Blink Fade In Effect using jQuery And CSS3

Create Image Blink Fade In Effect using jQuery And CSS3

Blinking effect is one of the most effective way to grab user attention for a particular section on a website. In the past, there was an HTML tag used for the blinking effect. However, currently, that tag does not support by the modern web browsers.

We can use the following jQuery snippets to generate blink effect as an alternative of that HTML tag. So, today we are going to create a simple but elegant blinking effect using jQuery and CSS3.

General idea of a blinking effect is to FadeIn(show) and FadeOut(hide) an item(text/image) with 1sec interval. If you wish, you can double the time interval. The following examples are going to demonstrate the blinking effect both on text and image layout.

– jQuery Snippets For Image Blink Fade In Effect:

$(function(){

/*Hover effect*/

    $("#my_image").hover(function(){
        $(this).addClass("blinking");
    }, function() {
        $(this).removeClass("blinking");
    }); 

/*Start blinking on document ready.*/

    $("#hover_blink").addClass("blinking");

});

You just need to define an image ID that you want blink. Example: #my_image

– jQuery Scripts For Text Blink Fade In Effect:

$(function(){

/*Here post_title is a h2 tag Id.*/

   $("#post_title").addClass("blinking");

/*Following example first we select a class and then find those 
*elements those contain storng tag and blink text 
*inside strong tag*/

    $(".text_blink_effect").find("strong").addClass("blinking");

});

– CSS3 Snippets:

body{
    font-family: verdana;
    font-size: 12px;
    width: 500px;
    margin: 0 auto;
    margin-top: 40px;
}

img{
    cursor: pointer;
}

/*Add a simple ccs3 animation effect in here.
*If you want to increase/decrease blink time you can change it easily.
*add any interval amount instead of 2s.
*/

.blinking{
    -webkit-animation: blink 2s infinite;
    -moz-animation: blink 2s infinite;    
    animation: blink 2s infinite;
}

@-webkit-keyframes blink{

    0%{ opacity:0;}
    100%{opacity:1;}
}

@-moz-keyframes blink{

    0%{ opacity:0;}
    100%{opacity:1;}

}

@keyframes blink{

    0%{ opacity:0;}
    100%{opacity:1;}

}

I hope you enjoyed the tutorial. Let me know, was that information useful or not? What other tips would you like to read about in the future? Share your comments, feedback, and experiences with us by commenting below!

Total 0 Votes
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

2 thoughts on “Create Image Blink Fade In Effect using jQuery And CSS3

Leave a Comment

Back To Top