Create A Shiny Logo / Image Animation Flash Style With jQuery

{tocify} $title={Table of Contents}

Before developing such a technology website current , logos or images with effects such as animated motion animation , change shape , shimmering , and others , can only be done by creating a logo / picture using flash or gif ( Graphics Interchange Format ). But not with this time after a lot of development that occurs in the web programming such as HTML5 , CSS3 and jQuery.
We can do a variety of things that previously could not be done in a website into something that is possible and real . For instance , with HTML5 we do not need the flash player to play a video or music , we can create interactive animations with CSS3 , or a charming variety of functions that can be generated by jQuery .Create A Shiny Logo / Image Animation Flash Style With jQuery Create A Shiny Logo / Image Animation Flash Style With jQuery

Is not this amazing ?

In this tutorial , I will share the knowledge how to create a logo or image with effects Light Shine style flash animation with jQuery and HTML5 . This effect will make you look professional in presenting the logo or image on your website . It is a plus that required by the marketers in marketing their products , logo corporate website to look professional , or an online store that wants to look elegant . You can apply this method to a website or blogspot though :)

Are you curious ?


Okay , to be able to create the effect , follow the steps that I have outlined to 4 Stage Easy . Be sure to follow step by step in order to run smoothly .

Step #1 - jQuery Script

Make sure jQuery script already installed on your website or blog . You can check it at the HTML code to do a search (ctrl+f) with the keyword 'jquery' or with the .js extension (javascript). If not installed , then you can install it by inserting the code ...
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
before the closing </body> or </head>.

Step #2 - jQuery effects of scintillation

Copy the code into notepad and save as a file this javascript
(function($)
       {
       $.fn.shiningImage=function(params)
              {
              params=$.extend(
                     {
                     color:'#FFFFFF',delay:2000,direction:'z',opacity:0.5,scale:0.25,speed:60
              }
              ,params);
              function init()
                     {
                     var timer;
                     var gradPointPos_1=0;
                     var gradPointPos_2=0;
                     var gradPointPos_3=0;
                     var playFx=true;
                     if(isCanvasSupported)
                            {
                            var _originalImg=$(this);
                            var width=_originalImg.width();
                            var height=_originalImg.height();
                            var ctx;
                            var _self;
                            var img;
                            var imgFx;
                            var gradient;
                            _self=$('<canvas width="'+width+'" height="'+height+'"></canvas>');
                            _self.attr('class',_originalImg.attr('class'));
                            _self.attr('style',_originalImg.attr('style'));
                            _self.attr('id',_originalImg.attr('id'));
                            _originalImg.attr('id',_originalImg.attr('id')+'_');
                            _originalImg.after(_self);
                            _originalImg.hide();
                            ctx=_self.get(0).getContext('2d');
                            imgFx=new Image();
                            imgFx.onload=function()
                                   {
                                   initDesign()
                            };
                            imgFx.src=_originalImg.attr('src');
                            _self.click(function()
                                   {
                                   _originalImg.trigger('click')
                            }
                            );
                            _self.mouseover(function()
                                   {
                                   _originalImg.trigger('mouseover')
                            }
                            );
                            _self.mouseout(function()
                                   {
                                   _originalImg.trigger('mouseout')
                            }
                            );
                            _self.mouseup(function()
                                   {
                                   _originalImg.trigger('mouseup')
                            }
                            );
                            _self.mousedown(function()
                                   {
                                   _originalImg.trigger('mousedown')
                            }
                            )
                     }
                     function initDesign()
                            {
                            gradPointPos_1+=params.scale/3;
                            gradPointPos_2+=params.scale/3;
                            gradPointPos_3+=params.scale/3;
                            if(params.direction=='x')
                                   {
                                   grad=ctx.createLinearGradient(0,0,width,0)
                            }
                            else if(params.direction=='y')
                                   {
                                   grad=ctx.createLinearGradient(0,0,0,height)
                            }
                            else
                                   {
                                   grad=ctx.createLinearGradient(0,0,width,height)
                            }
                            if((gradPointPos_1==params.scale/3)&&(gradPointPos_2==params.scale/ 3) && (gradPointPos_3 == params.scale /3))
                                   {
                                   gradPointPos_1=0;
                                   gradPointPos_3=(params.scale/ 3) * 2
                            }
                             else if((gradPointPos_1 == params.scale/3)&&(gradPointPos_2==params.scale/3))
                                   {
                                   gradPointPos_2=(params.scale/3)*2
                            }
                            if(gradPointPos_3>1)
                                   {
                                   gradPointPos_3=1
                            }
                            if(gradPointPos_2>1)
                                   {
                                   gradPointPos_2=1
                            }
                            if(gradPointPos_1>1)
                                   {
                                   playFx=false;
                                   timer=setTimeout(function()
                                          {
                                          playFx=true;
                                          initDesign()
                                   }
                                   ,params.delay)
                            }
                            if(playFx)
                                   {
                                   grad.addColorStop(gradPointPos_1,'rgba('+hexToRGBA(params.color)+',0)');
                                   grad.addColorStop(gradPointPos_2,'rgba('+hexToRGBA(params.color)+',1)');
                                   grad.addColorStop(gradPointPos_3,'rgba('+hexToRGBA(params.color)+',0)')
                            }
                            else
                                   {
                                   gradPointPos_1=0;
                                   gradPointPos_2=0;
                                   gradPointPos_3=0;
                                   grad.addColorStop(gradPointPos_1,'rgba('+hexToRGBA(params.color)+',0)');
                                   grad.addColorStop(gradPointPos_2,'rgba('+hexToRGBA(params.color)+',0)');
                                   grad.addColorStop(gradPointPos_3,'rgba('+hexToRGBA(params.color)+',0)')
                            }
                            ctx.clearRect(0,0,width,height);
                            ctx.globalCompositeOperation="source-over";
                            ctx.globalAlpha=1;
                            ctx.drawImage(imgFx,0,0,width,height);
                            ctx.globalAlpha=params.opacity;
                            ctx.globalCompositeOperation="source-atop";
                            ctx.fillStyle=grad;
                            ctx.fillRect(0,0,width,height);
                            ctx.globalAlpha=1;
                            if(playFx)
                                   {
                                   timer=setTimeout(initDesign,params.speed)
                            }
                     }
                     function cutHex(hex)
                            {
                            return(hex.charAt(0)=="#")?hex.substring(1,7):hex
                     }
                     function hexToRGBA(hex)
                            {
                            var rgba=parseInt((cutHex(hex)).substring(0,2),16);
                            rgba+=','+parseInt((cutHex(hex)).substring(2,4),16);
                            rgba+=','+parseInt((cutHex(hex)).substring(4,6),16);
                            return rgba
                     }
                     function isCanvasSupported()
                            {
                            var elem=document.createElement('canvas');
                            return!!(elem.getContext&&elem.getContext('2d'))
                     }
              }
              $(this).each(init);
              return $(this)
       }
}
)(jQuery);
Save with the file name, shiny-logo-animation.js in your web hosting. Make external link on your website and place it on top of </head>

Step #3 - jQuery Function

If you have several images to be scintillation effects, then you need this jquery function and make as many as the number of images / logo that will be given a sparkling animation effects. Paste the following code under jquery activation scintillation effects on step # 2
Code for one logo :
<script> $(window).load(function() {
$('#shiny-logo-animation-1').shiningImage();
});
</script>
Code for two logos :
<script> $(window).load(function() {
$('#shiny-logo-animation-1').shiningImage();
$('#shiny-logo-animation-2').shiningImage();
});
</script>
If more than two, then just add the code $('#shiny-logo-animation-numbers').ShiningImage(); before the following code });

Step #4 - Install Shiny Animation Effect In Logo

This is the last stage, if you managed to follow step by step it will create a sparkle effect on images and logos. To put the effect on the image / logo that you just want to add the tag id='#shiny-logo-animation-1' in the html code of the image.
Typically, to insert images on the website are their HTML code:
<img src='Image URL'/>
Once inserted the tag id='#shiny-logo-animation-1' then the code will be as below:
<img id='#shiny-logo-animation-1' src='Image URL'/>
If more than one image then it would be like this (example):
<img id='#shiny-logo-animation-1' src='Image URL'/>
  <img id='#shiny-logo-animation-2' src='Image URL'/>
It's finished for this tutorial
Hopefully can help and understand.
Good luck to you.

Post a Comment

Please provide your comments related to the contents of the article above, comment politely and leave no spam. Thank you

Previous Post Next Post