Kayan yazı şeridi JavaScript gerektirir mi?

Hayır. Kaydırma bir CSS animasyonudur. Tek script, isteğe bağlı duraklatma düğmesi için küçük bir custom element’tir; o olmadan düğme gizli kalır ve şerit yine kayar.

Ekran okuyucu ve klavye kullanıcıları bunu nasıl deneyimler?

Öğeler ekranı dolduracak şekilde tekrarlanır, ama her tekrar ekran okuyuculardan gizlenir ve bağlantıları sekme sırasından çıkarılır; böylece her öğe bir kez okunur ve bir kez odaklanır. Şerit, bağlantılarından biri klavye odağındayken durur ve ziyaretçiler onu duraklatma düğmesiyle durdurabilir.

Ziyaretçide azaltılmış hareket açıksa ne olur?

prefers-reduced-motion ile animasyon kapanır, tekrarlar gizlenir ve öğeler ihtiyaç duydukları kadar ortalanmış satıra yayılır.

Kaç öğe ekleyebilirim, metin ve logoları karıştırabilir miyim?

Metin öğeleri ile logo ya da görsel öğelerinin herhangi bir karışımında en fazla 16 blok. Her öğenin kendi bağlantısı olabilir ve logolar özel bir yükseklik kullanabilir.

Hız ayarı her metin için tam olarak aynı mı kalır?

Döngü uzunluğu Liquid’de metin uzunluğu, yazı boyutu ve logo boyutlarından tahmin edilir; bu yüzden saniyede piksel cinsinden hız kesin değil, yaklaşıktır.

Kayan yazı şeridi

Sonsuz kayan metin, ikon ya da logo şeridi. Haber bandı, duyuru şeridi ya da logo duvarı olarak kullanın. Duraklatma düğmeli, saf CSS hareket.

Kategori: İçerik ve hikâye anlatımı
Kullanım yeri: Ana sayfa, Ürün, Koleksiyon, Her sayfa
Okuduğu veri: Yalnızca içerik
Boyut: 27 KB, küçük bir betik içerir
Lisans: MIT, müşteri işlerinde ücretsiz

Markdown olarak görüntüle ChatGPT’de aç Claude’da aç

Kısaca

Kayan yazı şeridi (Marquee), metin öğelerinden ve logolardan oluşan bir şeridi sonsuz döngüde kaydıran ücretsiz bir Shopify bölümüdür. Hareket saf CSS’tir, ekran okuyucular her öğeyi bir kez duyar ve animasyonları kapatan ziyaretçiler için durur. Her Online Store 2.0 temasında uygulama olmadan çalışır.

Örnek içerikli demo

Ne zaman kullanılır

Ana sayfa bölümleri arasında marka değerlerinden ya da kampanyalardan oluşan iddialı, eğik bir şerit
Üst bilginin altında ücretsiz kargo ve iade bandı
Üzerine gelince renklenen gri tonlamalı basın ya da satış noktası logoları satırı

Tema düzenleyicide

Metin öğeleri (zengin metin, ikon ya da emoji veya ikon görseli, bağlantı) ve logo öğeleri (görsel, özel yükseklik, bağlantı)
Hız, yön, üzerine gelince duraklat, duraklatma düğmesi, -3° ile 3° arası eğim
Ayırıcı: yok, nokta, yıldız ya da kendi metniniz
Küçükten çok büyüğe yazı boyutu, mobilde ayrıca; yazı kalınlığı, büyük harf, temanın başlık yazı tipi
Öğeler arası boşluk, şerit iç boşluğu, logo yüksekliği, üzerine gelince renklenen gri tonlamalı logolar, soluklaşan kenarlar
Şerit arka plan rengi ya da gradyan, metin, ayırıcı ve bölüm arka plan renkleri; üst ve alt kenarlık
Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği

Dosyalar

sections/lib-marquee.liquid

İndir

Kodu görün

lib-marquee.liquid dosyasını açın

snippets/lib-image.liquid

İndir

Kodu görün

lib-image.liquid dosyasını açın

Sade Liquid, CSS ve küçük bir betikle yazıldı. Uygulama da bağımlılık da yok.

Temanıza nasıl eklenir

Bölüm dosyasını temanızın sections klasörüne, listelediği snippet’leri de snippets klasörüne kopyalayın.
Tema düzenleyicide Add section’ı (Bölüm ekle) seçin ve adı “Lib ·” ile başlayan bölümü ekleyin.
Örnek metni mağazanızın kendi metniyle değiştirin, renkleri markanıza göre ayarlayın.

Sık sorulan sorular

Kayan yazı şeridi JavaScript gerektirir mi?: Hayır. Kaydırma bir CSS animasyonudur. Tek script, isteğe bağlı duraklatma düğmesi için küçük bir custom element’tir; o olmadan düğme gizli kalır ve şerit yine kayar.
Ekran okuyucu ve klavye kullanıcıları bunu nasıl deneyimler?: Öğeler ekranı dolduracak şekilde tekrarlanır, ama her tekrar ekran okuyuculardan gizlenir ve bağlantıları sekme sırasından çıkarılır; böylece her öğe bir kez okunur ve bir kez odaklanır. Şerit, bağlantılarından biri klavye odağındayken durur ve ziyaretçiler onu duraklatma düğmesiyle durdurabilir.
Ziyaretçide azaltılmış hareket açıksa ne olur?: prefers-reduced-motion ile animasyon kapanır, tekrarlar gizlenir ve öğeler ihtiyaç duydukları kadar ortalanmış satıra yayılır.
Kaç öğe ekleyebilirim, metin ve logoları karıştırabilir miyim?: Metin öğeleri ile logo ya da görsel öğelerinin herhangi bir karışımında en fazla 16 blok. Her öğenin kendi bağlantısı olabilir ve logolar özel bir yükseklik kullanabilir.
Hız ayarı her metin için tam olarak aynı mı kalır?: Döngü uzunluğu Liquid’de metin uzunluğu, yazı boyutu ve logo boyutlarından tahmin edilir; bu yüzden saniyede piksel cinsinden hız kesin değil, yaklaşıktır.

Yayınlamadan önce

Demolardaki metinler örnek içeriktir. Yayımlamadan önce kendi mağazanızın bilgileriyle değiştirin.
Hareketin azaltılmasını isteyen ziyaretçilerde animasyonlar kapalıdır.
Her dosya burada yayımlanmadan önce Shopify Theme Check ile kontrol edilir.

Temanıza uyarlanmış bir sürüme ya da burada olmayan bir bölüme mi ihtiyacınız var? Şu sayfaya bakın: Shopify tema geliştirme.

İçerik ve hikâye anlatımı
Özellik kartları
İkon, başlık ve metinli iki ile dört sütun kart. Masaüstünde imleci yumuşak bir ışıltı izler; dokunmatik ekranlarda kartlar ışıltısız görünür.
İçerik ve hikâye anlatımı
Nasıl çalışır
Abonelik, siparişe özel üretim ya da hizmetler için bir çizgiyle bağlanan numaralı, simgeli adımlar: masaüstünde yan yana, mobilde alt alta; düğme eklenebilir.
İçerik ve hikâye anlatımı
Görsel kolaj
Başlık, metin ve düğmeli bir kartın yanında üst üste binen iki ya da üç fotoğraf; Hakkımızda sayfalarına uygun. Mobilde düzenli ızgara, Liquid ve CSS.