Metni kaydırmak kolaydır – ayarlamanın 4 yolu

Yuvarlanan metin nedir? Rolling Metin, ayarladığınız yönü izleyerek web sitesi sayfasına taşınan bir metindir. Bu dinamik olarak görüntülenir ve bunun için ayarladığınız özelliğe sahiptir. Metin türü:
Klasik (sınırsız miktarda yinelemede sayfalara metin yuvarlanması)
Bkz. Codepen’deki Veronica (@Veronica18) tarafından Pen Zlarzm.
Slayt (metin sayfaya belirli bir noktaya yuvarlanın ve ardından yerinde kalır)
Codepen’deki Veronica (@Veronica18) tarafından bkz. Pen Vbdery.
Alternatif (metin sayfaya tek yönde yuvarlanın, ardından diğer hareketlerin yinelemesinde ters yönde geri dönün)
Bkz. Codepen’deki Veronica (@Veronica18) tarafından Pzkgpl Kalem.
Metin kaydırmada ilerleme
Bkz. Codepen’deki Veronica (@Veronica18) tarafından Pen Super Basit İlerleme Çubuğu. Bu tür bir metin, yalnızca web sitesi sayfasına gerçek değer getiren durumlar için çok nadiren kullanılan bir özelliktir. Aşağıdaki örnek, metnin iyi kullanımını kanıtlamaktadır, çünkü ziyaretçilere sunulan değerli ve gerçek zamanlı bilgiler içerir:

Günlük Forex
Bu tür metni doğru kullanmanın bir başka örneği, haberlerin verandadaki belirli alanları tüm okuyucuların bilmesi gereken bir zaman geçirdiği web sitesidir:

Blog yazarlarının ana sayfada dinamik olarak görüntülenerek blog yazarlarının belirli yayınlara dikkat çekmeyi planladığı bloglar için pratik döner metin. Bu, gerçek zamanlı haberler göstermesi ve gerçekleştiğinde sunması gereken gazeteler için de yararlıdır. Buna ek olarak, kullanıcılara web sitesinin metnini kaydırma ilerlemelerinin site içeriğine daha iyi katılım için nasıl yararlı olabileceğini gösteriyor (tam olarak ne kadar okuduklarını ve makalenin altına kaymanın ne kadar sürdüğünü biliyorlar). Yuvarlanan metin – Site sayfanıza nasıl eklenir? Metni web sitenize eklemek için 3 ana yöntem vardır: 1. eklenti (WordPress sitesi için), 2. sayfa kaynağına eklenecek bir kod veren veya kendi kodu yazan jeneratör kodu ( 3. html veya 4. CSS animasyonu). Otomatik haddeleme metinleri (nasıl) Web sitenizde bunun gibi metin işlevleri oluşturmak için yöntemlerin üstesinden gelelim. Okuyucu sayfaya indiğinde, hareketli metni görebiliyorlardı (yatay olarak kaydırma – soldan sağa/sağa, dikey olarak kaydırarak – aşağıdan yukarı/yukarıdan aşağıya, sıçradı, içine kayarlar). Bunu nasıl uygularsınız? 1. Yuvarlanan metin eklemenin kolay yolları: WordPress eklentilerini kullanın Siteniz WordPress’te çalışırsa, bu tür metinleri sayfaya eklemek için en iyi bir yöntem vardır. Adı Ditty News Ticker ve bu özellikle web sitesine kaydırma metni eklemek için yapılmış bir eklenti.
Metinler için birçok eklenti var, bu makalede en güvenilir ve tamamen işleyen hakkında konuşacağız. Metni bu yöntemi kullanarak WordPress sitesine girme adımları şunlardır: A. Eklentiyi WordPress Yönetici Gösterge Tablosu’na arayın ve yükleyin, eklenti bölümünü açın -> Yeni ve Ditty News Ticker’ı arama kutusuna ekleyin. Şimdi Yükle’yi tıklayın. C. Etkinleştir’i tıklayın. D. Eklentileri -> eklentileri yükleyerek eklentinin yüklü ve etkin eklentinin bir parçası olup olmadığını kontrol edin.
e. WordPress Yönetici Gösterge Tablosunda, News Tickers adına yeni bölüm eklendi. Bu bölüme tıklayarak, yeni işaretçiler yapmaya ve ayarlamaya adanmış gösterge tablosunu açabilirsiniz.

F. Web sayfasının belirli bir bölümünde kaydırma metni oluşturmak için yeni bir kene ekleyin. Gösterge tablosuna yukarıdaki ekran görüntüsündeki gibi açmalıdır. G. Çeşitli sayfalarda/web sitelerinde metnin yönetimini kolaylaştırmak için haber işaretçisine bir isim vererek başlayın. H. Web sitesindeki sayfaya uygulamadan önce haber biletini ayarlayın. Ticker Tip Metin Ticker, kaydırma hareketine göndermek istediğiniz bu sekme metninin özel alanına eklemeniz gerekir. Type Ticker – Link & Hedef İsterseniz metne bağlantılar ekleyebilirsiniz. Bunu yapmak için, hedef sayfanın sayfasının/bir kısmının URL’sini belirlemeli ve bağlantının aynı sekmede veya yeni sekmede açılıp açılmayacağını seçmelisiniz.

Ticker Modu – Kaydırma Yön kaydırma Animasyon etkinleştirildiğinde metnin yönünü belirleyin: sol, sağ, üst, alt. Hız kaydırma seti, metnin sayfaya döndüğü hızı ayarlayın. Daha büyük bir değer, her bölümde daha hızlı metin yükseltme ile aynıdır. TICHER MODU – Döndürme Türü Bilet için dönme türünü seçin: solma, sola kaydırın, sağa kaydırın, yukarı kaydırın, yukarı kaydırın veya aşağı kaydırın. Tüm ayarlamalar yapıldığında, yeni bir özellikle kayayı tıklayın/güncelleyin.

Bir kaydırma metninin görünmesini istediğiniz sayfaya kopyalayıp yapmanız gereken kısa bir kod (ayar gösterge tablosunda) bulacaksınız.

Kısa kodu metne adanmış sayfa bölümüne uyguladıktan sonra değişiklikleri kaydedin ve sonuçları görün.
Gösterge tablosunda ayarladığınız hızla sayfada (nasıl ayarladığınıza bağlı olarak sol/sağ, üst/alt) iyi bir metniniz olacak ve orada belirttiğiniz yönde kaydıracaksınız. 2. Orta Zorluk Yöntemi: HTML Kod Jeneratör ile Metin Kaydırma Daha kolay kullanım için HTML (Tende Jeneratörü) Jeneratör Jeneratörünü seçebilirsiniz. Döner harekete göndermek istediğiniz metni girme ve mülkü doğrudan çevrimiçi olarak kod üreticisinde ayarlama olanağına sahipsiniz. Bu çadır jeneratörü burada bulunabilir. Yalnızca kendi metninizi girmeyeceksiniz, aynı zamanda ayarlayacaksınız:
A. Metin rengi B. Arka plan rengi C. Metin yazı tipi D. Kaydırma yönü e. Yuvarlanma Hızı F. Hareket Türü (Kaydırma/Boşluk) G. Metnimin marjını doldurma. J harfi boyutu. Metin kalın/eğik k. Metnin hizalanması (sol, sağ, orta, düzleştir) l. Hat yüksekliğiniz görüntüye kaydırma efektini de uygulayabilir. Görüntü için görüntü ve alternatif metnin URL’sini belirleyin, seçilen görüntü sayfaya daralma hareketi olacaktır. Kendi kodunuz: İlk HTML kod yöntemine sahip metin ve döner bir metin uyguladığı en yaygın olarak bilinen metin HTML kodunu kullanmaktır. Bu işlevle eşleşen etikete “Marquee” denir ve aşağıdaki forma sahiptir:
… . Bu etiket HTML kodunda gelir ve aşağıdaki özelliklere sahip olabilir: A. Genişlik – Bu öznitelik, metnin açık olduğu yatay mesafeyi belirler; Bu benim kaydırma metnim B. Yükseklik – Bu, metnin açık olduğu dikey mesafeyi ifade eder; Bu benim kaydırma metnim C. Davranış – “Davranış” Nitelikleri Bu etiketle ilgili metin için belirli hareket türlerini yapar (farklı davranışlar: kaydırma, kayma, alternatif).
Klasik kaydırma, sınırsız metin yuvarlanma anlamına gelir.
Slayt, metnin bir noktaya yuvarlandığı ve ardından yerinde kaldığı anlamına gelir.

Alternatif, metnin bir noktaya döndüğü ve ardından karşı kaydırma hareketine geri döndüğü anlamına gelir.
haddeleme metni
kayar metin alternatif metin hareketleri d. e. Yön – Bu metin hareketinin yönünü düzenler (sağ, sol, yukarı veya aşağı) Bu benim SMS’m SMS’m Bu SMS I Bu benim SMS’m F. Arka plan rengi – Bu öznitelik, metnin taşındığı metnin arka plan rengini belirler . Scrollamount – Nitelikler, metnin sayfada yuvarlanma hızını ifade eder. Daha yüksek miktar daha hızlı bir rulo ile ilişkilidir, daha küçük değer daha pürüzsüz bir rulonun hareketi ile ilişkilidir. Bu hızla taşıma metin Lütfen bu yöntemin (HTML seçim çerçevesi etiketini kullanarak) artık kullanılmadığını ve mevcut web sitesinde kullanım için önerilmediğini unutmayın. Yukarıdaki bilgiler, kaydırma metni yapılırken hangi özelliğe uyulması gerektiğini bilmesi gereken kaba bir kılavuz olarak saftır. 4. Kendi Kodunuzu Yazın: CSS Animasyonu ile Metin Yuvarlanması, metnin döner hale getirilmesi için en iyi yöntemdir. Bu standart W3C’ye uygundur;
Ancak, kod yazmak biraz daha zaman ve çaba gerektirir.Kodlama hattının temel yönlerini vurgulayarak bu kodun nasıl yapılacağını açıklayacağız.CSS çadırları CSS animasyonu ve @eyframes kuralları kullanılarak oluşturuldu.A. Animation CSS aşağıdaki sözdizimine sahiptir: [ || || || || || ||
] Nerede: animation-name = animasyon adı animasyon-süresi = gerekli sürenin tamamlanması gereken animasyonun tamamlanması (bir yineleme) animasyon-zamanlama-fonksiyon = Animasyonun anahtar çerçeveleri arasında nasıl geliştiği animasyon-duray = animasyonun başladığı zaman animasyon-birim-pount = miktar animasyon için belirtilen yinelemenin animasyon-yönlendirmesi = ANIMATION-FILL-modu web sayfasına animasyonun ve animasyonun oynatma süresinin dışında uygulanan değerin tanımlanması. B. kurallar @keyframes (ne olduğu ve içerdiği): Birincisi, @keyframes kurallarının sözdizimi aşağıdaki gibidir: @keyframes: ad {ana kare seçmenleri {Keyframe Deklarasyonu}} kurallar @keyframes metin stillerini farklı olarak tanımlar Animasyon boyunca puanlar, şu anda oynandı. Seçmenler ve beyanlar içerir. Seçiciler, yineleme boyunca farklı noktaları belirlemek için kullanılır, anahtar kelimeden/anahtar kelimeye olabilir veya yüzde olarak ifade edilebilir. Bildirge, @eyframes kuralları için bir mülk ve özel değerler koleksiyonunu temsil eder. Kurawal braketlerinin bir belirteci ile işaretlendi. Kod doğru bir şekilde yapılacak şekilde, kaydırma metninin yatay hareketi için Translatex’i ve kaydırma metninin dikey hareketi için Translatey kullanın. Kodlama hattında bazı CSS kodu özellikleri, şunları girmelisiniz:
-moz-transform = metin dönüşümünü tanımlama -webkit-transform = Metin dönüşümünü iki boyutlu veya üç boyutlu bir alanda tanımlama 5. Metni çatlatma metni (ilerleme çubuğu) Kullanıcılar uzun sayfalara, özellikle bloglara indiğinde, eklemek iyidir. Onlara okuma ve dolayısıyla ilerlemeyi anlatan bıçaklar ilerlemesi, onları sayfaları keşfetmeye daha fazla içerir. Bu kez, döner metin insanlar tarafından yürütülür ve onlara kaç metin kaydırdıklarını/hala kaç metne ihtiyaç olduğunu söyleyen bir “sayaç” görselleri vardır. WordPress üzerine inşa edilmiş web siteleri için, okuyucu için yararlı olduğunu düşündüğünüz uzun sayfalara ilerleme bıçakları eklemenin hızlı ve kolay yolları vardır. Bir kez daha, bu okumaya değer bir eklenti. A. WordPress Yönetici Gösterge Tablosunda, eklenti bölümünü açın -> Yeni ekleyin. B. Arama çubuğundaki okumayı değerlendirin ve her eklentiyi arayın. Şimdi Yükle’yi tıklayın. D. Etkinleştir’i tıklayın. e. Worth Active eklentisi listesinin yüklendiğini ve doğru şekilde etkinleştirildiğini kontrol edin.

F. Eklentinin yüklenmesi WordPress yönetici menüsüne yeni bir bölüm ekleyerek: Okumaya değer. Web sitesi sayfasındaki ilerleme bıçaklarını belirleyen özellikleri tıklayın ve ayarlamaya başlayın. İşlevsellik sekmesi
İlerleme çubuğunu görüntüleyeceğiniz yerde, Web Sitesinin belirli bölümlerinde ilerleme bıçaklarını görüntülemeyi seçebilirsiniz: ana sayfanın/sayfa/sayfa. Eklenti İlerleme çubuğunun yerleştirilmesi, ilerleme çubuğunun yerleştirilmesi için çeşitli seçeneklerle donatılmıştır. Ekranın üst/altına veya ekranın sol/sağ tarafında ayarlamak için seçin. Genel kural, ekranın altına yerleştirmektir ve kullanıcılar bu uygulamaya aşina oldukları için bu yerleşimi seçmelisiniz. Stil sekmesi buradan, kullanıcının kaydırma metnini işaretleyen sayfada gösterildiği gibi, görünümünü, rengini, ilerleme bıçaklarının boyutlarını ayarlayabilirsiniz. Bu kalınlık, ziyaretin ilerlemesini ölçen ilerlemenin ne kadar kalın olduğunu belirler. . Ön arka plan rengi, kaydırma sırasında hareket eden ilerlemenin bir parçasıdır. Kontrast bir renk ayarlamanız gerekir, böylece ilerleme gerçekten kullanıcı tarafından görülebilir. Ön arka plan opaklığı% 100 bulanık olarak ayarlanırsa, ilerlemenin ön arka planı ziyaretlerin ilerlemesini daha verimli bir şekilde işaretleyecektir. Bununla birlikte, farklı bir ön arka plan opaklık değeri belirlenirken daha şık bir etki mümkündür. Arka planın arka plan rengi, ilerleme bıçaklarının statik bölümünü ifade eder, ön arka plan yuvarlanırken hareket eder. Renk istendiği gibi düzenlenebilir. Şeffaf arka plan pratik amaçlar için, ilerleme çubuğunun arka planını şeffaf olacak şekilde düzenlemek için bir eklenti seçeneği vardır. Ön arka plan rengi boğulur Bu seçenek, döner metin durdurulduğunda ön arka plana atıfta bulunur. Bu nedenle, kullanıcı sayfayı aşağı kaydırmadığında, ön arka plan burada belirlenmiş bir renge sahip olacaktır.

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir