OnClick Animasyonlu GIF Nasıl Oynanır

Animasyonlu GIF, bir tasarım konseptini görselleştirmenin popüler bir yoludur (işte CSS ile oluşturulan yazı sonrası efektler için nasıl yaptığımıza bir örnek) veya kısa bir video klip göster. Ancak aynı sayfada çok fazla kişi varsa, kullanıcının odağını saptırır. Çok fazla GIF gösteren sayfalar için bu kötü bir haber.

Çözüm: statik görüntüye sahip kullanıcılara hizmet verin ve yalnızca animasyonlu GIF’in kullanıcı tıklamasıyla çalışmasına izin verin. Bu kısa derste size bunun nasıl yapılacağını göstereceğiz..

• Demoyu Gör
• Kaynak İndir

Başlamak

Aşağıdakileri içeren proje klasörlerini ve dosyalarını hazırlamaya başlayın: bir HTML dosyası, jQuery ve son olarak da kodumuzu yazacağımız bir JavaScript dosyası. JQuery'yi bir CDN'ye bağlayabilir veya kopyayı alıp proje dizininize bağlayabilirsiniz. Stilleri ve CSS'yi hayal gücünüze bırakırdım. En önemli kısım HTML işaretlemesi aşağıdaki gibidir:

Ek dikkat edin Veri-alt özniteliği img öğesi. GIF'i, başlangıçta sunduğumuz statik görüntünün yerine sakladığımız yer burasıdır. Daha fazla resim ekleyebilir ve ayrıca figcaption eleman.

Bundan sonra, sihri getirecek JavaScript'i yazacağız. Buradaki fikir, kullanıcı resme tıkladığında GIF resmini sunmaktır..

JavaScript

İlk önce, içine koyduğumuz GIF resim yolunu alacak bir işlev yaratırız. Veri-alt bağlıyor. Görüntünün her biri arasında döngü kuracağız ve jQuery'yi kullanacağız. .veri() Bunu yapmak için yöntem:

 var getGif = function () var gif = []; $ ('img'). her (function () var data = $ (this) .data ('alt'); gif.push (data);); dönüş gif;  var gif = getGif ();

Fonksiyonu çalıştırır ve çıktıyı değişkende saklarız. gif, yukarıdaki gibi. gif değişken artık sayfadaki görüntülerden GIF yolunu içeriyor.

Image Ön yükleme

Şimdi bir yükleme sorunumuz var: GIF henüz yüklenmediyse, animasyonlu GIF'in anında oynatılmaması ihtimali var (tarayıcının GIF'i tam olarak yüklemek için birkaç saniyeye ihtiyacı olacak). GIF resim boyutu büyük olduğunda bu gecikme daha belirgin bir şekilde hissedilir.

Sayfa yüklenirken GIF’leri aynı anda önceden yüklememiz veya yüklememiz gerekir.

 // Tüm GIF’yi önceden yükle. var görüntü = []; $ .each (gif, function (index) görüntü [dizin] = yeni Resim (); görüntü [dizin] .src = gif [dizin];);

Şimdi DevTools'u açın, sonra Ağ (veya kaynaklarsekmesi. GIF’lerin önceden kaydedilmiş olsalar bile zaten yüklü olduğunu göreceksiniz. Veri-alt bağlıyor. Ve aşağıdakiler yapmanız gereken tüm kod..

Kodun son parçası her birini bağladığımız yer şekil görüntüyü ile saran öğeyi tık Etkinlik.

Kod, resim kaynağını arasında değiştirecektir. src statik görüntünün sunulduğu yer ve Veri-alt GIF imgesine başlangıçta hizmet ettiğimiz özellik.

Kullanıcı ikinci kez tıkladığında kod da statik görüntüye döner, “Durduruluyor” animasyon.

 $ ('rakam'). on ('click', function () var $ this = $ (this), $ index = $ this.index (), $ img = $ this.children ('img'), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.'); eğer ($ imgExt [1] === 'gif') $ img.attr ('src', $ img.data ('alt')). attr ('data-alt', $ imgSrc); else $ img.attr ('src', $ imgAlt) .attr ('data-alt', $ img.data ('alt')););

Ve bu kadar. Sayfayı stillerle parlatabilirsiniz, örneğin, görüntüyü göstermek için görüntüyü kaplayan bir oynat düğmesi ekleyebilirsiniz. “oynanabilir” veya hareketli bir GIF.

Demoyu inceleyin ve kaynağı buradan indirin.

• Demoyu Gör
• Kaynak İndir