파비콘에 애니메이션을 적용하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/1837261

  •  11-09-2019
  •  | 
  •  

문제

그런 파비콘에 애니메이션을 적용하는 방법은 무엇입니까?

animated favicon

Firefox에서만 작동하는 것 같습니다.

도움이 되었습니까?

해결책

현재 Firefox에서만 지원되고 있지만 다른 브라우저는 앞으로도이를 지원할 것입니다. 효과를 달성하려면 GIF를 서버에 업로드 한 다음 아래 줄을 추가해야합니다. head 페이지 섹션 :

<link rel="icon" href="animated_favicon.gif" type="image/gif" >

보세요 animatedfavicon.com 추가 도움과 리소스를 위해.

다른 팁

거의 확실히 당신이 찾고있는 것이 아니지만 일부 사람들은 클라이언트 측 JavaScript의 Favicon에 프로그래밍 방식으로 글을 쓸 수 없었습니다. 다음 URL은 Favicon에서 연주하는 오래된 비디오 게임 'Defender'를 보여줍니다.

http://www.p01.org/defender_of_the_favicon/

이것은 Firefox, Opera 및 Safari에서 작동하지만 적어도 오래된 버전의 IE에서는 작동하지 않습니다. 최신 IE가 무엇을 할 수 있는지 잘 모르겠습니다.

이 페이지에서 '소스보기'를 수행하면 흥미로운 읽기가됩니다.

Firefox

Firefox는 애니메이션 파비콘을 지원합니다. GIF에 링크를 추가하십시오 <link rel="icon"> 꼬리표:

<link rel="icon" href="/favicon.gif">

애니메이션 ICO 파일을 사용할 수도 있습니다. 이 경우 애니메이션 파비콘을 지원하지 않는 브라우저는 첫 번째 프레임 만 표시됩니다.

다른 브라우저

다른 브라우저에서는 JavaScript를 사용하여 Favicon을 애니메이션 할 수 있습니다. GIF에서 단일 프레임을 추출하고 변경하면됩니다. <link rel="favicon"> GIF 프레임이 변경 될 때마다 SRC. 예를 들어이 코드를 참조하십시오.JS 바이올린 데모):

var $parent = document.createElement("div")
    $gif = document.createElement("img")
   ,$favicon = document.createElement("link")

// Required for CORS
$gif.crossOrigin = "anonymous"

$gif.src = "https://i.imgur.com/v0oxdQ8.gif"

$favicon.rel = "icon"

// JS Fiddle always displays the result in an <iframe>,
// so we have to add the favicon to the parent window
window.parent.document.head.appendChild($favicon)

// libgif.js requires the GIF <img> tag to have a parent
$parent.appendChild($gif)

var supergif = new SuperGif({gif: $gif})
   ,$canvas

supergif.load(()=> {
  $canvas = supergif.get_canvas()
  updateFavicon()
})

function updateFavicon() {
  $favicon.href = $canvas.toDataURL()
  window.requestAnimationFrame(updateFavicon)
}

나는 사용했다 libgif.js GIF 프레임을 추출합니다.

불행히도 크롬에서는 애니메이션이 그다지 부드럽 지 않습니다. Firefox에서는 훌륭하게 작동하지만 Firefox는 이미 GIF Favicons를 지원합니다.

확인하십시오 favico.js 도서관.

또한보십시오

저장소가 있습니다 GitHub 이를 수행하는 방법을 보여줍니다.

http://lab.ejci.net/favico.js/example-simple/

기본적으로 그들은 캔버스에 그림을 그린 다음 작업을 수행합니다. canvas.toDataURL('image/png') 그런 다음 <link> 해당 데이터 URL에 대한 href입니다.

나는 a 파비콘을 애니메이션하는 라이브러리, 기본값은 로더 애니메이션 (캔버스에서 생성)이지만 Box에서 GIF를 지원하지 않는 브라우저 용 GIF 애니메이션도 지원합니다 (버전 0.3.0).

API는 간단합니다

favloader.init({
    color: 'red'
});

favloader.start();
favloader.stop();

버전 0.4.0은 다음과 같은 프레임을 생성하는 콜백 함수가 있습니다.

favloader.init({
   frame: function(ctx /* canvas context 2D */) {
   }
});

사용자는 단일 프레임을 그릴 수 있습니다

노트: 이와 같은 것을 구현하려는 경우 고려해야 할 사항 :

  • 탭이 활성화되지 않은 시점에 애니메이션 웹 워커를 사용합니다.
  • 웹 작업자에서도 MacOSX/Chrome에서 실행을 중단하기 때문에 requestAnimationFrame을 사용하지 마십시오.

거의 모든 브라우저에 대한 Favicon을 애니메이션하기 위해 다음은 저에게 효과적이었습니다.

  1. GIF의 각 프레임 이미지를 다운로드하십시오.

  2. 첫 번째 이미지를 ID와 함께 아이콘으로 연결하십시오.

    <link rel="icon" type="image/png" href="/image1.png" id="icon"/>

  3. 루프 기능을 만들고 사용할 함수를 만듭니다 setTimeout() 각 이미지에 대해. 타임즈는 가변적이며 애니메이션을 원하는 빠르게 설정할 수 있습니다. 예는 다음과 같습니다.

    function iconChange() {
setTimeout(function(){ document.getElementById("icon").href = "/image1.png";}, 333);
setTimeout(function(){ document.getElementById("icon").href = "/image2.png";}, 667);
setTimeout(function(){ document.getElementById("icon").href = "/image.png";}, 1000);  
}

  4. 창이로드 될 때 루프를 만듭니다.

    window.onload = function() {
setInterval(function() {
iconChange();
}, 250);
};

이 방법은 다른 브라우저가 특정 브라우저와 브라우저 버전에서만 작동하기 때문에 더 많은 브라우저가 애니메이션을 볼 수 있도록하는 데 도움이됩니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top