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 .
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($)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>
{
$.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);
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 # 2Code 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'/>It's finished for this tutorial
<img id='#shiny-logo-animation-2' src='Image URL'/>
Hopefully can help and understand.
Good luck to you.
Good information
ReplyDelete