• Aktar
• Öğretici

CSS3 sayesinde, JavaScript kullanmadan animasyon efektleri oluşturabiliyoruz, bu da birçok geliştiricinin işini kolaylaştıracaktır.
CSS3'ü aşırı kullanmamalıyız çünkü eski tarayıcılar tüm özelliklerini desteklemiyor. Her neyse, hepimiz CSS3'ün potansiyelini görüyoruz ve bu makalede sadece CSS3 animasyonunu kullanarak döngülü bir görüntü kaydırıcısının nasıl oluşturulacağını tartışacağız.

Makale bölümleri

Süreci baştan sona anlamak için makalenin içeriği aşağıda verilmiştir. Lütfen bu efektin yalnızca kullanılan CSS3 özelliklerini destekleyen modern tarayıcılarda beklendiği gibi çalışacağını unutmayın.

1. Giriş
   CSS3 geçişleri ve anahtar kare animasyonu ile ilgili temel kavramları açıklar.
2. HTML işaretlemesi
   Görüntü kaydırıcısı için HTML işaretlemesi oluşturun.
3. CSS Stilleri
   Kaydırıcıyı görüntülemek için bir stil sayfası oluşturun.
4. CSS3 Anahtar Kare Animasyonu
   Kaydırıcıya animasyon ekleniyor. Burada yer alan çeşitli süreçlere bakacağız.
5. 
   Kaydırıcımız için bir ilerleme çubuğu ekleniyor.
6. 
   Başlıkları görüntülemek için bir ipucu ekleme.
7. CSS3 geçişleri
   CSS3 geçişlerini kullanarak fareyle üzerine gelindiğinde araç ipuçlarını görüntüleme
8. Duraklat ve yeniden başlat
9. Gösteri
   Kaydırıcıyı çalışırken gösterme.
10. Sonuç
    Son düşünceler.

1. Giriş

Bu öğreticiyi kullanmak için, CSS3 geçişleri ve ana kare animasyonları başta olmak üzere temel bir CSS anlayışına sahip olmanız gerekir.
Bu basit kavramlarla, işlevsel bir görüntü kaydırıcısının nasıl yapılacağını göreceğiz.

CSS3 geçişlerinin temel kavramları

Genellikle, bir CSS değerini değiştirdiğinizde, değişiklikler statik olarak görüntülenir. Artık geçiş özelliği sayesinde bir durumdan diğerine kolayca değişiklik yapabiliyoruz.

Dört geçiş özelliğini kullanabiliriz:

Geçiş özelliği
Geçişlerin uygulanması gereken CSS özelliklerinin adlarını belirtir.

Geçiş süresi
Geçişin gerçekleşmesi gereken zamanı belirler.

Geçiş zamanlama işlevi
Ara geçiş değerlerinin nasıl hesaplanacağını belirler.

Geçiş gecikmesi
Geçişin ne zaman başlayacağını belirler.

Şu anda CSS3 geçişleri Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ ve IE 10'da desteklenmektedir. Teknoloji hala nispeten yeni olduğu için, tarayıcı önekleri gerekli... Sözdizimi, gerekli öneklerin eklenmesi dışında tüm tarayıcılar için aynıdır. Bunları bu makalede göz ardı edeceğiz, ancak koda ön ekleri eklemeyi unutmayın.

Bir bağlantıya nasıl basit bir gezinme uygulanacağını görelim:
a (renk: # 000; geçiş özelliği: renk; geçiş süresi: 0.7s; geçiş zamanlaması işlevi: kolaylık; geçiş gecikmesi: 0.3s;) a: vurgulu (renk: #fff;)

Bir öğeye animasyon atarken, steno biçimi de kullanabilirsiniz:
a (renk: # 000; geçiş: renkli 0,7 sn hareket hızı 0,3 sn;) a: vurgulu (renk: #fff;)

CSS3 animasyonunun temel kavramları

CSS animasyonu, bir dizi anahtar kare kullanarak JavaScript olmadan animasyonlar oluşturmamızı sağlar.
CSS geçişlerinin aksine, ana kare animasyonu şu anda yalnızca WebKit tarayıcılarında, Firefox'ta ve yakında IE 10'da desteklenmektedir. Desteklenmeyen tarayıcılar, animasyon kodunu basitçe yok sayacaktır.

Animasyon özelliğinin sekiz alt özelliği vardır:

Animasyon gecikmesi
Animasyonun ne zaman başlayacağını belirler.

Animasyon yönü
Animasyonun değişen döngülerde geriye doğru oynatılıp oynatılmayacağını belirler.

Animasyon süresi
Animasyonun bir döngüyü tamamlaması için gereken süreyi belirler.

Animasyon yineleme sayısı
Durdurmadan önce animasyon döngülerinin sayısını belirler.

Animasyon-adı
@Keyframes içindeki kuralın adını tanımlar.

Animasyon oynatma durumu
Animasyonun oynatılacağını veya duraklatılacağını belirler.

Animasyon doldurma modu
Bir CSS animasyonunun, yürütmeden önce ve sonra hedefine stilleri nasıl uygulaması gerektiğini belirler.

Bir bloğa nasıl basit bir animasyon uygulanacağını görelim:
/ * Animasyon uyguladığımız öğe. * / div (animasyon adı: taşıma; animasyon süresi: 1s; animasyon zamanlama işlevi: kolay giriş; animasyon gecikmesi: 0.5s; animasyon yineleme sayısı: 2; animasyon yönü: alternatif; - moz-animasyon-adı: taşıma; -moz-animasyon-süresi: 1s; -moz-animasyon-zamanlama işlevi: kolay giriş; -moz-animasyon gecikmesi: 0.5s; -moz-animasyon-yineleme-sayısı : 2; -moz-animasyon-yönü: alternatif; -webkit-animasyon-adı: taşı; -webkit-animasyon-süresi: 1s; -webkit-animasyon-zamanlama fonksiyonu: kolay giriş; -webkit-animasyon- gecikme: 0.5s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternate;) / * Animasyonun kendisinin kodu. * / @keyframes ((transform: translateX (0);) 'den (transform: translateX (100px);)' e taşınır ((-moz-transform: translateX (0);) 'den (- moz-transform: translateX (100px);)) @ -webkit-keyframes ((-webkit-transform: translateX (0);) 'den (-webkit-transform: translateX (100px);)' e taşınır

Animasyonun tüm özelliklerini aynı anda ayarlamak için steno kullanabiliriz:
div (animasyon: hareket 1s kolay giriş 0.5s 2 alternatif; -moz-animasyon: hareket 1s kolay içeri-dışarı 0.5s 2 alternatif; -webkit-animasyon: hareket 1s hareket kolaylığı 0.5s 2 alternatif; )

Anahtar çerçeveler

Her ana kare, animasyonlu bir öğenin belirli bir animasyon zaman noktasında nasıl davranması gerektiğini açıklar. Anahtar kareler süreyi belirlemek için yüzdeler alır:% 0 animasyonun başlangıcı,% 100 sondur. İsteğe bağlı olarak animasyonlar için ara çerçeveler ekleyebilirsiniz.

/ *% 0'dan% 100'e animasyon * / @keyframes hareket ediyor (% 0 (transform: translateX (0);)% 100 (transform: translateX (100px);)) / * Ara çerçeveli animasyon * / @keyframes hareket ediyor ( % 0 (dönüşüm: translateX (0);)% 50 (dönüşüm: translateX (20px);)% 100 (dönüşüm: translateX (100px);))

W3C, "CSS3 Animasyonu" hakkında birçok yararlı ve ayrıntılı bilgiye sahiptir.

Kaydırıcımızın temel yapısı

Artık geçişlerin ve animasyonların nasıl çalıştığını bildiğimize göre, kaydırıcımızı yalnızca CSS3 kullanarak nasıl oluşturacağımızı görelim. Bu taslak, animasyonun nasıl çalışması gerektiğini gösterir:

Gördüğünüz gibi, kaydırıcı, görüntülerin görüntüleneceği kap olacaktır.
Animasyon çok basittir: görüntü belirli bir yönü izleyerek "üst", "z-endeksi" ve "opaklık" özelliklerini değiştirir.
Kaydırıcıyı oluşturmak için doğrudan HTML biçimlendirmesine gidelim.

2. HTML işaretlemesi

HTML biçimlendirmesi çok basittir. Açıkça organize edilmiş ve SEO dostudur. Önce kodun tamamına bir göz atalım ve ardından her şeyin nasıl çalıştığını ayrıntılı olarak çözelim.

Div kimliği \u003d "kaydırıcı"
Bu, ana kaydırıcı konteynırdır. Belirli bir işlevi yoktur, ancak animasyonu duraklatmak için ona ihtiyacımız var.

Div kimliği \u003d "maske"
Kaydırıcının dışında olan her şeyi gizlemek için bu bloğu kullanacağız. Buna ek olarak maske, kaydırıcının içeriğini görüntülememize izin verir.

Li id \u003d "birinci" sınıf \u003d "firstanimation"
Her liste öğesinin bir kimliği ve bir sınıfı vardır. Kimlik bir ipucu görüntüler ve sınıf gerçekleşmek üzere olan animasyona bağlıdır.

Div sınıfı \u003d "araç ipucu"
Bu blok, görüntünün başlığını gösterir. İhtiyaçlarınıza göre değiştirebilirsiniz, örneğin tıklanabilir hale getirebilir veya kısa bir açıklama ekleyebilirsiniz.

Div sınıfı \u003d "ilerleme çubuğu"
Bu blok, animasyonun ilerlemesini gösteren bir işlev içerir.

Şimdi CSS dosyasını oluşturma zamanı.

3. CSS stilleri

Temel bir kaydırıcı yapısı oluşturalım. Görüntü ile aynı boyutta olacaktır. Border özelliği, görüntünün etrafında bir sınır oluşturmak için kullanışlıdır.

/ * Slider yapısı * / #slider (background: # 000; border: 5px solid #eaeaea; box-shadow: 1px 1px 5px rgba (0,0,0,0.7); yükseklik: 320px; genişlik: 680px; kenar boşluğu: 40px otomatik 0; taşma: görünür; konum: göreceli;)

"Mask" sınıfı, kaydırıcının dışındaki tüm öğeleri gizleyecektir. Yüksekliği, kaydırıcının yüksekliğine eşit olmalıdır.

/ * Kaydırıcının dışındaki her şeyi gizle * / #mask (overflow: hidden; height: 320px;)

Son olarak, görüntülerin listesini sıralamak için, tüm görüntülerin kaydırıcının dışında konumlandırılması için "konum: mutlak" ve "üst: -325px" kullanacağız.

/ * Görüntü listesi * / #slider ul (kenar boşluğu: 0; dolgu: 0; konum: göreli;) #slider li (genişlik: 680 piksel; / * Görüntü genişliği * / yükseklik: 320 piksel; / * Görüntü yüksekliği * / konum: mutlak ; top: -325px; / * Başlangıç \u200b\u200bkonumu (kaydırıcının dışında) * / list-style: yok;)

Bu birkaç satır kodla, kaydırıcı işaretlemesini yaptık. Şimdi sadece animasyon eklememiz gerekiyor.

4. CSS3 Anahtar Kare Animasyonu

Animasyona başlamadan önce, animasyonun doğru temsilini elde etmek için bazı parametreler tanımlamamız gerekir.
Bildiğimiz gibi toplam animasyon süresi 25 saniyedir, ancak 1 saniyede kaç tane anahtar kare olacağını bilmemiz gerekiyor.
Bize tam anahtar kare sayısını ve animasyonun toplam süresini verecek bir dizi işlemi çözelim. İşte hesaplamalar:
Kaydırıcıdaki toplam görüntü sayısını belirleyin: 5 ;
Her görüntü için animasyon süresini belirleyin: 5 saniye;
Toplam görüntü sayısını her birinin süresiyle çarparak toplam animasyon süresini belirleyin: 5 görüntü × 5 saniye \u003d 25 saniye;
Bir saniyede kaç anahtar kare (yüzde) olacağını hesaplıyoruz.
Toplam ana kare sayısını tam animasyon süresine bölün: 100%/25 = 4% ,
Bir saniyede 4 ana kare vardır veya 1 saniye animasyonun% 4'üne eşittir.

Tüm bu matematikle, artık CSS animasyonlarını kaydırıcıya uygulayabiliriz. Animasyonu sonsuz bir döngüye koyabiliriz çünkü Diğer görüntülerden bağımsız olarak her görüntü için ayrı bir animasyon ayarlanacaktır.

#slider li.firstanimation (animasyon: döngü 25s doğrusal sonsuz;) #slider li.secondanimation (animasyon: cycletwo 25s doğrusal sonsuz;) #slider li.thirdanimation (animasyon: cyclethree 25s linear infinite;) #slider li.fourthanimation (animasyon: cyclefour 25s doğrusal sonsuz;) #slider li. fifthanimation (animasyon: cyclefive 25s lineer sonsuz;)

Animasyon özellikleri atandıktan sonra, animasyonu harekete geçirmek için anahtar kareler kullanmalıyız.
Bu prensibi takip ederek tüm animasyonları birbirinden bağımsız olsalar bile birbirine bağlayabiliriz. Bu bize sonsuz bir döngü verecektir.
Bir görüntüden diğerine geçişi daha çekici hale getirmek için "opaklık" ve "z-endeksi" özelliklerini ekledim.
Kodda görebileceğiniz gibi, ilk animasyon diğerlerinden daha fazla anahtar kareye sahiptir. Bunun nedeni, kaydırıcı çalışırken, birinci görüntünün ikinciye yer açmasıdır, ancak son görüntü animasyonunu bitirdiğinde, animasyon döngüleri arasında kesinti olmaması için ilk görüntünün ek anahtar karelere sahip olması gerekir.

İşte animasyonlar için tüm kod:
/ * Animasyon * / @keyframes döngüsü (% 0 (üst: 0px;) / * Kaydırıcı başladığında, ilk görüntü zaten görünür * /% 4 (üst: 0px;) / * Başlangıç \u200b\u200bkonumu * /% 16 (üst: 0px; opaklık: 1; z-endeksi: 0;) / *% 4 ile% 16 (3 saniye) arasında görüntü görünür * /% 20 (üst: 325 piksel; opaklık: 0; z-endeksi: 0;) / *% 16'dan % 20'ye kadar (1 saniye) görüntü çıkışı * /% 21 (üst: -325 piksel; opaklık: 0; z-endeksi: -1;) / * Maske dışındaki orijinal konuma geri dön * /% 92 (üst: -325 piksel; opaklık: 0; z-endeksi: 0;)% 96 (üst: -325px; opaklık: 0;) / *% 96 ila% 100 (1 saniye) - giriş * /% 100 (üst: 0px; opaklık: 1 ;)) @keyframes cycletwo (% 0 (üst: -325px; opaklık: 0;) / * Maske dışındaki başlangıç \u200b\u200bkonumu * /% 16 (üst: -325px; opaklık: 0;) / * Harekete% 16'da başlama * /% 20 (üst: 0px; opaklık: 1;)% 24 (üst: 0px; opaklık: 1;) / *% 20'den% 24'e (1 saniye içinde) - girdi * /% 36 (üst: 0px; opaklık: 1; z-endeksi: 0;) / *% 24'ten% 36'ya (3 saniye) görüntü görünür * /% 40 (üst: 325 piksel; opaklık: 0; z-endeksi: 0;) / * % 36'dan% 40'a (1 saniye) - çıkış * /% 41 (üst: -325 piksel; opaklık: 0; z-endeksi: -1; ) / * Orijinal konuma dön * /% 100 (üst: -325px; opaklık: 0; z-endeksi: -1;)) @keyframes döngüsü üç (% 0 (üst: -325px; opaklık: 0;)% 36 ( üst: -325px; opaklık: 0;)% 40 (üst: 0px; opaklık: 1;)% 44 (üst: 0px; opaklık: 1;)% 56 (üst: 0px; opaklık: 1;)% 60 (üst) : 325px; opaklık: 0; z-endeksi: 0;)% 61 (üst: -325px; opaklık: 0; z-endeksi: -1;)% 100 (üst: -325px; opaklık: 0; z-endeksi: -1;)) @keyframes cyclefour (% 0 (üst: -325px; opaklık: 0;)% 56 (üst: -325px; opaklık: 0;)% 60 (üst: 0px; opaklık: 1;)% 64 ( üst: 0px; opaklık: 1;)% 76 (üst: 0px; opaklık: 1; z-endeksi: 0;)% 80 (üst: 325px; opaklık: 0; z-endeksi: 0;)% 81 (üst: -325px; opaklık: 0; z-endeksi: -1;)% 100 (üst: -325px; opaklık: 0; z-endeksi: -1;)) @keyframes cyclefive (% 0 (üst: -325px; opaklık: 0;)% 76 (üst: -325px; opaklık: 0;)% 80 (üst: 0px; opaklık: 1;)% 84 (üst: 0px; opaklık: 1;)% 96 (üst: 0px; opaklık: 1 ; z-endeksi: 0;)% 100 (üst: 325 piksel; opaklık: 0; z-endeksi: 0;))

Oluşturulan animasyonla, her animasyonun süresini görüntülemek için bir ilerleme çubuğu eklemeliyiz.

İlerleme çubuğu animasyonu, kaydırıcıyla aynıdır. İlerleme çubuğunun kendisini oluşturun:

/ * İlerleme çubuğu * / .progress-bar (konum: göreli; üst: -5px; genişlik: 680px; yükseklik: 5px; arka plan: # 000; animasyon: fullexpand 25s hafifletme sonsuz;)

Sözdiziminden korkmayın. "Gönderen" ile aynı işleve sahiptir. Ana karelerin her görüntünün görünümünü ve kaybolmasını ayarladığını görebilirsiniz.

/ * Animasyon durum çubuğu * / @keyframes fullexpand (/ * Bu anahtar karelerde animasyon sabittir * /% 0,% 20,% 40,% 60,% 80,% 100 (genişlik:% 0; opaklık: 0;) / * Bunlarda - canlanıyor * /% 4,% 24,% 44,% 64,% 84 (genişlik:% 0; opaklık: 0.3;) / * Bunlarda - * /% 16,% 36,% 56 doldurur, % 76,% 96 (genişlik:% 100; opaklık: 0,7;) / * Bu anahtar karelerde ilerleme çubuğu yolunu tamamladı * /% 17,% 37,% 57,% 77,% 97 (genişlik:% 100; opaklık : 0.3;) / * Bu ana karelerde ilerleme çubuğu kaybolacak ve ardından döngüye devam edecek * /% 18,% 38,% 58,% 78,% 98 (genişlik:% 100; opaklık: 0;))

Kaydırıcı aşağı yukarı tamamlanmıştır. Daha işlevsel hale getirmek için bazı detaylar ekleyelim. Fareyle üzerine gelindiğinde görülebilecek resim başlıkları için araç ipuçları ekleyeceğiz.

Araç ipuçları için stiller:
#slider .tooltip (arka plan: rgba (0,0,0,0.7); genişlik: 300px; yükseklik: 60px; konum: göreli; alt: 75px; sol: -320px;) #slider .tooltip h1 (renk: #fff ; yazı tipi boyutu: 24px; yazı tipi ağırlığı: 300; satır yüksekliği: 60px; dolgu: 0 0 0 10px;)

Burada sadece resim başlıklarını görünür yaptık, ancak aynısını herhangi bir metin, bağlantı veya istediğiniz her şey için yapabilirsiniz.

7. CSS3 Geçişleri

CSS3 geçişlerini elemanlara nasıl uygulayacağımızı gördük, şimdi bunları araç ipuçları için yapalım.
Hatırlarsanız, her listeye bir kimlik ekledik ("birinci", "ikinci", vb.), Böylece fareyle üzerine gelindiğinde her araç ipucu, tüm araç ipuçları aynı anda görünmeden ayrı bir resimle ilişkilendirilir.

#slider .tooltip (… geçiş: tümü 0.3s kolay giriş;) #slider li # ilk: fareyle üzerine gelin .tooltip, #slider li # saniye: fareyle üzerine gelin .tooltip, #slider li # üçüncü: fareyle üzerine gelme .tooltip, #slider li # dördüncü: hover .tooltip, #slider li # fiveth: hover .tooltip (sol: 0px;)

8. Duraklat ve yeniden başlat

Kullanıcıların içeriği görüntülemek üzere kaydırıcıyı durdurmasına izin vermek için, fareyle üzerine gelindiğinde animasyonu durdurmalıyız. Ayrıca ilerleme çubuğu animasyonunu da durdurmamız gerekecek.

#slider: hover li, #slider: hover .progress-bar (animasyon oynatma durumu: duraklatıldı;)

9. Gösteri

Son olarak, eğitimin sonuna ulaştık. Kaydırıcı artık% 100 tamamlandı!
(). Firefox 5+, Safari 4+ ve Google Chrome'un yanı sıra iPhone ve iPad'de çalışır. Arşivi de indirebilirsiniz ().
Resimleri için Massimo Righi'ye teşekkürler.

10. Sonuç

Etkisi etkileyici, ancak kuşkusuz bu kaydırıcı çok yönlü değil. Örneğin, daha fazla görüntü eklemek için tüm ana karelerin düzenlenmesi gerekir. CSS3'ün çok fazla potansiyeli vardır, ancak sınırları vardır ve bazen hedef kitleye bağlı olarak JavaScript tercih edilir.
Bu kaydırıcı, duraklatma (üzerine gelindiğinde) ve kullanıcıların kaydırıcıyla etkileşime girmesine olanak tanıyan benzersiz görüntü bağlantıları gibi bazı harika özelliklere sahiptir. Tüm tarayıcılar için tam destek gerekiyorsa, CSS3 kullanmak mümkün değildir, bu nedenle JavaScript önerilir. Ne yazık ki, CSS3 animasyonunun birçok sınırlaması vardır. Şu anda esneklik eksikliği nedeniyle yaygın kullanımımız yok. Umarım bu makale sizi CSS3 hakkında daha fazla bilgi edinmeye teşvik eder.
Düşüncelerinizi yorumlarda paylaşmaktan çekinmeyin.

Çevirmenden:
Herhangi bir çeviri hatası bulursanız, lütfen özel mesajlarınızdaki aboneliğinizi iptal edin. Teşekkürler.

Etiketler:

• CSS3
• slayt gösterisi

Etiket ekle

Bu derste, HTML5 teknolojisini kullanarak otomatik olarak slayt gösterileri oluşturmak için bir program ele alacağız.

Javascript, css ve html bilginiz kendi kendinize slayt gösterileri oluşturmanıza izin vermiyorsa bile, bu program kullanılarak yapılabilir. Hislider... Hislider.com linkinden indirebilirsiniz. Sitede hem ücretsiz hem de ücretli sürümler mevcuttur. Tüm eylemleri ücretsiz sürümde göstereceğim. Programı beğendiyseniz, ücretli sürümünü satın alabilirsiniz. Bir test slayt gösterisi oluşturdum. Bunu bağlantıda görebilirsiniz:

İndir

Hislider ile ilk slayt gösterinizi nasıl oluşturabilirsiniz?

Programı kurup çalıştırdığınızda, önünüzde bir slayt gösterisi oluşturmaya başlamanızın isteneceği bir program penceresi görünecektir. "Yeni Oluştur" düğmesini tıklayın:

Slayt gösterisinin istenen genişliğini ve yüksekliğini (yükseklik) belirtin:

O zaman resim eklemeniz gerekir. Bu, bağlantıdaki pencerenin ortasına veya düğme çubuğundaki düğmeye tıklayarak yapılabilir:

Görüntüler eklendikten sonra geçişli panel (Geçişler) aktif hale gelecektir. "Geçişler" sekmesine gidin:

Ve beğendiğiniz geçişleri ekleyin:

"Tamam" ı tıklayın ve slayt gösterisi düzenleyicisine girin. Gerekli değişiklikleri yapmak. Üstte üç düğme var:

Değişiklikleri görmek için değişiklikler yaptıktan sonra slayt gösterisini yenilemek için ilk "REFRESH" düğmesine ihtiyaç vardır.

Tarayıcıda slayt gösterisini önizlemek için ikinci düğme "PREVIEW" gereklidir.

Ve son düğme olan "YAYINLA" bir slayt gösterisi oluşturmak için kullanılır.

Oldukça ilginç bir program. Özellikle zamanınız veya beceriniz yoksa, bu program siteniz için tatlı bir şov geliştirmeye zaman kazandıracaktır. Veya bir menü oluşturabilir, ardından kodu istediğiniz gibi düzenleyebilirsiniz ve işte bu, slayt gösteriniz hazır.

1. jQuery "Elastic Slideshow" da harika slayt gösterisi

Küçük resimler ve slayt açıklamaları içeren slayt gösterisi. Görüntüleri değiştirmenin çeşitli etkileri. İki seçenek vardır: otomatik slayt değiştirme olan ve olmayan.

2. Saf CSS3 Kaydırıcısı

Açıklama ve otomatik slayt değişikliği ile güzel görüntü kaydırıcısı. Resmin üzerine geldiğinizde dönüş durur. Durağa bir CSS3 efekti eşlik ediyor.

3. jQuery PhotoFrame eklentisi

Güzel galeri kaydırıcısı.

4. Metin Efektleri "Tipografi Efektleri"

CSS3 ve jQuery kullanarak tipografi ile çalışmak için ilginç efektler. 7 farklı harika efekt.

5. "Darkbox" Eklentisi

Görüntüleri bir açılır pencere bloğunda görüntülemek için küçük ve hafif bir eklenti.

6. jQuery'de fareyle üzerine gelme efekti

Dairesel gezinme efekti.

7. Animasyonlu jQuery CSS3 düğmeleri

Web siteniz için harika düğmeler oluşturmak için birçok farklı CSS3 animasyonlu efekt. Sadece gerçekten harika vurgulu efektler.

8. HTML5 jQuery arka plan resimlerini değiştiriyor

Küçük resimlere tıkladığınızda, arka plan resimleri bir bulanıklaştırma efektiyle sırayla değişir. Tarayıcı penceresini yeniden boyutlandırmak, arka plan resmini yeniden boyutlandırır.

8. Etkileşimli Tipografi Etkileri

HTML5 ve jQuery kullanarak ilginç metin efektleri (4 farklı efekt). Efekti görmek için metnin üzerine gelin.

9. Açılır görüntü başlıkları

Açılır resim başlıklarını uygulamak için birçok farklı animasyonlu vurgulu efekt.

10. "Portamento" Eklentisi

JQuery'de kayan blok. Sayfayı aşağı kaydırırken her zaman görünümde kalır.

11. İçerik kaydırıcıları

sabit boyutlu bloklarda kaydırmayı görüntülemek için jQuery eklentisi. Birkaç stil.

jQuery, içeriğin yatay ve dikey kaydırılmasını sabit boyutlarda bir blokta uygular.

13. Eklenti "Küçük Kaydırma Çubuğu"

İçeriğin dikey ve yatay kaydırılması için jQuery eklentisi.

14. "jScrollPane" Eklentisi

Bir bloktaki içeriğin tarayıcılar arası kaydırılması.

15. Kayan blok "Scroll Follow"

Sonraki sayfa kaydırmada kayan bir blok oluşturmak için eklenti. Bağlantıya tıklayarak bloğu düzeltmek mümkündür.

16. SideBar açılır panelleri

Web sayfasının her tarafında sürgülü paneller.

17. Muhteşem CSS3 Saplama Sayfa Şekillendirme Çözümleri

"Yapım aşamasında" bir saplama oluşturmak için animasyonlu efektler uygulamak için üç seçenek.

17. Sayfayı kaydırmanın etkisi

Sayfayı kaydırırken inanılmaz bir etki: öğeler ekranın arkasındaki alandan dışarı çıkar veya tam tersine ekran alanının arkasına saklanır. Böyle bir çözüm, tamamlanmış projelerin kısa bir açıklama ile etkili bir şekilde sunulması için portföy sitelerinde kullanım için mükemmeldir.

19. "fancyBox 2" eklentisi

Modallerde görüntüleri ve diğer içeriği görüntülemek için birçok kişi tarafından bilinen fantezi kutusu eklentisinin yeni, tamamen yeniden yazılmış bir sürümü.

20. Minimit Galerisi

Çok çeşitli özelliklere sahip işlevsel bir eklenti: galeri, atlıkarınca, kaydırıcı, menü, genişletici, hareketli düğmeler.

21. jQuery News Ticker

Sitedeki haberlerin rotatörü. Mesajlar birbirini takip eder ve ilginç bir daktilo efekti kullanarak görünür. "Duraklat" butonuna tıklanarak haber değişikliği durdurulabilir. Oklar, bir mesajdan diğerine geçmek için kullanılabilir.

22. Uyarlanabilir Görüntüler

Mobil cihazlarda görüntülemek için ölçeklenebilir görüntüler. Görüntülerin boyutları pencerenin boyutuna bağlıdır. Kullanılan teknolojiler: javascript ve PHP5.

23. vScroller

Dikey jQuery, CSS3 kaydırıcı. Kaydırma hızı ve gecikme süreleri ayarlanabilir.

24. Çok düzeyli açılır menü "jQSimpleMenu"

Web sitenizde katmanlı yatay açılır menüler oluşturmak için yeni jQuery eklentisi.

25. "jsCarousel 2.0"

dikey ve yatay karuselleri uygulamak için jQuery eklentisi.

26. Rotator "Dinamik Haberler"

rSS beslemesinden en son haberleri güzel bir şekilde görüntülemek için jQuery eklentisi.

27. Animasyonlu menü

Bir menü öğesinin üzerine gelindiğinde animasyonlu efekt.

28. Animasyonlu metin efekti

Arka plan klibi ile çalışmanın üç muhteşem örneği: metin CSS özelliği. CSS3 efekti eski tarayıcılarda çalışmaz.

29 CSS3 jQuery bulanıklaştırma efekti

Bir bloğun üzerine geldiğinizde, blok büyür ve metin içeren blokların geri kalanı arka planda bulanıklaşır.

31 jQuery üzerine gelme ipuçları

33. CSS3 ve HTML5 Notları

Metinli yapışkan notlara benzer blokların uygulanması.

34. Işık Kutusu

Medya içeriğini açılır bloklarda görüntüleme: görüntüler, video, Flash.

35. jQuery zil

Kare alanı artırın.

36 CSS3 jQuery resim açıklaması

Açılır görüntü açıklamalarını uygulamak için "Tabanlı Kayar Kapı İçerik Galerisi" eklentisi. Sunulan resimlerden herhangi birinin üzerine geldiğinizde, tam makaleye bağlantı içeren kısa bir açıklama görünür. Hover: Garaj kapısı kaldırma etkisi.

37. "Önce ve Sonra" jQuery eklentisi "uCompare" efekti

Deklanşörü sürükleyerek üst üste bindirilmiş iki görüntüyü karşılaştırabilirsiniz. Sayfadaki bir şey için iki seçenek düzenlemeniz gereken durumlar için idealdir: öncesi ve sonrası.

39. Dünya, Avrupa ve ABD'nin interaktif haritaları

Güzel kaydırıcılar oluşturmak için eklenti - iView. Çok sayıda ayar, gezinme, zamanlayıcı, API, dokunmatik cihazlar için destek, video yerleştirme ve uyarlanabilirlik.

04.03.2013 1 692

Sitede mikro galeri oluşturmak için eklenti. Otomatik görüntüleme, her görüntü için bir açıklama ekleme yeteneği ve bir daire içindeki sayfalama modu, örn. döngü.

01.02.2013 1 153

JQuery.popeye eklentisi, bir galeri görüntüsünü sayfadan ayrılmadan görüntülemek için zarif ve güzel bir çözümdür. Sayfada yalnızca bir fotoğraf görüntülenir, fareyle üzerine gelindiğinde belirli bir setteki tüm resimleri kaydırmak veya büyütmek mümkün olur. Eklentinin kurulumu ve yapılandırması kolaydır ve modları kullanan yaygın olarak kullanılan lightbox2, fancybox veya colorbox'a alternatif olarak geliştirilmiştir.

23.11.2012 7 286

Mükemmel bir duyarlı jQuery kaydırıcısı - FlexSlider. Madde işareti gezintisi (noktalar), gezinme içeren küçük resimler, slayt olarak video ekleme, atlı karınca seçeneği ve eklentinin küçük bir API'si vardır.

12.09.2012 4 667

Mobilyslider, yalnızca 5Kb ağırlığında, ancak minimalist ve şık görünen basit bir jQuery eklentisidir. Gezinmeyi etkinleştirmek / devre dışı bırakmak, ileri / geri oklar, otomatik slayt gösterisi, geçiş türü seçimi vb. Dahil olmak üzere birkaç ek seçenek vardır.

07.06.2012 1 403

Tam ekran bir slayt gösterisi oluşturalım, ana fikri bir sonraki veya bir önceki slayda giderken o anda açık olan slaydı kesmek. JQuery ve CSS animasyonlarını kullanarak benzersiz slayt geçişleri elde edebiliriz.

09.05.2012 778

JPlayer çapraz platform kitaplığını kullanarak arka plan müziğiyle JQuery slayt gösterisi. Müzik kompozisyonunun belirli aralıklarında slayt değiştirme gerçekleşir.

04.05.2012 892

Rhinoslider oldukça esnek bir jQuery slayt gösterisi eklentisidir. Yalnızca çeşitli efektler sunulmakla kalmaz, aynı zamanda kendi stillerinizi, efektlerinizi ve işlevlerinizi kaydırıcıya eklemek de mümkündür. Eklentinin resmi sayfasında, uygun bir efekt oluşturucu - bir jeneratör - seçiminizi yaptıktan sonra, oluşturulan çalışma örneğini hemen indirebilirsiniz.

03.05.2012 2 061

JQuery ve yumuşatma eklentisine dayalı slayt gösterisi eklentisi. Fare tekerleğini kullanarak slaytlar arasında gezinme yeteneği eklendi. Demo sayfaları, slaytta gezinmenin çeşitli kullanımlarını gösterir.

12.04.2012 1 387

Jmpress kullanarak, ilginç 3 boyutlu slayt efektlerine sahip slayt gösterileri oluşturmak için bir jquery eklentisi yapalım.

Bugün size sadece CSS kodunu kullanarak bir arka plana sahip tam ekran bir slayt gösterisinin nasıl oluşturulacağını göstereceğiz. Resimler arasında çeşitli geçiş efektleri kullanacağız ve ayrıca başlığın CSS animasyonları aracılığıyla görünmesini sağlayacağız.

Görseller, Mark Sebastian () tarafından sağlanmıştır ve Creative Commons Attribution-ShareAlike 2.0 Generic lisansı altında dağıtılmıştır.

Lütfen bu efektin yalnızca ile donatılmış tarayıcılarda çalışacağını unutmayın.

Yerleşim

Burada slayt gösterisi için sırasız bir liste kullanıyoruz ve ayrıca her görüntü için bir aralık ve bir başlık içeren bir bölüm ekliyoruz:

• 
  Resim 01
  
  
  

  yeniden gevşeme

  
  
  
  

Aralıklar, slayt gösterisinde ayarlanmış bir arka plan görüntüsüne sahip öğeler olacaktır.

Css kodu

Sırasız bir liste ile başlayalım. Sabitlenecek ve tüm görüntü alanı boyunca genişleteceğiz. Dokuyu görüntünün üstüne yerleştirmek için: after sözde elemanını da kullanıyoruz:

Cb slayt gösterisi,
.cb-slayt gösterisi: (
pozisyon: sabit;
genişlik:% 100;
yükseklik:% 100;
üst: 0px;
sol: 0px;
z-endeksi: 0;
}
.cb-slayt gösterisi: (
içerik: "";
arkaplan: şeffaf url (../ images / pattern.png) sol üstte tekrarlayın;
}
Yinelenen bir nokta dokusu kullanacağız, ancak örneğin CSS ile uygulanan hafif şeffaf bir tonlama da kullanabilirsiniz.

Slayt gösterisi görüntüsünü içeren Aralık kesinlikle konumlandırılacak ve genişlik ve yükseklik parametreleri% 100 olarak ayarlanacaktır. İçeride ek metin olduğu için, dikkat etmemize gerek olmadığı için rengini biraz şeffaf yapacağız. Arka plan boyutu kapsayacak şekilde ayarlanacaktır - bu, arka plan görüntüsünün öğenin tüm alanını ve dolayısıyla görüntü alanını kapladığından emin olmamızı sağlar. Yoğunluk seviyesi 0 olarak ayarlanmıştır. Daha sonra, bu parametreyi animasyon yoluyla değiştireceğiz:

Cb-slayt gösterisi li span (
genişlik:% 100;
yükseklik:% 100;
konum: mutlak;
üst: 0px;
sol: 0px;
renk: şeffaf;
arka plan boyutu: kapak;
arka plan konumu:% 50% 50;
arka plan tekrarı: yok;
opaklık: 0;
z-endeksi: 0;
animasyon: imageAnimation 36s doğrusal sonsuz 0s;
}
Her aralık için animasyon 36 saniye sürecek ve sonsuz sayıda çalışacaktır. Ama ayrıntılara biraz sonra bakalım, ama şimdilik başlığı olan bir bölüm yapalım:

Cb-slideshow li div (
z-endeksi: 1000;
konum: mutlak;
alt: 30px;
sol: 0px;
genişlik:% 100;
metin hizalama: merkez;
opaklık: 0;
renk: #fff;
animasyon: titleAnimation 36s doğrusal sonsuz 0s;
}
.cb-slideshow li div h3 (
font-family: "BebasNeueRegular", "Arial Narrow", Arial, sans-serif;
yazı tipi boyutu: 240px;
dolgu: 0;
satır yüksekliği: 200px;
}
Başlık bölümü animasyonu da 36 saniye uzunluğunda olacaktır.

Şimdi, slayt gösterisindeki her görüntü ve başlığın bir önceki adımdan 6 saniye sonra görünmesi için tüm aralıklar için arka plan resimlerini ve animasyonda bir gecikmeyi tanımlayacağız:

Cb-slideshow li: nth-child (1) span (
arka plan resmi: url (../ resimler / 1.jpg)
}
.cb-slideshow li: nth-child (2) span (
arkaplan resmi: url (../ resimler / 2.jpg);
animasyon gecikmesi: 6s;
}
.cb-slideshow li: nth-child (3) span (
arkaplan resmi: url (../ resimler / 3.jpg);
animasyon gecikmesi: 12s;
}
.cb-slideshow li: nth-child (4) span (
arkaplan resmi: url (../ resimler / 4.jpg);
animasyon gecikmesi: 18s;
}
.cb-slideshow li: nth-child (5) span (
arkaplan resmi: url (../ resimler / 5.jpg);
animasyon gecikmesi: 24s;
}
.cb-slideshow li: nth-child (6) span (
arkaplan resmi: url (../ resimler / 6.jpg);
animasyon gecikmesi: 30s;
}

Cb-slideshow li: nth-child (2) div (
animasyon gecikmesi: 6s;
}
.cb-slideshow li: nth-child (3) div (
animasyon gecikmesi: 12s;
}
.cb-slideshow li: nth-child (4) div (
animasyon gecikmesi: 18s;
}
.cb-slideshow li: nth-child (5) div (
animasyon gecikmesi: 24s;
}
.cb-slideshow li: nth-child (6) div (
animasyon gecikmesi: 30s;
}
Şimdi slayt gösterisini canlandırmaya geçelim. Her aralık, 36 saniye sürecek bir animasyona sahip olacaktır. Bu 36 saniyede yoğunluk seviyesini 0'dan 1'e değiştireceğiz (bu, animasyon ilerlemesinin yaklaşık% 8'inde gerçekleşecek). Ve sonra yoğunluk seviyesinin bu değeri,% 17'ye kadar ilerleme tutacaktır. % 25 ilerlemeye ulaşıldığında, yoğunluk seviyesi tekrar 0'a düşmeli ve sonuna kadar öyle kalmalıdır.

Neden tam olarak bu değerler? Her görüntünün yalnızca 6 saniye görünmesini istiyoruz ve döngünün sonunda ilk görüntünün tekrar gösterilmesi gerektiğini biliyoruz. Sadece 6 resmimiz var, bu yüzden tüm döngü için 36 saniyeye ihtiyacımız var. Şimdi yoğunluk seviyelerini buna göre dağıtmamız gerekiyor. İkinci görüntümüzün 6 saniyede değişmeye başlayacağını bildiğimizden, bu animasyonun ilk görüntü durumunda alacağı yüzdeyi bilmemiz gerekir. 6'yı 36'ya böldüğümüzde 0.166 elde ederiz ... bu da çerçevelerdeki eşiğimizin% 16 olacağı anlamına gelir. Şimdi, görüntünün her zaman solmasını istemediğimiz için, bir sonraki eşiği, aralarında, hesapladığımızın yarısı olan, yani% 8 olarak tanımlıyoruz. Bu, tam teşekküllü bir görüntüyü göstermemiz gereken dönemdir ve% 17'de solmaya başlamalı ve% 25'te tam solma gerçekleşmelidir.

@keyframes imageAnimation (
% 0 (opaklık: 0; animasyon zamanlama işlevi: kolaylık;)
% 8 (opaklık: 1; animasyon zamanlama işlevi: yumuşatma;)
% 17 (opaklık: 1)
% 25 (opaklık: 0)
% 100 (opaklık: 0)
}
Başlık için de aynısını yapmanız gerekiyor, ancak biraz daha hızlı kaybolması için yapmanız gerekiyor. Bu nedenle, yoğunluk seviyesi zaten ilerlemenin% 19'unda 0'a gelmelidir:

@keyframes titleAnimation (
% 0 (opaklık: 0)
% 8 (opaklık: 1)
% 17 (opaklık: 1)
% 19 (opaklık: 0)
% 100 (opaklık: 0)
}
Animasyon desteği olmayan tarayıcılara gelince, böyle bir durumda, yayılma yoğunluğunu 1 olarak ayarlayarak slayt gösterisindeki son görüntüyü gösteriyoruz:

No-cssanimations .cb-slideshow li span (
opaklık: 1;
}
No-cssanimations sınıfı Modernizr kullanılarak eklenir.

Şimdi, görüntü alanı boyutu daha küçük olduğunda başlıkların yazı tipi boyutuna da bakalım. Yazı tipini belirli bir genişlikte küçültmek için medya sorgularını kullanırız:

@media ekranı ve (maks. genişlik: 1140 piksel) (
.cb-slideshow li div h3 (yazı tipi boyutu: 140 piksel)
}
@media ekranı ve (maks. genişlik: 600 piksel) (
.cb-slideshow li div h3 (yazı tipi boyutu: 80 piksel)
}
Ve bu, slayt gösterisinin basitleştirilmiş bir versiyonunun geliştirilmesi ile sona erdi! Şimdi geçişleri nasıl iyileştirebileceğimize bakalım.

Alternatif animasyon örneği

Şimdi görüntü ve başlıkları göstermek için animasyonla biraz oynayabiliriz.

Aşağıdaki animasyon, görüntüde bir artış ve onu izleyen hafif dönüş anlamına gelir:

@keyframes imageAnimation (
0% {
opaklık: 0;
animasyon zamanlama işlevi: kolaylık;
}
8% {
opaklık: 1;
dönüşümü: ölçek (1.05);
animasyon zamanlama işlevi: yavaşlatma;
}
17% {
opaklık: 1;
}
25% {
opaklık: 0;
dönüşümü: ölçek (1.1) döndür (3deg);
}
% 100 (opaklık: 0)
}
Başlık sağ taraftan dışarı doğru kayacak (başlığın metin hizalama parametresinin değerini sağa değiştirmemiz gerekecek) ve sonra kaybolarak sola doğru hareket edecek:

@keyframes titleAnimation (
0% {
opaklık: 0;
dönüştürme: translateX (200px);
}
8% {
opaklık: 1;
dönüşümü: translateX (0px);
}
17% {
opaklık: 1;
dönüşümü: translateX (0px);
}
19% {
opaklık: 0;
transform: translateX (-400px);
}
% 25 (opaklık: 0)
% 100 (opaklık: 0)
}
Unutmayın, birçok seçenek olabilir, asıl şey denemekten korkmamak!

Demo

Burada animasyonu kullanmanın birkaç yolu vardır.