Teknik gambar gerakan yang dikurangkan, ambil dua

Adakah anda melihat bahawa teknik yang kemas untuk menggunakan elemen dengan untuk melayani imej animasi (atau tidak) berdasarkan pertanyaan media yang lebih besar-berkurang?

Selepas kami berkongsi bahawa dalam surat berita kami, kami mendapat jawapan yang menarik dari Michael Gale:

Bagaimana dengan orang -orang yang suka GIF animasi mereka, tetapi tidak mahu UI menjadi zoom di seluruh tempat? Adakah mereka kini terpaksa membuat pilihan antara kandungan dan UI?

Saya fikir itu adalah soalan yang cukup menarik.

Juga, apabila saya melihat Hari ini, otak saya dicetuskan dengan baik bagaimana dengan mp4?! Wilayah, kerana saya telah yakin bahawa video lebih baik-dalam-jalan di web daripada GIF. Ternyata, sesetengah pelayar menyokong video tepat dalam elemen dan, percaya atau tidak, anda boleh menulis sandaran untuk itu, dengan - drumroll, sila - untuk elemen juga!

Mari kita retak untuk menggabungkan semua perkara ini.

Menambah sumber MP4

Yang mudah menambah tambahan dengan video. Ini bermakna kita memerlukan tiga fail media sumber:

1. Grafik yang tidak diwarnai apabila lebih suka-berkurang-gerakan berkurang.
2. Gif animasi sebagai lalai.
3. Video MP4 untuk menggantikan GIF, jika sandaran disokong.

Contohnya:

 <picip>
  <sumber srcset="static.png" media="(lebih suka-dikurangkan-gerakan: mengurangkan)"> </sumber>
  <source srcset="animated.mp4" type="video/mp4">
  <img srcset="animated.gif" alt="imej animasi">
</source></picip>

Di bawah keadaan lalai di Chrome, hanya GIF dimuat turun dan ditunjukkan:

Di bawah keadaan lalai di Safari, hanya MP4 dimuat turun dan ditunjukkan:

Jika anda telah mengaktifkan lebih suka-berkurang-gerakan: Kurangkan sama ada Chrome atau Safari (pada Mac saya, saya pergi ke Keutamaan Sistem → Kebolehcapaian → Paparan → Mengurangkan gerakan ), kedua-dua pelayar hanya memuat turun fail PNG statik.

Saya menguji Firefox dan nampaknya tidak berfungsi, sebaliknya terus memuat turun versi GIF. Firefox seolah-olah menyokong lebih suka-berkurang-gerakan, tetapi mungkin ia tidak disokong pada unsur-unsur lagi? Saya tidak pasti apa yang ada di sana.

Bukankah agak keren untuk menyediakan sumber animasi tunggal dan mempunyai alat yang menghasilkan yang lain daripadanya? Saya yakin anda boleh mengikatnya dengan sesuatu seperti Cloudinary.

Menambah togol untuk menunjukkan versi animasi

Seperti yang disebutkan oleh Michael Gale, nampaknya kasihan bahawa anda sepenuhnya terkunci daripada melihat versi animasi hanya kerana anda telah membalikkan togol gerakan yang dikurangkan.

Ia sepatutnya cukup mudah untuk mempunyai yang akan menggunakan JavaScript untuk melepaskan pertanyaan media dan memaksa penyemak imbas untuk menunjukkan versi animasi.

Saya cukup yakin tidak ada cara praktikal untuk melakukan ini secara deklaratif di HTML. Kami juga tidak boleh meletakkan butang ini dalam tag . Walaupun bukan elemen yang diganti, penyemak imbas masih keliru dan tidak menyukainya. Sebaliknya, ia tidak menjadikannya sama sekali. Tiada masalah besar, kita boleh menggunakan pembungkus.

 <dana>
  
  <picip>
     
  

  <utton> animate 

</utton></picip></dana>

Kita boleh meletakkan butang di atas imej di suatu tempat. Ini hanya pilihan yang sewenang -wenang - anda boleh meletakkannya di mana sahaja yang anda mahu, atau bahkan mempunyai keseluruhan imej yang boleh diteliti selagi anda fikir anda boleh menerangkannya kepada pengguna. Ingatlah untuk hanya menunjukkan butang apabila pertanyaan media yang sama sesuai:

 .picture-wrap .animate-button {
  Paparan: Tiada;
}

@media (lebih suka-dikurangkan-gerakan: mengurangkan) {
  .picture-wrap .animate-button {
     paparan: blok;
  }
}

Apabila butang diklik (atau ditoreh), kita perlu mengeluarkan pertanyaan media untuk memulakan animasi dengan memuat turun sumber animasi.

 biarkan butang = document.QuerySelector (". Animate-button");

Button.AdDeventListener ("klik", () => {
  const induk = butang.closest (". Picture-wrap");
  const picture = induk.QuerySelector ("Picture");
  Picture.QuerySelector ("Sumber [Media]"). Buang ();
});

Inilah tindakan itu:

Mungkin ini adalah komponen yang baik?

Kami secara automatik boleh memasukkan butang, gaya butang, dan fungsi butang dengan komponen web. Hei, mengapa tidak?

Atas ialah kandungan terperinci Teknik gambar gerakan yang dikurangkan, ambil dua. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!