Oxygen Builder web sitesine Lottie Animation Nasıl Eklenir
Lottie, GIF ve videonun yerini almak için oluşturulan bir animasyon türüdür. Bu çok hafif ve herhangi bir web sitesi için modern ve profesyonel bir dokunuş olarak. Bu blogu yayınlarken, Oxygen Builder web sitenize nasıl bir piyango ekleyeceğinizi tartışacağız.
Diğer sayfa üreticilerinden farklı olarak, Oxygen Builder’ın web sitenize bir piyango eklemek için çok kolay orijinal entegrasyon yoktur. Bunun yerine, web sitemizi entegre etmek için kod bloğunu, iki JavaScript kütüphanesini ve bazı kopyalama ve basit macunu kullanacağız. Bu makalede, temel tekrarlama animasyonunun nasıl ekleneceğini, animasyonu sayfanızdaki kaydırma konumuyla bağlantılı olarak etkileşimli hale getireceği, yalnızca fareyi üzerine işaret ederken oynatılacağı ve hatta tıklandığında Lottie’nin animasyonunu etkinleştireceğini tartışacak.
Göreceğiniz gibi, web sitenize oksijen ile oluşturulan Lottie eklemek nispeten kolaydır ve son ürünü kullanıcılarınız için çok daha profesyonel ve çekici hale getiren benzersiz bir dokunuş ekler. En iyisi, video ve ödüllerle karşılaştırıldığında, performans üzerindeki etki tamamen anlamsızdır. Video öğreticisi yazılı öğreticiler için okumaya devam ediyor. Ayrıca, Cheatsheet’i kontrol edin (Güncelleme: Maalesef hile sayfasını kaybettim. Bu makaleye ve videoda ne kadar kursam da – üzgünüm!) Hile sayfası yok. Bu nedenle video neden kayıtlı değil.
Bu içerik gibi mi? Kanalımıza abone olun!
İzotropik’e abone olun
Not: Web özelliğine Lottie eklemenin resmi bir yolu olan Bodymovin JS kütüphanesi değil, bu makalenin çoğu için web oynatıcı yöntemini kullanıyoruz. Bunun nedeni, yöntemin çok daha karmaşık olması ve sadece oksijen üreticisine Lottie eklemenin yollarını arıyorsanız, daha kolay bir yol vardır. Web oynatıcı yöntemi de basit etkileşimli efektlere izin verir. Ancak, daha fazla işlevsellik arıyorsanız, sizi BodyMovin entegrasyon yöntemini tanıtacak bu makalenin son bölümüne gidin. Adım 1: JavaScript ekleyin İlk adım, WordPress siteniz için geçerli bir kütüphane eklemektir. Bu, WordPress’te bulunan herhangi bir üçüncü taraf JavaScript kütüphanesi ile aynı şekilde yapılır. Bu örnek CDN kullanır, bu nedenle bu CDN komut dosyası bağlantısını WordPress sitesi başlığınıza girmeniz yeterlidir. Bunu yapmak için gelişmiş komut dosyasını kullanmanızı öneririz, ancak kod görüntülerini de kullanabilirsiniz.
İlk kütüphane zorunludur ve sitenize lot eklemek için kullanılan yeni bir HTML öğesini kaydeden bir web oyuncusu kitaplığıdır.
kopyalayıp ekleyebilir Lottie Oxygen Builder Hile Sayfamızdan bu komut dosyası. Performans arıyorsanız, kendi barındırma komut dosyası indirerek, WordPress sitenize yükleyerek ve daha sonra komut dosyası etiketini kullanmak veya sitenize girmenin en iyi yoludur. Bu. Bu senaryoyu yükledikten sonra, web sitenize Lottie ekleme zamanı. Adım 2: Yalnızca temel bir lottie veya yüzen bir efektle lottie eklemek istiyorsanız, aslında oldukça basit olan oksijen oluşturucuya lottie ekleyin. İlk olarak, JSON dosyasını alın ve WordPress sitenize yükleyin. JSON’un yüklemesini etkinleştirmelisiniz: bu yol. Ardından, HTML blok kodunda aşağıdakileri yapıştırın:
src her lottie json’dan bir URL olabilir. Lottiefiles.com web sitesinde, JSON URL’sini doğrudan indirmek yerine kopyalamanıza izin veren bir CDN özelliği vardır. Bu daha kolaydır, ancak sitenizde kullanılan üçüncü taraf kaynakları üretir. Aynı web sitesinin sizin için kodu oluşturacak bir jeneratör vardır. Animasyonu web sitenize nasıl entegre edeceğinizi anlamak çok önemlidir, ancak bir jeneratör kullanmak zamanınızı tasarruf edebilir. Bunu yapmak için, sitedeki bir Lottie listesinin altındaki HTML düğmesini tıklayın ve jeneratöre erişin.
Çeşitli efektlerinizi ayarlayın ve yalnızca ikinci satırı Oxygen Builder web sitenizdeki kod bloğundan HTML bölümüne kopyalayın (CDN aracılığıyla üçüncü bir -partili JavaScript’i entegre ettiniz ve WordPress sitesi başlığınıza eklediniz).
Sayfayı kaydedin ve Oxygen Maker web sitenizin ön ucuna gidin. Lobi şimdi sayfada görüntülenecek ve çerçeveden otomatik olarak döngüler çalacak. Çok basit bir animasyon eklemek istiyorsanız, yol budur. Bir kod satırı ve üçüncü bir JavaScript kütüphanesi. Şimdi, bu animasyonu etkileşimli hale getirerek daha ileri gidebilirsiniz. Yalnızca ziyaretçiler fare imlecini en üste yönlendirdiğinde veya ziyaretçiler web sitenize göz attığında çerçeve arasında geçiş yapabilirsiniz. Lotties olarak bilinen şey budur ve bu etkiyi şimdi belirleyeceğiz.
Göreceğiniz gibi, web sitenize oksijen ile oluşturulan Lottie eklemek nispeten kolaydır ve son ürünü kullanıcılarınız için çok daha profesyonel ve çekici hale getiren benzersiz bir dokunuş ekler. En iyisi, video ve ödüllerle karşılaştırıldığında, performans üzerindeki etki tamamen anlamsızdır. Video öğreticisi yazılı öğreticiler için okumaya devam ediyor. Ayrıca, Cheatsheet’i kontrol edin (Güncelleme: Maalesef hile sayfasını kaybettim. Bu makaleye ve videoda ne kadar kursam da – üzgünüm!) Hile sayfası yok. Bu nedenle video neden kayıtlı değil.
Bu içerik gibi mi? Kanalımıza abone olun!
İzotropik’e abone olun
Not: Web özelliğine Lottie eklemenin resmi bir yolu olan Bodymovin JS kütüphanesi değil, bu makalenin çoğu için web oynatıcı yöntemini kullanıyoruz. Bunun nedeni, yöntemin çok daha karmaşık olması ve sadece oksijen üreticisine Lottie eklemenin yollarını arıyorsanız, daha kolay bir yol vardır. Web oynatıcı yöntemi de basit etkileşimli efektlere izin verir. Ancak, daha fazla işlevsellik arıyorsanız, sizi BodyMovin entegrasyon yöntemini tanıtacak bu makalenin son bölümüne gidin. Adım 1: JavaScript ekleyin İlk adım, WordPress siteniz için geçerli bir kütüphane eklemektir. Bu, WordPress’te bulunan herhangi bir üçüncü taraf JavaScript kütüphanesi ile aynı şekilde yapılır. Bu örnek CDN kullanır, bu nedenle bu CDN komut dosyası bağlantısını WordPress sitesi başlığınıza girmeniz yeterlidir. Bunu yapmak için gelişmiş komut dosyasını kullanmanızı öneririz, ancak kod görüntülerini de kullanabilirsiniz.
İlk kütüphane zorunludur ve sitenize lot eklemek için kullanılan yeni bir HTML öğesini kaydeden bir web oyuncusu kitaplığıdır.
kopyalayıp ekleyebilir Lottie Oxygen Builder Hile Sayfamızdan bu komut dosyası. Performans arıyorsanız, kendi barındırma komut dosyası indirerek, WordPress sitenize yükleyerek ve daha sonra komut dosyası etiketini kullanmak veya sitenize girmenin en iyi yoludur. Bu. Bu senaryoyu yükledikten sonra, web sitenize Lottie ekleme zamanı. Adım 2: Yalnızca temel bir lottie veya yüzen bir efektle lottie eklemek istiyorsanız, aslında oldukça basit olan oksijen oluşturucuya lottie ekleyin. İlk olarak, JSON dosyasını alın ve WordPress sitenize yükleyin. JSON’un yüklemesini etkinleştirmelisiniz: bu yol. Ardından, HTML blok kodunda aşağıdakileri yapıştırın:
src her lottie json’dan bir URL olabilir. Lottiefiles.com web sitesinde, JSON URL’sini doğrudan indirmek yerine kopyalamanıza izin veren bir CDN özelliği vardır. Bu daha kolaydır, ancak sitenizde kullanılan üçüncü taraf kaynakları üretir. Aynı web sitesinin sizin için kodu oluşturacak bir jeneratör vardır. Animasyonu web sitenize nasıl entegre edeceğinizi anlamak çok önemlidir, ancak bir jeneratör kullanmak zamanınızı tasarruf edebilir. Bunu yapmak için, sitedeki bir Lottie listesinin altındaki HTML düğmesini tıklayın ve jeneratöre erişin.
Çeşitli efektlerinizi ayarlayın ve yalnızca ikinci satırı Oxygen Builder web sitenizdeki kod bloğundan HTML bölümüne kopyalayın (CDN aracılığıyla üçüncü bir -partili JavaScript’i entegre ettiniz ve WordPress sitesi başlığınıza eklediniz).
Sayfayı kaydedin ve Oxygen Maker web sitenizin ön ucuna gidin. Lobi şimdi sayfada görüntülenecek ve çerçeveden otomatik olarak döngüler çalacak. Çok basit bir animasyon eklemek istiyorsanız, yol budur. Bir kod satırı ve üçüncü bir JavaScript kütüphanesi. Şimdi, bu animasyonu etkileşimli hale getirerek daha ileri gidebilirsiniz. Yalnızca ziyaretçiler fare imlecini en üste yönlendirdiğinde veya ziyaretçiler web sitenize göz attığında çerçeve arasında geçiş yapabilirsiniz. Lotties olarak bilinen şey budur ve bu etkiyi şimdi belirleyeceğiz.
Adım 2.5: Lottie interaktif lotre ve etkileşimi el ele geçir.Bir Web Player JavaScript kütüphanesini kullanarak, interaktif efektleri kolayca uygulamanıza yardımcı olmak için tasarladığımız ikinci kütüphaneyi kullanabiliriz. Lottie yapmak için yüzerken sadece havada oynadığınızda, ek üçüncü taraf JavaScript’e bile ihtiyacınız yoktur.Sadece kod bloğuna gönderilen orijinal HTML’de döngüyü ve havada yer almayı (otomatik rotasyonu kaldırma) ayarlayın: kaydırma (gövde) bu Kullanıcı web sayfasının tüm yüksekliğini kaydırdığında, Lottie’yi Frame ile Frame ile oynatan en sevdiğim efektlerden biri.Bu gerçekten benzersizdir, çünkü animasyonu kullanıcının ne kadar hızlı kaydırdığı ve kullanıcının yönü yuvarlanmasıyla senkronize eder.Bunun somut bir örneğini görmek için Cheatsheat’imizi indirmenizi öneririm.
Bunu yapmak için Lottie’yi her zamanki gibi ekleyin.Bunun için kimliği belirleyin. sonra, aynı kod bloğunun javascript bölümünde, aşağıdakileri yüceltin : LottieInterActivity.Create ({mode: “kaydırma”, oyuncu: ‘ # lottie’, eylemler: [{görünürlük: [0.1], “seek”, çerçeveler: [0, toplam kare #],},]} );Burada belirtilen kimliğin Lottie HTML oynatıcı öğesi kimliğiyle eşleştiğinden emin olun.Bu kod, sayfayı kaydırdığınızda Lottie’nizi cansız hale getirecektir.Toplam çerçeve miktarını animasyonunuzdaki toplam çerçeve sayısına uyacak şekilde ayarladığınızdan emin olun.Lottiefiles web sitesini ziyaret ederek (oradan alırsanız) öğrenebilir ve bireylerin listesini kontrol edebilirsiniz.
Kaydırma (kap) içinde animasyonunuzu belirli bir kap rulosu ile etkileşimli hale getirebilirsiniz. HTML ekleyin ve kimliği ayarlayın. Ardından, kod bloğunun JS bölümünde aşağıdakileri ekleyin: LottieInterActivity.create ({mod: “kaydırma”, oyuncu: “#scroll-w-container”, kapsayıcı: “new_columns-71-8114”, eylemler: [ {görünürlük: [0.1], yazın: “seek”, çerçeveler: [0, 450]}]}); Oyuncu Lottie Kimliğidir, kaplama ise kaydırma efektinden etkilenen bir konteyner kimliğidir. Birçok web sitesinde kullanmayı sevdiğim çok benzersiz bir etki, kaydırmalarda canlandırılan, bir konteynere göre ViewPort konumuna senkronize edilen yapışkan lottie’dir. Bunu video biçiminde nasıl yapacağınız aşağıda açıklanmıştır: Lottiefiles web sitesi, JSON tabanlı ve Lottie ile bu etkileşim kütüphanesinin kullanımı hakkında ek yönergelere de sahiptir. Ayrıca, otomatik olarak bir kod oluşturmak istiyorsanız, tek tek Lottie’ye gidin, büyük etkileşimli düğmeye tıklayın, kod sizin için doldurulur. Ardından, HTML’yi kod bloğunun HTML bölümüne oksijen olarak ve JavaScript’in aynı kod bloğunun JavaScript bölümüne kopyalayıp yapıştırın. Etkileşim düğmesini tıklayın, kimliğin ayarlandığını, aynı şekilde ayarlandığını görebilirsiniz. Uygun JavaScript ve çerçeve Lottie dosyasındaki kare sayısıyla eşleşiyor:
Lottie animasyonunu tıklarken canlandırmak istiyorsanız, her şey tıklandı, bu alternatif bir entegrasyon yöntemi gerektirir. Yukarıda belirtilen iki JavaScript kütüphanesini kullanmak yerine, bu çalışmayı tamamlamak için sadece bir tane ve biraz özel JavaScript kullanacağız. Bu, bu makalenin önceki bölümünde açıklanandan tamamen farklı bir yöntemdir ve biraz karmaşık olabilir. Ancak, JavaScript üzerinde bir tutuşunuz varsa, bu daha iyi bir yöntem olabilir. İlk olarak, WordPress sitesi başlığınıza aşağıdaki JS kütüphanesini ekleyin (yukarıda belirtilen ikisini kaldırın):
Yeni bir kod bloğu ekleyin ve içinde HTML bölümüne div ekleyin. Div stili, CSS bölümünde genişlik ve yükseklik verin. Son olarak, JavaScript bölümünde, Lottie animasyonunu ayarlayacağız ve tıklandığında cansız hale getireceğiz. Bu komut dosyasını gelişmiş bir komut dosyasıyla başlığınıza ekleyin
Lottie animasyonunu tıklarken canlandırmak istiyorsanız, her şey tıklandı, bu alternatif bir entegrasyon yöntemi gerektirir. Yukarıda belirtilen iki JavaScript kütüphanesini kullanmak yerine, bu çalışmayı tamamlamak için sadece bir tane ve biraz özel JavaScript kullanacağız. Bu, bu makalenin önceki bölümünde açıklanandan tamamen farklı bir yöntemdir ve biraz karmaşık olabilir. Ancak, JavaScript üzerinde bir tutuşunuz varsa, bu daha iyi bir yöntem olabilir. İlk olarak, WordPress sitesi başlığınıza aşağıdaki JS kütüphanesini ekleyin (yukarıda belirtilen ikisini kaldırın):
Yeni bir kod bloğu ekleyin ve içinde HTML bölümüne div ekleyin. Div stili, CSS bölümünde genişlik ve yükseklik verin. Son olarak, JavaScript bölümünde, Lottie animasyonunu ayarlayacağız ve tıklandığında cansız hale getireceğiz. Bu komut dosyasını gelişmiş bir komut dosyasıyla başlığınıza ekleyin
CSS ile Boyut // JS / * Her bir tıklamada bir animasyon oynat * / let checkMarksThespot = document.querysector (‘. Onclicklottie1’); Let animationsKipforward = bodymovin.loloadanimation ({kapsayıcı: checkMarksthespot, renderers: ‘svg’, döngü: false, otomatik oyun: false, yol: “https://assets7.lottiefiles.com/private_files/lf30_jgkfloi.json}); checkMarksThespot.AdDeventListener (‘Click’, function () {animationsKipforward.PlaySegments ([0.28], true);});
