Oxygen Builder Web Sitesine Lottie Animasyonları Nasıl Eklenir

Lottie, GIF'lerin ve videoların yerini almak için oluşturulmuş bir animasyon türüdür. Çok hafiftir ve herhangi bir web sitesine modern ve profesyonel bir dokunuş olarak. Bu blog yazısında, Oxygen Builder web sitenize lotoları nasıl ekleyeceğinizi tartışacağız.

Diğer sayfa oluşturucuların aksine, Oxygen Builder yerel bir entegrasyona sahip değildir ve web sitenize kolayca loto ekler. Bunun yerine, piyangoları web sitemize entegre etmek için bir kod bloğu, iki JavaScript kitaplığı ve bazı basit kopyalama ve yapıştırma işlemlerini kullanacağız. Bu makale, temel bir döngü animasyonunun nasıl ekleneceğini, sayfanızdaki kaydırma konumuna göre animasyonu etkileşimli hale getirmeyi, yalnızca farenizle üzerine geldiğinizde oynatmayı ve hatta tıklandığında piyango animasyonunu değiştirmeyi ele alacaktır.

Göreceğiniz gibi, web sitenize oksijenle oluşturulmuş bir lotti eklemek nispeten kolaydır ve son ürünü kullanıcılarınız için çok daha profesyonel ve ilginç kılan benzersiz bir dokunuş katar. Hepsinden iyisi, bir video ve hediyeyle karşılaştırıldığında, performans üzerindeki etkisi tamamen göz ardı edilebilir.

Video öğretici

Yazılı eğitim için okumaya devam edin. Ayrıca, Hile Sayfasına da bir göz atın (GÜNCELLEME: Maalesef hile sayfasını kaybettim. Bu nedenle, hile sayfası yok, bu makaleye ve videoya ne kadar eklesem de — ÜZGÜNÜZ!). Bu nedenle video liste dışı.

Not: Bu makalenin çoğu için, bir web mülküne piyango eklemenin resmi yolu olan Bodymovin JS kitaplıklarını değil , Web Oynatıcı yöntemini kullanıyoruz. Bunun nedeni, bu yöntemin çok daha karmaşık olması ve Oxygen Builder'a piyango eklemenin bir yolunu arıyorsanız, daha kolay yollar var. Web Player yöntemi ayrıca basit etkileşimli efektlere izin verir.

Ancak, daha fazla işlevsellik arıyorsanız, bu makalenin sizi Bodymovin entegrasyon yöntemiyle tanıştıracak olan son bölümüne gidin.

Bununla birlikte, basit bir JavaScript kitaplığı ve uygulaması kolay HTML kullanarak oksijen oluşturucu web sitenize nasıl lotti ekleyeceğiniz aşağıda açıklanmıştır.

1. Adım: Javascript'inizi ekleyin

İlk adım, uygun kitaplıkları WordPress web sitenize eklemektir. Bu, herhangi bir üçüncü taraf JavaScript kitaplığının WordPress'e dahil edilmesiyle aynı şekilde yapılır. Bu örnek bir CDN kullanır, bu nedenle bu CDN komut dosyası bağlantısını WordPress web sitenizin başlığına eklemeniz yeterlidir. Bunu yapmak için Gelişmiş Komut Dosyalarını kullanmanızı öneririz, ancak Kod Parçacıklarını da kullanabilirsiniz.

İlk kitaplık zorunludur ve sitenize loto eklemek için kullanılan yeni bir HTML öğesini kaydeden web oynatıcı kitaplığıdır.

<!– Oyuncu öğesi –>

 <script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js"></script>

İkinci kitaplık yalnızca, kullanıcı sayfayı aşağı kaydırırken piyangoyu canlandırmak gibi etkileşimli efektler uygulayacaksanız gereklidir.

<!– Etkileşim motoru –>

 <script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-interactivity.min.js"></script>

Bu komut dosyalarını Oxygen Builder Lottie Hile Sayfamızdan kopyalayıp yapıştırabilirsiniz.

Performans arıyorsanız, komut dosyasını indirerek, WordPress web sitenize yükleyerek ve ardından bir komut dosyası etiketi kullanarak veya sitenize kodlayarak kendi kendine barındırma, bunu yapmanın en iyi yoludur.

Bu komut dosyalarını yükledikten sonra, web sitenize bir piyango eklemenin zamanı geldi.

2. Adım: Oxygen Builder'a Lottie Ekleme

Basit bir Lottie veya vurgulu efektli Lottie eklemek istiyorsanız, aslında nispeten basittir. İlk önce JSON dosyasını alın ve WordPress web sitenize yükleyin. JSON yüklemelerini etkinleştirmeniz gerekecek: işte böyle.

Ardından, bir kod bloğu HTML bölümüne aşağıdakini yapıştırın:

 <lottie-player src="path.json" background="transparent" speed="1" loop autoplay></lottie-player>

SRC, herhangi bir Lottie JSON'un URL'si olabilir. LottieFiles.com web sitesi, JSON url'lerini indirmek yerine doğrudan kopyalamanıza izin veren bir CDN özelliğine sahiptir. Bu daha kolaydır, ancak sitenizde üçüncü taraf bir kaynağın kullanılmasına neden olur.

Aynı web sitesinde bu kodu sizin için yapacak bir jeneratör var. Animasyonu web sitenize nasıl entegre edeceğinizi anlamak önemlidir, ancak oluşturucuyu kullanmak size zaman kazandırabilir. Bunu yapmak için, sitede tek bir Lottie listesinin altındaki HTML düğmesini tıklamanız ve jeneratöre erişmeniz yeterlidir.

Çeşitli efektlerinizi ayarlayın ve çıktının yalnızca ikinci satırını Oxygen Builder web sitenizdeki bir kod bloğunun HTML bölümüne kopyalayın (Üçüncü taraf JavaScript'i bir CDN aracılığıyla zaten entegre ettiniz ve WordPress web sitenizin başlığına eklendi ).

Sayfayı kaydedin ve oksijen oluşturucu web sitenizin ön ucuna gidin. Lobi şimdi sayfada görüntülenecek ve çerçeveleri arasında otomatik olarak bir döngü oynayacak. Çok basit bir animasyon eklemek istiyorsanız, bunu yapmanın yolu budur. Tek bir kod satırı ve tek bir üçüncü taraf JavaScript kitaplığı. Şimdi, bu animasyonu interaktif hale getirerek bir adım daha ileri gidebilirsiniz. Yalnızca bir ziyaretçi fare imleciyle üzerine geldiğinde oynatacak şekilde veya ziyaretçi web sitenizde gezinirken çerçeveler arasında geçiş yapacak şekilde ayarlayabilirsiniz. Piyangolar bunun için bilinir ve biz şimdi bu etkiyi yaratacağız.

Adım 2.5: Lottie'yi Etkileşimli Hale Getirme

Piyango ve etkileşim el ele gider. Web oynatıcı Javascript Kitaplığı'nı kullanarak, etkileşimli efektler uygulamanıza kolayca yardımcı olmak için tasarlanmış, kurduğumuz ikinci kitaplığı kullanabiliriz.

Üzerinde gezinme

Piyangonuzun yalnızca fareyle üzerine gelindiğinde oynanmasını sağlamak için, herhangi bir ek üçüncü taraf JavaScript'e bile ihtiyacınız yoktur. Bir kod bloğuna yapıştırılan orijinal HTML'de LOOP ve HOVER (otomatik oynatmayı atlayarak) niteliklerini ayarlamanız yeterlidir:

 <lottie-player src="path.json" background="transparent" speed="1" döngü vurgusu ></lottie-player>

Kaydırmada (Gövde)

Bu, kullanıcı web sayfasının tüm yüksekliğini kaydırırken piyangoyu kare kare oynayan en sevdiğim efektlerden biridir. Bu gerçekten benzersiz çünkü animasyonu kullanıcının kaydırma hızı ve kullanıcının kaydırma yönü ile senkronize ediyor. Bunun gerçek bir örneğini görmek için Cheatsheat'imizi indirmenizi tavsiye ederim.

Bunu yapmak için, normalde yaptığınız gibi Lottie'yi ekleyin. Bunun için bir kimlik belirtin.

 <lottie-player id=”lottie” src="path.json" background="transparent" speed="1" loop hover></lottie-player>

Ardından, aynı kod bloğunun JavaScript bölümüne aşağıdakini yapıştırın:

 LottieInteractivity.create({    mode:"scroll",    player:'#lottie',    actions: [        {            visibility:[0,1],            type: "seek",            frames: [0, total # of frames],        },    ] });

Burada belirtilen kimliğin, HTML lottie oynatıcı öğesinin kimliğiyle eşleştiğinden emin olun. Bu kod, siz sayfada gezinirken piyangonuzu canlandıracaktır. Toplam kare sayısını, animasyonunuzdaki toplam kare sayısıyla eşleşecek şekilde ayarladığınızdan emin olun. Bunu lottiefiles web sitesine (eğer nereden aldıysanız) giderek ve bireysel listeyi kontrol ederek anlayabilirsiniz.

Kaydırmada (Konteyner)

Ayrıca animasyonunuzu belirli bir kapsayıcının kaydırmasıyla etkileşimli hale getirebilirsiniz.

Html'yi ekleyin ve bir kimlik belirleyin. Ardından, kod bloğunun JS bölümünde aşağıdakileri ekleyin:

 LottieInteractivity.create({    mode:"scroll",    player: "#scroll-w-container",    container: "new_columns-71-8114",    actions: [        {            visibility:[0,1],            type: "seek",            frames: [0, 450]        }    ] });

Oyuncu, piyangonun kimliğidir, kapsayıcı ise kaydırma efektlerinin etkilendiği kabın kimliğidir.

Pek çok web sitesinde kullanmayı sevdiğim çok benzersiz bir efekt, kaydırmada canlandırılan, tek bir kapsayıcıyla ilişkili olarak görünüm alanı konumuyla senkronize edilen yapışkan bir Lottie'dir. Bunu video formatında nasıl yapacağınız aşağıda açıklanmıştır:

lottiefiles web sitesinde ayrıca, bu etkileşim kitaplığının JSON tabanlı lottie ile birlikte kullanılmasına ilişkin ek rehberlik de bulunmaktadır.

Ayrıca, kodu otomatik olarak oluşturmak istiyorsanız, tek bir Lottie'ye gidin, büyük etkileşimli düğmeye tıklayın, kod sizin için doldurulacaktır. Ardından, HTML'yi oksijen içindeki bir kod bloğunun HTML bölümüne ve JavaScript'i aynı kod bloğunun JavaScript bölümüne kopyalayıp yapıştırmanız yeterlidir.

Burada, bir ID'nin önceden ayarlanmış olduğunu, ilgili JavaScript'te aynı olduğunu ve karelerin piyango dosyasındaki kare sayısıyla eşleştiğini görebilirsiniz:

Tıklamada

Üzerine tıkladığınızda Lottie animasyonunu canlandırmak istiyorsanız, bunun için alternatif bir entegrasyon yöntemi gerekir. Yukarıda bahsedilen iki JavaScript kitaplığını kullanmak yerine, bu işi halletmek için yalnızca bir tane ve biraz özel JavaScript kullanacağız. Bu, bu makalenin önceki bölümlerinde açıklanandan tamamen farklı bir yöntemdir ve biraz karmaşık hale gelebilir. Ancak, JavaScript'e hakimseniz, bu muhtemelen daha iyi bir yöntemdir.

İlk olarak, aşağıdaki JS kitaplığını WordPress web sitelerinin başlığına ekleyin (yukarıda bahsedilen ikisini atlayarak):

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie_svg.min.js"></script>

Yeni bir kod bloğu ekleyin ve içine HTML bölümüne bir div ekleyin. Div'e CSS bölümünde genişlik ve yükseklik vererek stil verin. Son olarak JavaScript bölümünde Lottie animasyonunu ayarlayacağız ve tıklandığında canlanmasını sağlayacağız.

 //the JS /* Play an animation on each click */ let checkmarksthespot = document.querySelector('.onclicklottie1'); let animationSkipForward = bodymovin.loadAnimation({ container: checkmarksthespot, renderer: 'svg', loop: false, autoplay: false, path: "https://assets7.lottiefiles.com/private_files/lf30_jgkflosi.json" }); checkmarksthespot.addEventListener('click', function() { animationSkipForward.playSegments([0,28], true); });

CSS sınıfını, JS'deki kapsayıcıyı ve yolu değiştirin. Yol, piyango animasyonunu oluşturan JSON dosyasının URL'sidir. Ayrıca, kare sayısını ayarladığınızdan emin olun, bu örnekte 28'dir.

Burada, piyangoları web sitenize entegre etmenin farklı bir yolunu görebilirsiniz. Bu, bir kullanıcının istenen bir eylemi ne zaman yaptığını anlamak için JavaScript ve olay dinleyicilerini kullanır, bu durumda piyangonun kendisine tıklar ve ardından animasyonu değiştirir. Biraz daha karmaşık, bu yüzden bu makale boyunca bahsedilmedi, ama aynı zamanda çok daha güçlü. JavaScript'i anlayan ciddi bir geliştiriciyseniz, bu tür animasyonları Oxygen Builder WordPress web sitenize entegre etmenin en iyi yolu budur.

Çözüm

Oksijen üreticisi web sitenize kullanımı kolay animasyonlar uygulamak istiyorsanız, bunu yapmanın en iyi yollarından biri Lottie dosyasını kullanmaktır. Hafiftir, video veya hediyeden çok daha iyi performans gösterir ve oldukça kolaydır. Tek yapmanız gereken yeni bir kod bloğu eklemek ve uygun kitaplıkları yüklediğiniz sürece bazı HTML ve JavaScript'leri yapıştırmaktır. Yine, herhangi bir sorunuz varsa, tamamlayıcı YouTube videomuzu izlemenizi ve Lottie gösterilerimizi oluşturan koda göz atabilmeniz için özel olarak oluşturulmuş hile sayfasını indirmenizi öneririz.