كيفية تحريك فافيكون?

Question

كيفية تحريك فافيكون مثل هذا ؟

يبدو أن العمل فقط في فايرفوكس.

Answer 1

في حين أنه يدعمه حاليا متصفحات Firefox الأخرى فقط، نأمل أن يدعمها في المستقبل. لتحقيق التأثير، تحتاج إلى تحميل GIF إلى الخادم الخاص بك ثم قم بإضافة الخط أدناه إلى head قسم من صفحتك:

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

إلقاء نظرة على animatedfavicon.com. للحصول على مساعدة وموارد إضافية.

Answer 2

بالتأكيد ليس ما تبحث عنه، لكن بعض الأشخاص قد ذهبوا حتى الآن إلى الكتابة الثماني إلى Favicon في جافا سكريبت جانبي العميل. يوضح عنوان URL التالي أن Defender "المدافع" القديم في Favicon:

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

يعمل هذا في Firefox و Opera و Safari، ولكن ليس في الإصدارات الأقدم على الأقل من IE. لست متأكدا من ما قد يكون أي أحدث IE قادرا على ذلك.

يقوم بعمل "مصدر العرض" في هذه الصفحة يجعل قراءة مثيرة للاهتمام.

Answer 3

ثعلب النار

يدعم فايرفوكس Favicons الرسوم المتحركة. فقط أضف رابطا إلى GIF <link rel="icon"> بطاقة شعار:

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

يمكنك أيضا استخدام ملف ICO الرسوم المتحركة. في هذه الحالة، تعرض المتصفحات التي لا تدعم Favicons الرسوم المتحركة الإطار الأول فقط.

متصفحون اخرون

في متصفحات أخرى، يمكنك تحريك Favicon باستخدام JavaScript. عليك فقط استخراج إطارات واحدة من GIF والتغيير <link rel="favicon"> SRC في كل مرة يتغير إطار gif. انظر هذا الرمز على سبيل المثال (JS Fiddle التجريبي):

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.}

لسوء الحظ، الرسوم المتحركة ليست سلسة للغاية في الكروم. في فايرفوكس، يعمل بشكل رائع، لكن فايرفوكس يدعم بالفعل Favicons GIF.

تحقق من أيضا favico.js. مكتبة.

أنظر أيضا

• كيفية إضافة رمز تبويب المستعرض (Favicon) لموقع الويب؟
• تغيير موقع Favicon ديناميكيا

Answer 4

هناك اتفاقيات إعادة الشراء على جيثب مما يدل على كيفية القيام بذلك.

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

أساسا أنها رسم على القماش ومن ثم القيام canvas.toDataURL('image/png') ثم تعيين <link> href إلى أن data-url.

Answer 5

لقد أنشأت أ مكتبة لتحريك فافيسون, افتراضي هو تحميل الرسوم المتحركة (تم إنشاؤه بواسطة قماش)، ولكنه يدعم أيضا الرسوم المتحركة 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 */) {
   }
});

وسيتمكن المستخدم من رسم إطار واحد

ملاحظة: الأشياء التي يجب مراعاتها إذا كنت ترغب في تنفيذ شيء مثل هذا:

• لتحريك عندما تكون علامة التبويب ليست نشطة استخدام عامل الويب،
• لا تستخدم RequestanimationFrame، لأنه يتوقف عن التنفيذ في MacosX / Chrome حتى في عامل الويب.

Answer 6

لتحريك FAVICON إلى حد كبير جميع المتصفحات، وعمل ما يلي بالنسبة لي:

1. قم بتنزيل صورة لكل إطار من GIF.

2. ربط الصورة الأولى كأكبرات مع معرف:

   <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);
   };
   

تساعد هذه الطريقة فقط في التأكد من أن المزيد من المتصفحات يمكن أن يرى الرسوم المتحركة، لأن الأساليب الأخرى تعمل فقط في متصفحات معينة، وإصدارات المتصفح.