Scrollequence incelemesi: WordPress’e tam sayfa atölyesini ekleyin

Hiç aşağı kaydırdığınızda içerik sırasını gördüğünüz ilginç bir web sitesi animasyonu gördünüz ve sizinle birlikte hareketli bir arka plan görüntüsü gibi hissediyor musunuz? Belki metin, görüntüler veya diğer farklı. Ama içerik ne olursa olsun, oldukça ilginç. Ancak, bir geliştirici değilseniz, bu efekti kendi WordPress sitenize eklemek zor olabilir. Kaydırma, düzeltin. Bu, fare tekerlekleri ve dokunmatik cihazlarla iyi çalışan kendi kaydırmalarınızı yapmanızı sağlayan bir WordPress freemium eklentisidir. Ana sayfanızda ilginç bir animasyon dizisi yapmak için kullanabilirsiniz. Veya, ziyaretçilerin içeriğinizi tüketmeleri için daha sinematik ve çekici bir yol sunmak için her gönderi ve sayfada da kullanabilirsiniz.
Görsel efektleri yalnızca metinle tanımlamak zordur, böylece burada veya burada veya neden bahsettiğimi görmek için bazı örnekleri görebilirsiniz. Bu, kaydırma, ne yapmanıza yardımcı olduğuna gerçek bir örnektir. Ya da geliştiriciden bu iyi demo gif’i buldum:

Doğrudan kaydırma incelememizde, size bu eklentinin nasıl çalıştığı ve neler yapabileceğiniz hakkında ayrıntılı bir bakış sunacağım. Scrollequence Review: Özelliklerin bir listesi bir kez daha, kaydırmanın etkisini kelimelerle tanımlamak benim için zor çünkü bununla ilgili benzersiz şey onu görsel olarak nasıl çekeceğidir. Yani, neden bahsettiğimden emin değilseniz, resmi örneklerden birine bakın:
Güzellik
Siberpunk
İzle (saat cihazı)
Kısacası, kaydırma, özel teknik bilgi gerektirmeden WordPress sitenizde bu etki yaratmanıza yardımcı olur. Bir dizi görüntüyü birleştirerek kısa veya uzun animasyonlar oluşturabilirsiniz.

Bilinen bir Tinymce düzenleyicisini kullanarak içerik ekleyebilir ve içeriğin davranışını kontrol etmek için kod ücretsiz animasyonları ayarlayabilirsiniz. Dürüst olmak gerekirse, çoğu özelliği görsel olmadan açıklamak zordur, bu yüzden doğrudan doğrudan bölüme gidelim! Şimdi kaydırma ile uygulamalı, hadi düz gidelim ve Scrollequence ile kendi animasyon dizinizi yapmanın nasıl bir his olduğunu göstereceğim.
1. Başlamak için yeni bir sayfa oluşturun, Scrollrequeence → yeni kaydırma ekleyin. Scrollequence, siparişinizi saklamak için özel bir yazı türü kullanır, böylece bilinen bir WordPress düzenleyicisi görürsünüz:
İlk adımınız “sayfa” eklemektir. Scrollequence’da sayfa, animasyonu mantıksal diziler halinde paylaşmanıza yardımcı olur. Bir sayfa ile bir dizi yapabilirsiniz. Veya daha uzun animasyonlar için, siparişi birkaç sayfaya bölebilirsiniz. Her sayfada bir resim, içerik, ayarlar ve benzersiz animasyonun kendisi (bir sonraki adımda ekleyeceğiniz) olacaktır.

Birkaç sayfa eklerseniz, yeni bir sekme olarak eklendiğini göreceksiniz. İşyerinde zaman kazanmanıza yardımcı olan mevcut sayfaları da çoğaltabilirsiniz:
Şimdilik, sadece bir sayfa ile başlayacağım. 2. Bir sonraki resminizi ekleyin, sayfanıza resim eklemeniz gerekir. Eklenti, başlangıç noktası olarak en az 50-100 görüntü önerir-bu, ziyaretçiler aşağı kaydırdığında harika bir animasyon efekti oluşturmanıza olanak tanır. Bir animasyon yerine, efekt aslında 50’den fazla görüntüden “yuvarlanıyor”. Masaüstü ve mobil cihazda bir kaydırma sırası kullanmak istiyorsanız, kare en boy oranı seçmelisiniz. Her biri için optimize edilmiş görüntülerle masaüstü ve hücresel ziyaretçiler için ayrı bir dizi de yapabilirsiniz. Şu anda, her bir ziyaretçi türü için doğru sürümü görüntülemek için kendi kodunuzu kullanmanız gerekir, ancak geliştirici bunu varsayılan bir özellik olarak eklemeyi planlamaktadır.

Bu görüntü dizisini yapmanın en iyi yolunu açıklayan bir belge sayfasına sahip olmanın yararlı olacağını düşünüyorum, çünkü bunu nasıl yapacağımı hemen anladığım bir şey değil. Google hızlı olduktan sonra, bu video dönüştürme aracını JPG’ye kullanmaya karar verdim, bu da her kareyi ayrı bir resim olarak yüklediğim ve kırdığım kısa bir video dosyası aldı. Not – Bu incelemeyi yazdıktan sonra, geliştiriciler aklımı okur ve burada yararlı bir öğretici ekler. Mümkün olduğunca çok çerçeve dışa aktarmak istiyorsanız VLC veya FFMPEG’yi önerirler, çünkü kullandığım araçlar çerçevenin sadece küçük bir bölümünü dönüştürür.

18 -saniyelik bir video yükledim ve 5 fps çerçeve hızını ayarladım. Bu, 18 -saniyelik videomu, kaydırma sonrasında kullandığım 94 ayrı JPG görüntüsüne değiştirdi. Bu, 94 resmin tümü ile sayfam. Gerekirse, diziyi sürükle ve bırak veya silme ile sıfırlayabilirsiniz İyi bir özelliği burada görüntü kütlesinin sırasını tersine çevirmek için bir seçenektir. Bazı nedenlerden dolayı, görüntüm zıt sıraya dahil edildi (doğru bir sayı verilmesine rağmen) ve 94 görüntüyü manuel olarak yeniden düzenlemek için çok zahmetli olurdu. Bu, eklentinin kendisi değil, WordPress’in yükleyicisiyle ilgili bir sorundur (çünkü dosyaları doğrudan WordPress Media kütüphanesine yüklerken aynı sorunu yaşarım).

Not – Geliştiriciler bu özelliğin yol haritalarında olduğunu söylüyor, bu yüzden umarım bu özellik yakında mevcut olacak. 3. İçeriği ekleyin Sayfa için resimler seçtikten sonra, o sayfaya içerik ekleyebileceğiniz yeni bir düzenleyici alacaksınız. Bu, tanıdık ve iyi bir arayüz olduğu için rahat olan sıradan bir klasik WordPress editörüdür:
Bu içerik bu sırada resmin üzerinde görüntülenecektir. Farklı bir içerik koleksiyonu görüntülemek istiyorsanız, başka bir sayfa oluşturabilirsiniz. Ayrıca birkaç sıra metin ekleyebilir ve farklı zamanlarda görüntülenecek şekilde farklı bir şekilde canlandırabilirsiniz (daha sonra bu konuda).

Ayrıca HTML, kısa kod, OEMBED’ler vb. Ekleyebilirsiniz. Size çok fazla esneklik sağlayan editörde. Yani, sıradan bir metinden daha fazlasını ekleyebilirsiniz.
Aşağıda bağlı makaleler

4. İçeriğinize animasyon eklemek için animasyon (isteğe bağlı) ekleyin, animasyon yapmak istediğiniz içeriğe CSS seçmenleri eklemeniz gerekir. Bu sürecin en teknik kısmı, ama yine de oldukça kolay. İçerik düzenleyicisinde metin sekmesini açabilirsiniz. Ardından, animasyon yapmak istediğiniz metnin her bölümüne kimliği ekleyin. Örneğimde,