Lottie Files Animation Stop Ve Play İşlemleri

Lottie Files Animation Stop Ve Play İşlemleri

Özkan Işık
1.6K Güncelleme

Lottie Files animasyonlarına şuradan ulaşabilirsiniz. lottiefiles.com

Örnek lottie files animasyonu kodu;

<lottie-player src="https://assets4.lottiefiles.com/temp/lf20_UsfnhV.json" background="transparent" speed="1" loop autoplay></lottie-player>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

Animasyon Önizleme

Yukarıda bulunan kod ile animasyon varsayılan olarak otamatik oynatılmaya başlayacaktır. Önce bunu engellememiz gerekiyor. Bunun için html kod içerisinden autoplay tagını silerek otomatik oynatmayı devre dışı bırakıyoruz. Ardından herhangi bir işlem sonrası animasyonun oynamasını istiyorsak;

$('lottie-player').get(0).play();

İşlem bittiğinde tekrar durmasını istiyorsak ise;

$('lottie-player').get(0).stop();

methodunu kullanıyoruz.

Aşağıda ki demoya gözatabilirsiniz.

See the Pen animasyon by Okan IŞIK (@viptema)on CodePen.

Tüm Ajax İstekleri Bittiğinde İşlem Yapma
Css Kullanarak Alana Sığmayan Yazıları Üç Nokta İle Kesmek

İlk Yorumu Yapan Sen Ol!

Bloglar

BLOG YAZ

Web Tasarımlar

  • media1

    Lisans Yönetim Scripti 2

    27.1K
    1440.00₺
  • media1

    Canlı Radyo Dark Scripti

    18.3K
    1440.00₺
  • media1

    Canlı Radyo Light Scripti

    11.6K
    1440.00₺
  • media1

    Rüzgar Radyo Scripti

    11K
    ₺
  • media1

    Radyo Minimal

    7.2K
    1440.00₺
  • media1

    Ekitap Scripti

    10K
    4320.00₺
  • media1

    Aşk Sevgililer GünüEvlilik

    10.4K
    1440.00₺
  • media1

    Sohbet Scripti

    10.9K
    ₺
  • media1

    Dialog Whatsapp Benzeri Sohbet

    7.1K
    ₺
  • media1

    Firebase Chat

    6.1K
    ₺
  • media1

    Web Ajans Scripti

    37.6K
    5040.00₺
  • media1

    Ajans Scripti Kolay Kullanım

    4K
    ₺
  • media1

    Ajans Scripti V2

    4K
    ₺
  • media1

    Ajans Scripti V3

    4.1K
    ₺
  • media1

    Avukat Ve Hukuk Bürosu Scripti

    3K
    ₺
  • media1

    Avukat Ve Hukuk Bürosu Web Tasarım V2

    3.7K
    ₺
  • media1

    Mobil Uyumlu Çilingir Scripti

    2.8K
    ₺
  • media1

    Kuaför Güzellik Salonu Spa Merkezi Web Tasarım

    3.6K
    ₺
  • media1

    Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı

    3K
    ₺
  • media1

    Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V2

    48.3K
    ₺
  • media1

    İlaçlama Şirketi Web Tasarımı

    7.9K
    ₺
  • media1

    İlan Web Tasarımı

    3.3K
    ₺
  • media1

    İlan Web Tasarımı V2

    3.1K
    ₺
  • media1

    İnşaat Firması Web Tasarımı

    2.7K
    ₺
  • media1

    İnşaat Firması Tasarımı V2

    2.8K
    ₺
  • media1

    Kitapçı Kırtasiye Web Tasarımı

    3.3K
    ₺
  • media1

    Kombi Klima Servisi Web Tasarımı

    3K
    ₺
  • media1

    Korku Evi Eğlence Mekanı Web Tasarımı

    3K
    ₺
  • media1

    Kurumsal Firma Web Tasarımı V2

    4.2K
    ₺
  • media1

    Kurumsal Firma Web Tasarımı V3

    4.3K
    ₺
  • media1

    Ajans Web Tasarımı V4

    3.3K
    ₺
  • media1

    Kurumsal Firma Web Tasarımı V4

    3.9K
    ₺
  • media1

    Kurumsal Firma Web Tasarımı V5

    4.5K
    ₺
  • media1

    Kurumsal Firma Web Tasarımı V6

    4.1K
    ₺
  • media1

    Kurumsal Firma Web Tasarımı V7

    4.4K
    ₺
  • media1

    Kurumsal Firma Web Tasarımı V8

    3.9K
    ₺
  • media1

    Mobilya Dekorasyon Web Tasarımı

    3.6K
    ₺
  • media1

    Nakliyat Taşımacılık Web Tasarımı

    3K
    ₺
  • media1

    Nakliyat Taşımacılık Web Tasarımı V2

    3.4K
    ₺
  • media1

    Nakliyat Taşımacılık Web Tasarımı V3

    3.6K
    ₺
  • media1

    Ana Okulu Ve Kreş Web Tasarımı

    3K
    ₺
  • media1

    Otel Pansiyon Web Tasarımı

    3.1K
    ₺
  • media1

    Özel Oto Servis Web Tasarımı

    2.9K
    ₺
  • media1

    Rent A Car Araç Kiralama Web Tasarımı

    7.6K
    ₺
  • media1

    Rent A Car Araç Kiralama Web Tasarımı V2

    4.4K
    ₺
  • media1

    Restaurant Cafe Bar Lokanta Web Tasarımı

    3.7K
    ₺
  • media1

    Restaurant Cafe Bar Lokanta Web Tasarımı V2

    3.5K
    ₺
  • media1

    Teknik Servis Web Tasarımı

    3.6K
    ₺
  • media1

    Sigorta Acenta Web Tasarımı

    3K
    ₺
  • media1

    Spor Salonu Body Fitness Web Tasarımı

    3.2K
    ₺
  • media1

    Spor Salonu Body Fitness Web Tasarımı V2

    3.6K
    ₺
  • media1

    Sürücü Kursu Web Tasarımı

    3.7K
    ₺
  • media1

    Tek Ürün Satış Web Tasarımı

    3.8K
    ₺
  • media1

    Tek Ürün Satış Web Tasarımı V2

    3.6K
    ₺
  • media1

    Tek Ürün Yaprak Web Tasarımı

    3.3K
    ₺
  • media1

    Tek Ürün Yaprak Web Tasarımı V2

    3.7K
    ₺
  • media1

    Tek Ürün Satış Web Tasarımı V3

    3.5K
    ₺
  • media1

    Temizlik Şirketi Web Tasarımı

    3.5K
    ₺
  • media1

    Temizlik Şirketi Web Tasarımı V2

    3.6K
    ₺
  • media1

    Ajans Web Tasarımı V5

    4K
    ₺
  • media1

    Ajans Web Tasarımı V6

    5.2K
    ₺
  • media1

    Werock Radyo Web Tasarımı

    5.3K
    1440.00₺
  • media1

    Avukat Ve Hukuk Bürosu Tasarımı V3

    2.3K
    ₺
  • media1

    Kuaför Güzellik Salonu Spa Merkezi Web Tasarımı V2

    2.3K
    ₺
  • media1

    Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V3

    7.7K
    ₺
  • media1

    İnşaat Firması Web Tasarımı V3

    2.2K
    ₺
  • media1

    Kurumsal Firma Web Tasarımı V9

    2.5K
    ₺
  • media1

    Mimarlık Web Tasarımı

    2.1K
    ₺
  • media1

    Nakliyat Taşımacılık Web Tasarımı V4

    2.6K
    ₺
  • media1

    Ana Okulu Ve Kreş Web Tasarımı V2

    2.2K
    ₺
  • media1

    Psikolog Web Tasarımı

    2.7K
    ₺
  • media1

    Spor Salonu Body Fitness Web Tasarımı V3

    2.6K
    ₺
  • media1

    Sürücü Kursu Web Tasarımı V2

    2.7K
    ₺
  • media1

    Teknik Servis Web Tasarımı V3

    3.2K
    ₺
  • media1

    Ajans Web Tasarımı V7

    2.9K
    ₺
  • media1

    Google Indexing Api

    2.8K
    720.00₺
  • media1

    Milando Radyo Wordpress Teması

    3.6K
    1440.00₺