😎 » JavaScript » Примеры JavaScript » Анімація фавікона JS
55 0  

Анімація фавікона JS



<html>
<head>
<meta charset="utf-8">
<title>Анімація favicon</title>
<link id="icon" rel="icon" href="" type="image/png">
</head>
<body>
<p>Анімація favicon за допомогою декількох зображеннь.</p>
<script>var index=0, arr_icon=['img0.png','img1.png', 'img2.png','img3.png'], link=document.getElementById('icon');
function animateIcon(){
	index++;
	if(index>=arr_icon.length)index=0;
	link.href='./'+arr_icon[index];
	setTimeout(animateIcon,500);
}
animateIcon();</script>
</body>
</html>


Можна зробити анімацію фавікона і через canvas - метод - canvas.toDataURL().:

<html>
<head>
<meta charset="utf-8">
<title>Приклад анімації favicon</title>
<link id="icon" rel="icon" href="" type="image/png">
</head>
<body>
<p>Анімація favicon за допомогою canvas.</p>
<script>var canvas=document.createElement('canvas'), link=document.getElementById('icon'), arrayText=['JS','','J','a','v','a','s','c','r','i','p','t'],index=0;
canvas.width=54;
canvas.height=54;
var ctx=canvas.getContext('2d');
ctx.font='42px Arial';
ctx.textBaseline = 'middle'; 
ctx.textAlign='center';
function canvasIcon(){
	index++;
	if(index>=arrayText.length)index=0;
	ctx.fillStyle='#3d3e3d';
	ctx.fillRect(0,0,canvas.width,canvas.height);
	ctx.fillStyle='red';
	//малюємо на полотні текст
	ctx.fillText(arrayText[index],25,30);
	link.href=canvas.toDataURL();
	setTimeout(canvasIcon, 500)
}
canvasIcon();</script>
</body>
</html>

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023