CSS spriteları oluşturuyoruz. Örnekler. css sprite nasıl yapılır

Merhaba sevgili arkadaşlar. Bugün, daha hızlı yükleme hızları için sitelerimizdeki resimleri optimize etmeye devam edeceğiz. adresinden hatırladığınız gibi, site için herhangi bir resmi hem tek tek hem de toplu olarak nasıl optimize edeceğimizi öğrendik.

Ve bugün konumuz da görüntü optimizasyonuna ayrılmış, ancak geçen seferden çok daha karmaşık. Yani bugün sitenin yüklenmesini hızlandırmak için nasıl CSS sprite oluşturulacağını anlatacağım ve göstereceğim. Siteyi yükleme hızını önemli ölçüde artırabilen bu teknolojidir.

CSS spriteları nelerdir?

Genel olarak, hareketli grafik teknolojisi ilk olarak Disney'deki animatörler tarafından icat edildi. Bundan sonra, bu teknoloji bilgisayar oyunlarında ve son olarak web tasarımında aktif olarak kullanıldı.

Animasyon ve bilgisayar oyunlarında, hareketli grafik teknolojisi, karakterleri üst üste getirmenize ve bitmiş bir sahnenin arka planına karşı eylemlerini kontrol etmenize olanak tanır.

Web tasarımında sprite, görüntüyü ve görsel efektleri kontrol etmenizi sağlar. Örnek: web sitemde. Başlangıçta bir görüntü görüyorsunuz, ancak fare imlecini roketin üzerine getirdiğinizde başka bir görüntü görüyorsunuz. Ama aslında sadece bir görüntü.

CSS sprite'larının tüm amacı budur.

Neden CSS Sprite Kullanmalısınız?

Eh, elbette, sitenin yükleme hızını hızlandırmak için. Örnek olarak benim blogumu ele alalım. Yakından bakarsanız, blogumda ayrı dosyalar (resimler) ile temsil edilen birçok tasarım öğesi var.

Sprite ile değiştirilebilen tasarım öğeleri

Toplamda 19 ayrı resim var. Hepsi optimize edilmiştir ve çok az ağırlığa sahiptir. Ve bu çok iyi. Ancak çok sayıda görüntü, sunucuya 19 HTTP isteği oluşturur. Ve tüm bu istek-yanıt, sitenin yüklenmesini yavaşlatır. Ve bu 19 resmi bir veya iki ile değiştirebilirsiniz.

Böylece indirilen görüntünün hacmi azalır ve sunucuya yapılan istek sayısı azalır. Sonuç olarak, sitenin yüklenme hızı artar.

CSS sprite'larında hangi resimler birleştirilmelidir?

Kesinlikle tüm görüntülerin birleştirilmesi gerektiğini düşünmeye gerek yok. Bu hiç gerekli değil. Hangi görüntülerin birleştirilmesi gerektiğini bulmak için zaten aşina olduğunuz GTmetrix hizmetini kullanmanızı tavsiye ederim.

Burada ayrıca sprite oluşturmaya yönelik önerileri de görebilirsiniz. Daha spesifik olarak, SpriteMe CSS hareketli grafik oluşturucunun önerisi . Bu jeneratör ile istediğiniz spriteları kolayca oluşturabilirsiniz. Ama bana yardım etmedi ve bu yüzden her şeyi kendim yapmak zorunda kaldım.

CSS spriteları nasıl oluşturulur

Şimdi nasıl çalıştığını mecazi olarak açıklamaya çalışacağım. Öyleyse, hayal edin - tüm site şablonu, grafik öğeleri eklemek için birçok hücreye sahip sağlam bir çerçevedir. Ve bu tel çerçevenin arkasında çok sayıda grafik tasarım öğesi olan sağlam bir görüntü var. Ve bu görüntü CSS stilleri kullanılarak kontrol edilir. Yani, CSS stillerini kullanarak istediğiniz görüntü parçasını herhangi bir çerçeve penceresinde değiştirebilirsiniz. Umarım net bir şekilde anlatmışımdır. Öyleyse başlayalım.

GTmetrix hizmeti sizden veya siz hangi dosyaların hareketli grafiklerde birleştirilmesi gerektiğine kendiniz karar verdikten sonra, bir hareketli grafik (boş) oluşturmaya başlamalısınız.

Bu yüzden siteyi GTmetrix hizmetinde analiz ediyorum ve sırayla önerilen görüntüleri bilgisayardaki ayrı bir klasöre kaydediyorum.

Görüntüleri ayrı bir klasöre kaydedin

Bu bireysel görüntülerden bir sprite yaratacağız.

Saydam bir arka plana sahip yeni bir görüntü oluşturun. Tüm resimlere uyacak boyutu seçin. Örneğin, tüm resimleriniz 32x32 ve 16x16 piksele sahipseniz ve bir tane 380x150 varsa, resminizi tüm bu resimleri bir araya getirecek şekilde yapın.

Ve arka planı şeffaf yaptığınızdan emin olun.

Ancak boyutta bir hata yapmış olsanız bile, bunu her zaman “Görüntü” menü öğesi aracılığıyla düzeltebilirsiniz - "Görüntü boyutu".

Şimdi daha önce hazırladığınız tüm görüntüleri dönüşümlü olarak gösterin.

Menü seçeneği "Dosya" > "Resmi aç". Bir resim açılır, CTRL+A ile seçin ve CTRL+C ile panoya kopyalayın. Boşluğa gidin ve CTRL+V görüntüsünü yapıştırın. Ve böylece tüm görüntülerle.

Benzer bir şey olmalı.

Şimdi gereksiz her şeyi kesmelisin. Bunu yapmak için aracı kullanın "Budama".

Boşluk hazır olduğunda PNG formatında kaydedin ve işin yarısı tamamlanmış olur. Menü seçeneği "Dosya" > "Kaydetmek". Formatı unutmayın.

Şimdi resmin, temanın resimler klasöründeki barındırmaya yüklenmesi gerekiyor:

http://yourdomen/wp-content/themes/vahatema/images/

Tema resimlerini saklamak için klasör adında farklılıklar olabileceğini lütfen unutmayın.

Barındırmaya bir dosya yüklemek, barındırma dosya yöneticisi aracılığıyla yapılabilir, benim durumumda . Veya aracılığıyla. Bu size kalmış.

Ve şimdi en zor kısım başlıyor, şablon görüntülerini bir hareketli grafikle değiştirmeniz gerekiyor. Örnek olarak blogumdaki site çubuğundaki blok başlıklarını alalım ve elementin kodunu inceleyelim. Bunu yapmak için, istediğiniz öğeye sağ tıklayın ve içeriğe duyarlı menüden öğeyi seçin. "Öğe kodunu görüntüle"(Chrome için) veya "Öğeyi Keşfet"(Firefox için). Aynı durum diğer tarayıcılar için de geçerlidir.

Bir şablondaki bir öğeyi inceleme

Burada HTML kodunu ve CSS stillerini görebilirsiniz. Yani, stillerin çıktısından sorumlu dosyayı ve bu parçadan sorumlu sınıfın aranacağı satır numarasını görürsünüz. Kenar çubuğu sınıfının ve özellikle h2 başlığının 339 satırındaki style.css dosyasında yer aldığı ekran görüntüsünden açıkça görülmektedir. Gerekli tüm stil değişikliklerini girmeniz gereken yer burasıdır.

Ama zaten burada, eleman araştırma penceresinde stilleri deneyebilir ve doğru olanı seçebilirsiniz. Bundan sonra, bu stilleri style.css dosyasına aktarmanız yeterli olacaktır.

Bu adıma geçmeden önce style.css dosyasının bir yedek kopyasını almanızı şiddetle tavsiye ederim.

Şimdi göreviniz style.css dosyasını açmak ve gerekli değişiklikleri yapmak. Bunu Notepad++ (çok kullanışlı düzenleyici ve satır numarasını görüntüler) ile veya WordPress yönetici panelindeki düzenleyici aracılığıyla yapabilirsiniz.

Öyleyse, WP yönetici panelini açın - "Dış görünüş" > "Editör" > stil.css. Burada satır numaralandırma olmadığı için CTRL + F aramasını kullanarak doğru yeri aramalı ve istediğiniz CSS sınıfını girmelisiniz (benim durumumda - kenar çubuğu h2).

style.css kodunda değişiklik yapma

Görüntü dosyasının adını değiştirmeniz ve koordinat eksenine göre konum parametrelerini girmeniz yeterlidir. Sizin için ekran görüntümdekiyle aynı değilse, görüntünün (arka plan) gösterilmesinden parametrenin sorumlu olduğunu anlamalısınız: arkaplan: url('images/spriteme.png');

Ve parametre görüntünün konumundan sorumludur: arka plan konumu: -0px -0px; negatif değerlerle. İlk sayı X ofsetidir, ikincisi Y ofsetidir.

Bu sayede birçok şablon görseli bir tanesi ile değiştirebilirsiniz, tek fark bu görselin konumunda olacaktır. İş çok özenli, ancak herkes yapabilir.

Bu, site için CSS hareketli grafiklerinin oluşturulmasını tamamlar. Talimatları izleyin ve iyi olacaksınız.

Yakın gelecekte CSS sprite oluşturma hakkında ayrıntılı bir şekilde göstermeye ve anlatmaya çalışacağım bir video eğitimi kaydedeceğim.

Ve işte vaat edilen video eğitimi:

Ve küçük bir hile sayfası, css stilleri ve video eğitiminde kullanılan listeler, mahmuzları indirebilirsiniz. burada.

Bugün sahip olduğum tek şey bu. Arkadaşlar, hepinize iyi şanslar diliyorum!

Duydun ama...

Gerçekten ne olduğunu anlıyor musun? İsim biraz yanıltıcı çünkü bu durumda sprite küçük resimler değil, büyük bir resim. Kesinlikle hareket eden bir düğmenin durumunu değiştirmek için tek bir görüntü kullanan CSS hilesini görmüşsünüzdür.

Bence CSS spriteları bu tekniğin bir uzantısı. Aradaki fark, tek bir resimde birleştirilmiş iki veya üç resim yerine, istediğiniz kadar çok resmi tek bir resimde kullanabilmenizdir. "Sprite" terimi, bilgisayar grafiklerinden ve video oyun endüstrisinden gelir. Buradaki fikir, bir bilgisayarın bellekte bir görüntü oluşturabilmesi ve ardından bunun yalnızca bir kısmını gösterebilmesiydi; bu, her seferinde yeni bir görüntü oluşturmaktan çok daha hızlıdır. CSS sprite'ları aynı fikre sahiptir: bir kez bir görüntü alın, her durum için farklı bir bölüm görüntüleyin.

Bu görüntüleri neden birleştiriyorsunuz? Küçük olanları yüklemek daha hızlı değil mi?

Hayır değil. Son zamanlarda, herkes resimleri kesti, sözde dilimler yaptı, böylece sayfa daha hızlı yüklenir. Bu teknik, bir görüntünün birçok parçasının sunucudan aynı anda yüklenmesi ve neredeyse aynı anda görüntülenmesi nedeniyle sayfanın daha hızlı yüklendiği görünümünü yarattı. Her dilim için ayrı bir http isteği oluşturuldu ve bu tür istekler ne kadar çok olursa sayfanız o kadar az etkili olur.

Aşağıdakiler "Performans Araştırması, Bölüm 1" makalesinden bir alıntıdır:

Popüler siteler için Tablo 1, html işaretlemesini yükleme süresinin %5 ile %38 arasında değiştiğini göstermektedir. Geri kalan süre (%62 ile %95 arasında) belgenin geri kalanını (görüntüler, komut dosyaları ve stil dosyaları gibi) yüklemek için http istekleri yapmak için harcanır. Sorun şu ki, tarayıcılar, http sürümüne ve tarayıcının kendisine bağlı olarak, aynı anda yalnızca iki veya dört akışta indirebilir. Deneyimlerimiz, http isteklerinin sayısını azaltmanın, yanıt süresini azaltmada en büyük etkiye sahip olduğunu ve genellikle performansı iyileştirmenin en kolay yolu olduğunu göstermektedir.

Sayfadaki her resim, ister bir img etiketinde isterse CSS dosyanızdaki bir arka plan resminde olsun, sunucuya yapılan ayrı bir http isteğidir.

Harika! Peki nasıl yaparsın?

Bir örnekle başlayalım. Sağlanan CSS'de her öğe kendi görüntüsünü kullanır:

#nav li a (arka plan: yok-tekrarsız sol orta) #nav li a.item1 (background-image:url("image1.gif")) #nav li a:hover.item1 (background-image:url(" image1_over.gif")) #nav li a.item2 (background-image:url("image2.gif")) #nav li a:hover.item2 (background-image:url("image2_over.gif")) .. .

CSS hareketli grafiği tekniğini kullanarak örneğimizi gerçekten aydınlatabiliriz. 10 farklı resim yerine, ihtiyacımız olan tüm resimleri içeren büyük bir resim yapabiliriz. Şimdi CSS'imiz şöyle görünecek:

#nav li a (background-image:url("image_nav.gif")) #nav li a.item1 (background-position:0px 0px) #nav li a:hover.item1 (background-position:0px -72px) # nav li a.item2 (arka plan konumu:0px -143px;) #nav li a:hover.item2 (arka plan konumu:0px -215px;) ...

Böylece sunucuya gelen istek sayısını 9, indirilen bilgi miktarını ise yaklaşık 8 KB azalttık. Ama bu küçük bir örnek, gerçek bir sitede neler olacağını hayal edin.

Fazladan yapacak çok işim var gibi görünüyor.

Chuck Norris'in bir keresinde dediği gibi, "Bütün harika şeyler büyük özveri gerektirir." Tabii ki, bu sözler ona ait mi emin değilim, ama yine de iyi bir tavsiye :) Ama neyse ki, sprite'ları fazla çaba harcamadan uygulamaya yardımcı olan birçok web servisi var. Bir tanesine odaklanacağım - bu SpriteMe .

SpriteMe

SpriteMe bir yer imidir. Yer imleri çubuğunuza yerleştirdikten sonra sitenize gidin ve üzerine tıklayın. Sitenizin sağ tarafında bir pencere açılacaktır.

En üstte, sitenin mevcut sayfasının tüm arka plan resimlerinin bir listesini göreceksiniz. Aşağıda, nedenleriyle birlikte muhtemelen sprite olarak kullanılamayan resimlerin bir listesi bulunmaktadır. Aksini düşünüyorsanız, bağlantıları bir listeden diğerine sürükleyebilirsiniz. Üstteki listeden gerekli görselleri topladıktan sonra butona tıklamanız yeterli. "Sprite Yap". Her şey! Resimleriniz bir arada toplanır ve hemen görebilirsiniz

Sitenin mevcut sürümü için bu resim şöyle görünebilir:

Son olarak, SpriteMe ayrıca CSS'yi dışa aktarmanıza da izin verir. İlgili düğmeye tıklayın (CSS'yi dışa aktarın) ve gerekli kodu göreceksiniz. Örneğin:

Link2article ( arka plan resmi: url(/Content/images/Theme/more.png); arka plan resmi: url(http://www.jaredhirsch.com/coolrunnings/public_images/6a02f43daf/spriteme1.png); arka plan konumu : -10px -156px; ) .articlefooter (arka plan resmi: url(/Content/images/Theme/comments_bg.png); arka plan resmi: url(http://www.jaredhirsch.com/coolrunnings/public_images/6a02f43daf/ spriteme1.png); arka plan konumu: 490px -265px; )

Çapraz çizgiler CSS'nizden gelen çizgilerdir, aşağıdakiler önerilenlerdir.

Ne sprite olamaz?

Bir hareketli grafiğin tekrar eden bir arka planı olamaz. Spritelar basit blok elemanları için kullanılır. Örneğin simgeler, spritelar için başlıca adaylardır.

Yaklaşık bir hafta önce, abonelerimden biri benden bahsetmemi istedi. CSS hareketli grafikleri genel olarak ne olduğu ve ne ile yedikleri. Bu nedenle, bugün size anlatacağım bu makaleyi yazmaya karar verdim, CSS spriteları nedir ve nerede kullanılırlar?.

css hareketli grafiği- bu, birçok farklı resim içeren ve özelliği kullanan birleşik bir resimdir. arka plan konumu doğru resmi doğru yere koyarız. Diyelim ki bir düğmemiz var ve fare imleci ile üzerine geldiğinizde bu düğmenin görünümü değişiyor. Örneğin şunları yapabilirsiniz, 2 resimleri ve ardından düğmenin arka planı olarak bir veya başka bir resmi değiştirin. Ancak bu yöntemin dezavantajı açıktır: 2 kat daha fazla dosya, yaklaşık 2 kat boyutu, bu nedenle, 2 kat daha uzun yükleme süresi 1 görüntü. Ve bu yüzden CSS hareketli grafik tekniği hemen oluşturacak tek bir resim oluşturmanıza olanak tanır. 2 düğme arka planı.

Daha açık hale getirmek için, bu sorunu çözelim. Bir imajımız var diyelim, boy 20 piksel ve genişlik 100 piksel. Düğmenin bir genişliği vardır 50 piksel ve yükseklik 20 piksel. Bir resimde, her iki durumun resimlerini (birbiri ardına) yerleştiririz. HTML Koduşöyle olacak:

Buton

Ve CSS kodu:

A(
arka plan: url("button.jpg") tekrarsız sol üst; // Düğme arka planı
Ekran bloğu; // Bunu bir blok elemanı yap
yükseklik: 20 piksel; // Düğme Yüksekliği
genişlik: 50 piksel // Düğme Genişliği
metin-dekorasyon: yok; // Alt çizgiyi kaldır
}
a: üzerine gelin (
arka plan konumu: sağ üst; // Resmi kaydırmak için arka plan konumunu değiştirin
}

Böyle kurnaz bir şekilde, birçok görüntüyü tek bir resimde saklayabilirsiniz. Bunun sadece bir görüntü dizisi olmadığını vurguluyorum. 2 . Bazen neredeyse tüm site, kullanılan tüm resimleri içeren tek bir resimden oluşur. Bunun çok iyi olduğunu düşünmüyorum, ancak minimum sayıda resim dosyası ve minimum sayfa yükleme boyutu olacak ki bu her zaman iyidir.

beğenildi:
27

Sevilmeyen: 4

Mevcut çeviri yok.

sprite

önceki veya sonrasında"önceki""sonrasında""sonrasında"

kızgın kuş kızgın.png. index.html

Mevcut çeviri yok.

CSS hareketli grafikleri, Web siteniz için tek bir grafik dosyasında birleştirilmiş grafiklerdir. "Neden bir dosya?" - sen sor. Gerçek şu ki, görüntüleri depolamaya yönelik bu yaklaşım, web sayfalarının performansını artırmanıza ve grafik görüntüleri daha düzenli bir şekilde depolamanıza olanak tanır. Şimdi sprite kullanmak için en iyi uygulamalardan bazılarına göz atalım. Sprite adı size oyun spritelarını, retro oyun konsollarını ve hatta günümüzde çok popüler olan tarayıcı oyunlarını hatırlatabilir:

Yani, web tasarımına uygulanabilir, sprite- siteniz için birkaç resim içeren tek bir büyük dosyadır ve dosyayı ağ üzerinden indirirken ve aktarırken zamandan tasarruf sağlar. Bir hareketli grafik, örneğin 20-30 görüntü içerdiğinde, bu sunucu üzerindeki yükü önemli ölçüde azaltabilir, çünkü bu görüntüler ayrı olarak depolansaydı, sunucunun bu tür her bir görüntüyü elde etmek için sırasıyla 20-30 ayrı istek yapması gerekirdi. . Sprite sayesinde, sunucuya yalnızca bir HTTP isteği gider - tek bir görüntü elde etmek için. Ana görevi yalnızca tasarımınızın farklı "parçalarını" bir araya toplamak olduğundan, hareketli grafik göze görsel olarak "okunabilir" görünmeyebilir. Örneğin, bir hareketli grafik şöyle görünebilir:

Sprite'lar çoğu modern site tarafından kullanılır ve iyi bilinen VKontakte bir istisna değildir. Örneğin, arayüzün "parçalarını" tek bir dosyada bu şekilde saklar - yani herkese tanıdık simgeler:

CSS hareketli grafiklerini kullanmanın temel noktası, sunucuya çok sayıda tekil resim değil, tüm resimlerinizi içeren tek bir grafik dosyası göndermeniz gerektiğidir - ve CSS aracılığıyla bu grafik dosyasındaki herhangi bir küçük parçayı bir öğenin arka planı olarak görüntüleyebilirsiniz. Bazı insanlar tek tek görüntülerin daha hızlı yüklendiğini düşünüyor, ancak bu öyle değil. Çok sayıda resim içeren bir grafik dosyası yüklerken sunucuya yalnızca bir istek göndeririz ve çok sayıda resim yüklerken sunucuya daha fazla istek göndeririz. Görüntüleri tek bir dosyada birleştirmek, yalnızca HTTP isteklerinin sayısını önemli ölçüde azaltmakla kalmaz, aynı zamandave genel görüntü dosyası boyutunu küçültün.

Size başka bir sprite örneği vereyim. Tasarıma adanmış tanınmış bir batılı site, grafik öğelerini şu şekilde depolar:

Bir sprite hazırlamak için en iyi zaman ne zaman diye sorabilirsiniz. Bunun için iki farklı yaklaşım var.

Farklı yaklaşımlar - bir site oluşturmadan önce ve sonra bir hareketli grafik oluşturma

Bir hareketli grafik sayfası oluştururken iki yaygın yaklaşım vardır - bunu yapınönceki veya sonrasındasitenizi oluşturmak. Siteyi oluşturmadan önce tüm görüntüleri hareketli grafik sayfasına koyabilirsiniz. Yaklaşım dediğimiz şey bu"önceki". Ayrıca, tüm görüntüleri ayrı dosyalar olarak oluşturarak düzenlemeyi kolaylaştırabilirsiniz. Site oluşturulduktan ve tüm görüntüler hazır olduğunda, elle veya çeşitli araçlardan birini kullanarak hızlı ve kolay bir şekilde hareketli grafik sayfası oluşturabilirsiniz. Yaklaşım diyeceğimiz bu"sonrasında". Sprite sayfaları sizin için yeniyse veya Web tasarımında yeniyseniz, yaklaşım sizin için daha uygundur."sonrasında". Çoğu dağıtılan ve ücretsiz olarak sunulan, sprite oluşturmanıza yardımcı olacak birçok yardımcı program, hizmet ve program vardır.

Resimleri bir hareketli grafikte organize bir şekilde düzenleme

Photoshop'ta bir hareketli grafik oluştururken, tüm görüntüleri hemen organize bir şekilde ve sizin tarafınızdan seçilen belirli bir sıraya göre yerleştirmeniz önerilir, böylece daha sonra onlarla çalışmak kolay ve basit olur. Her hareketli görüntü için alanı her zaman en yakın 10 piksele yuvarlamaya çalışın veya hepsi aynı boyuttaysa etraflarında daha fazla boşluk bırakın. CSS stili yazmaya gelince, koordinat ölçümlerini yazmanız gerekmeyecek ve istenen görüntülerin koordinatlarıyla sayıları unutma olasılığınız daha az olacak. Farklı görüntülerin tek bir hareketli grafikte başarılı bir şekilde yerleştirilmesine bir örnek:

Teoriden pratiğe! Sprite Kullanarak Animasyonlu Angry Birds Bird Nasıl Oluşturulur

Böylece, Web tasarımında bir sprite kavramıyla tanıştık, ancak pratik olmadan teori bir hiçtir. Bu nedenle, şimdi sizinle ilk sprite'ımızı oluşturacağız ve bir HTML sayfasında basit bir animasyon yapmayı öğreneceğiz. Örneğimiz Angry Birds oyunundan bir karaktere dayanacak - bu komik bir kırmızı kuş. Öncelikle 4 aşamalı kuş animasyonu içeren .PNG formatında bir hareketli resim hazırlayalım:

Diskte bir yerde bir dizin oluşturalım kızgın kuş- orada örneğimizin dosyalarını yerleştireceğiz. Sprite'ı kuşlarla bu dizine kaydediyoruz ve dosyaya isim veriyoruz kızgın.png. Bir sonraki adım, aynı dizinde adla bir dosya oluşturmaktır. index.html- bu animasyonlu test sayfamız olacak. Ardından, bu dosyayı düzenleyicide açın ve aşağıdaki kodu oraya yerleştirin:

Az önce ne yaptığımızı biraz açıklayayım. İlk olarak, HTML belgemize bir kodlama verdik UTF-8, bu da bizim tutmamız gerektiği anlamına gelir index.html bu kodlamada. Ayrıca başka bir tane de ayarlayabilirsiniz, örneğin, pencereler-1251, görevimiz için gerekli değildir. Ardından, stil dosyasını belgeye bağladık stil.css(henüz kataloğumuzda yok) kızgın kuş, daha sonra oluşturacağız). Ayrıca harici bir komut dosyasına bir bağlantı kurduk ve jQuery kitaplığını bağladık - jQuery yardımıyla kuşumuzun resimlerini dinamik olarak değiştireceğiz ve hareketli grafikten "aşamalarını" değiştireceğiz. Ayrıca kuşun animasyonunu yapan kodu yerleştireceğimiz dahili bir JavaScript bloğu hazırladık. Ve son olarak, belgenin ana gövdesi, içinde bir DIV bloğu olan ve kimliği birdImage olarak ayarlanan ve varsayılan sınıf bird-sleeping olan tek bir köprü içerir. Bu, kuşumuzun sayfayı açarken "uyuyacağı" anlamına gelir - bu, gözleri kapalı olan hareketli grafiğin içindeki sol alt resme karşılık gelir. Şimdi hareketli grafiğimizi "kesme" zamanı, yani. ondan tek tek görüntüleri çıkarın.

SpriteCow.Com hizmetini kullanarak bir hareketli grafiği kesme

Bir hareketli grafiği "dilimleme" görevi oldukça zahmetlidir - hareketli grafikteki her bir görüntüyü tanımlayan koordinatlarda hata yapmamaya özen gösterilmesini gerektirir. Neyse ki günümüzde tasarımcı ve mizanpaj tasarımcısının bu sıkıntısını tamamen ortadan kaldıran servisler var. Dilimleme için http://spritecow.com adresini kullanıyorum ve tavsiye ediyorum. Hizmetin özü basit ve çok kullanışlıdır - her kuş görüntüsünü fare ile seçiyoruz ve SpriteCow bize koordinatları olan hazır bir CSS kodu veriyor. Tek yapmamız gereken kuşun her aşaması için 4 stil belirlemek! Siteye girdikten sonra 2 düğme görüyoruz - "Resmi Aç" ve "Örneği Göster". İlk düğmeye ihtiyacımız var, üzerine tıklayın:

Açılan iletişim kutusunda sprite dosyamızı seçin kızgın.png, bundan sonra sprite'ımızın siteye nasıl yüklendiğini görüyoruz. Ardından, arka plan rengini tanımlamamız gerekiyor, bunun için "Arka Plan Seç" araç çubuğuna tıklıyoruz ve hareketli grafiğimizin beyaz alanını işaret ediyoruz - bu, kuşun her aşamasını doğru bir şekilde kesecektir:

İlk resmi seçin ve bunun için otomatik olarak CSS kodunu alın:

Şimdi kataloğumuzda yaratma zamanı kızgın kuş stil dosyası stil.css. Buraya 4 adet üretilmiş CSS kodunu art arda ekliyoruz ama SpriteCow'un bize sunduğu standart .sprite sınıfı yerine stillerimize daha anlaşılır diyelim. Ayrıca, hareketli görüntü doğrudan dizinin kökünde depolandığından, gereksiz yol öğesini arka plan özelliğinden kaldıracağız - resimler/. Ben şöyle anladım:

/* "normal" kuş. Sprite'da sol üstteki resim */ .bird-normal ( background: url("angry.png") tekrarsız -12px -16px; genişlik: 97px; yükseklik: 94px; ) /* "Mutlu" kuş. Sprite'da sağ üstteki resim */ .bird-happy ( arka plan: url("angry.png") tekrarsız -118px -17px; genişlik: 97px; yükseklik: 94px; ) /* "Uyuyan" kuş. Sprite'da sol alt resim */ .bird-sleeping ( arka plan: url("angry.png") tekrarsız -12px -120px; genişlik: 97px; yükseklik: 94px; ) /* "Kızgın" kuş. Sprite'da sağ alt resim */ .bird-angry ( arka plan: url("angry.png") tekrarsız -118px -120px; genişlik: 97px; yükseklik: 94px; )

Son adım ise animasyonu oluşturan jQuery kodunu yazmaktır.

Artık hareketli grafiği başarıyla dilimledik ve dosyamıza her görüntü için 4 stil yerleştirdik. stil.css, sadece hyperlinkimizin üzerine gelindiğinde ve linke tıklandığında animasyon ekleyecek jQuery kodunu yazmamız gerekiyor. Hatırladığımız gibi, varsayılan olarak kuş-uyuyan sınıf setimiz var, yani. kırmızı kuşumuz bir belge açarken "uyuyacak" :)

Tüm animasyonlar 3 jQuery yöntemine dayalı olacaktır:

• vurgulu - bağlantının üzerine gelmek ve imleci bağlantıdan "terk etmek" için işleyici. İmleci hareket ettirdiğimizde kuş "uyanacaktır" - yani. sınıf normal kuş olacak
• mousedown - bir bağlantı üzerinde farenin sol düğmesine tıklamak için işleyici. Bu durumda kuş "mutlu" olacak - yani. DIV bloğuna sınıf kuşu mutlu verilecek
• mouseup - sol fare düğmesini serbest bırakmak için işleyici. Serbest bırakıldığında kuş "kızgın" olur - yani. DIV bloğuna kuş kızgın sınıfı verilir

O halde aşağıdaki kodu sayfaya yerleştirdiğimiz iç JavaScript bloğunda hazırladığımız yere yapıştırın:

$(document).ready(function() ( // burada $("#birdImage").hover(function() ( $(this).removeClass("bird-sleeping"); $ (this).removeClass("kızgın kuş"); $(this).removeClass("kuş-mutlu"); $(this).addClass("kuş-normal"); ), function() ( $( this ).removeClass("kuş-normal"); $(this).removeClass("kızgın kuş"); $(bu).removeClass("kuş-mutlu"); $(this).addClass("kuş- uyuyor" "); )); $("#birdImage").mousedown(function() ( $(bu).removeClass("kuş-uyuyan"); $(bu).removeClass("kuş-normal"); $( this).removeClass("kızgın kuş"); $(this).addClass("kuş-mutlu"); )).mouseup(function() ( $(bu).removeClass("kuş-uyuyan") ; $ (this).removeClass("kuş-normal"); $(this).removeClass("kuş-mutlu"); $(this).addClass("kızgın kuş"); )); ));

Hazır! Test animasyonu

Tamam şimdi her şey bitti! Kuşumuz hazır ve animasyonu ile sayfaya hayat verdi! :) Demoyu inceleyebilirsiniz. Arşivi bir örnekle indirin - makalenin altında.

Spritelar oldukça ilginç ve basit bir teknolojidir. Şimdi size bundan biraz daha bahsedeceğim.

CSS spriteları nelerdir?

Kısacası, CSS sprite'ları bir dosyada birkaç görüntüdür. Sadece bir dosya var, ancak içinde birkaç resim var. Aynı zamanda, ziyaretçi için tamamen görünmezdir. Siteye bakan kişiye birkaç ayrı resim gördüğü anlaşılıyor.

Bu neden gerekli? Sprite'lar, kullanıcıdan gelen sayfa isteklerinin sayısını azaltır ve görüntülerin genel boyutunu küçültür. Sonuç olarak, ziyaretçi siteyi daha hızlı görecektir.

Nasıl yapılır? Normal bir resmin genişliği ve yüksekliği artar, yani birkaç resim normal bir resmin üzerine yan yana yerleştirilir. Ardından, bu kümedeki her bir görüntü, diğer tüm görüntülerin görünmemesi için belirli bir genişlik veya yükseklikte istenen bloğa eklenir. Bütün set kesilir ve sadece bir resim kalır. Bir sprite. Diğer tüm resimler belirli bloğun dışında kalır.

Daha açık hale getirmek için size bir benzetme vereyim. Bir anahtar deliğinden baktığınızı hayal edin. Kapının diğer tarafında odanın sadece ayrı bir parçasını görüyorsunuz. Biraz yana doğru hareket edip skazinaya farklı bir açıdan bakarsanız, aynı odanın başka bir parçasını göreceksiniz.

terminoloji

Kafanız karışmaması için hemen terimleri belirtelim:
Sprite- bu, birkaç resim içeren bir dosyadan bir resim.
Sprite seti birden fazla görüntü içeren dosyanın kendisidir.

Sprite kullanmanın özellikleri

Sprite'ları ne zaman kullanmalısınız? Cevap genellikle aynıdır - sayfada çok sayıda küçük resim varsa sprite kullanılmalıdır. Ne tür görüntüler oldukları önemli değil. Aynı düzende çok sayıda degradeniz varsa, çok sayıda düğme, çok sayıda simge vb. Belirli bir sayfada çok sayıda küçük resim varsa, sprite kullanmayı düşünebilirsiniz.

Sayfada kural olarak üç tür resim vardır - jpg, png ve gif. Tüm bu biçimlerin iki indirme modu vardır - normal mod ve kademeli indirme modu.

jpg formatı normal (temel) ve aşamalı (aşamalı) olabilir. Normal modda, resim yüklendikçe satır satır ve hemen iyi kalitede görüntülenmeye başlar. Aşamalı modda, jpg görüntüsünün tamamı bir kerede yüklenir, ancak düşük kalitede ve yüklendikçe kalite artar.

GIF ve png aynı davranışa sahiptir. GIF normal veya geçmeli olabilir. PNG normal veya geçmeli olabilir. Geçmeli gif ve png'nin davranışı, aşamalı jpg'nin davranışına benzer. Bu davranış, dosya boyutunu biraz artırır.

Toplam. Resim sayfada hemen görünebilir veya gecikmeli olarak görünebilir. Spritelarla ilgili olarak, bunu bilmek önemlidir. Sprite'lar tercihen geçmeli veya aşamalı olmalıdır. Kullanıcı, resimleri düşük kalitede de olsa en kısa sürede görmelidir.

Fakat! Tüm sprite'ları içeren son dosya çok büyükse, tüm ilerleme ve geçişlere rağmen, ziyaretçinin dosyanın kısmen indirilmesini bile beklemesi gerekecektir. Bu nedenle, büyük sprite setleri kullanmanızı önermiyorum. Dosya büyükse, siteyi hızlandırmak için tüm sprite noktası tamamen kaybolur. Büyük hareketli grafik setleri ile, kullanıcının normal ayrı görüntülerden daha fazla olmasa da daha fazla beklemesi gerekecektir.

Büyük dosyalar bana 30 kilobayttan fazla görünüyor. Subjektif. Dosyanın boyutu hakkında kendi fikirleriniz olabilir. 30 kilobaytlık bir dosya, 56,6 kbps internet hızında yaklaşık 7 saniyede indirilecektir.

Sprite Kullanım Örnekleri

Simgeler ile Sprite

Bir sprite'da aşağıdakiler için simgelere sahip olacağım:

1. Liste kutusu - tek simge
2. Bağlantılar - üç simge
3. Arama Formları - Tek Simge

Yani, sahip olduğum ilk sprite seti beş resim içerecek. Tüm resimler aynı boyutta olacaktır - 16 x 16 piksel. Spritelar farklı çözünürlüklerde resimler yapabilir, tüm resimlerin çözünürlüğünün aynı olması gerekli değildir. Farklı çözünürlükteki resimlerle bu resimleri tek bir dosyada birleştirmek biraz daha zorlaşıyor.

Sonuç olarak, ilk örnek şöyle görünecektir:

Beş simge buldum. Sonra hepsini tek bir dosyada birleştirdim. Sonunda bulduğum dosya bu:

Dikkatinizi çekmek. Bu durumda, simgeler yakın yerleştirilmez, aralarında küçük girintiler vardır. Bu girintiler nasıl seçilir? Tabii ki, her şeyi piksel olarak hesaplayabilirsiniz, ancak durumumuz oldukça basittir, bu yüzden burada resimdeki bu girintileri deneysel olarak seçmek en iyisidir. Önce görselleri sadece gözle birleştiriyoruz sonra en üstteki görseli alıp doğru yere koyuyoruz. Resim yerindeyse, ancak aynı zamanda başka bir görüntünün bir parçası bir yerden çıkıyorsa, girintinin arttırılması gerekir.

Bir an daha. Listedeki son simge, listenin simgesidir - yeşil ok. Neden o sonuncusu? Resimdeki simgelerin geri kalanının konumu umurumuzda değil, ancak listedeki herhangi bir öğe birkaç satır kaplayabilir ve yeşil ok ortada bir yerdeyse, diğer resimler sonraki satırlara yapışacaktır. . Neden bahsettiğimi görmek için yukarıdaki liste resmine bakın.

Yani. Beş simge buldum, onları tek bir dosyada birleştirdim. Sonra ne yapıyoruz? Elbette kodu yazıyoruz:

• Liste öğesi
• Listedeki başka bir öğe
• Liste öğesi
• Listedeki başka bir öğe
  ama iki satırda
• Liste öğesi
• Listedeki başka bir öğe

Bu, listenin html kodudur. Şimdi sprite'ımızı buna uygulayın:

Ul li( dolgu:0 0 0 21px; arkaplan:url("sprites.png") 0 -94px tekrarsız; )

Burada ne yaptık? Her birinde bir girinti yaptı