Studio Editor: Özel Tıklama veya Üzerine Gelme Etkileşimi Oluşturma

6 dakikalık okuma
Ziyaretçiler ögelere tıkladığında veya üzerine geldiğinde animasyonlu bir deneyim oluşturmak için Etkileşimler ekleyin. Etkileşim, onu tetikleyen aynı ögeye veya sayfadaki herhangi bir başka ögeye animasyon ekleyebilir.
Özel etkileşimlerle, sıfırdan bir animasyon tasarlarken tamamen özgürsünüz.Ayrıca animasyonun etkili olmasını sağlamak için zamanlamasını kontrol edebilirsiniz. 
Canlı bir sitede üzerinde gezinme etkileşimlerine bir örnek

1. Adım | Bir tetikleyici (tıklama / üzerine gelme) ekleyin

Etkileşimi tetikleyen ögeyi seçerek başlayın. Bu, ziyaretçilerin animasyonu görmeden önce üzerine geldiği veya tıkladığı ögedir. Ardından yeni etkileşim eklemek için Denetçi panelindeki Etkileşimler sekmesine gidin. 
İpucu:
Bir ögeye birden fazla etkileşim ekleyerek tıklama ve üzerine gelme durumlarında farklı animasyonların tetiklenmesini sağlayabilirsiniz.

Bir tetikleyici eklemek için:

  1. Etkileşimin uygulanacağı ögeye tıklayın.
  2. Editörün sağ üstündeki Denetçiyi Aç okuna  tıklayın.
  3. Etkileşimler sekmesine tıklayın.
  4. Üzerine gelme / Tıklama simgesini seçin.
  5. +Ekle'ye tıklayın. 
Denetçi panelindeki etkileşimler sekmesi, yeni bir üzerine gelme veya tıklama etkileşimi ekler

2. Adım | Etkileşimi ayarlama

Artık hangi ögeye animasyon ekleneceğini, görünmesi gereken animasyonu ve üzerine gelindiğinde veya tıklandığında gerçekleşecek eylemi (ör. animasyonu uygula, aç/kapat, vb.) seçebilirsiniz.

Etkileşimi ayarlamak için:

  1. Üzerine gelindiğinde / Tıklandığında açılır menüsünden bir seçenek belirleyin:
    • Animasyon Başlat: Ögeye tıklandığında / üzerine gelindiğinde seçilen animasyon tetiklenir.
    • Açık/Kapalı: Açma/kapama düğmelerine benzer şekilde, ögeye tıklandığında animasyon tetiklenirken ikinci tıklamada öge kaldırılır.
    • Animasyonu Sıfırla: Ögeye tıklandığında / üzerine gelindiğinde daha önce uygulanmış tüm animasyonlar kaldırılır.
  2. Animasyon ögeleri açılır menüsünden bir seçenek belirleyin:
    • Ögenin kendi animasyonunu tetiklemesini sağlayın: (Yanında (kendisi) ifadesi bulunan) Öge adına tıklayın.
    • Sayfada farklı bir ögeye animasyon ekleyin: Açılır menüden bir öge seçin veya sayfadan Tuvalde Seç'e tıklayın.
      İpucu: Bir alt öge seçmek için Cmd / Ctrl tuşuna basılı tutun.
  3. Özel sekmesine tıklayın. 
  4. Özel Animasyon Oluştur'a tıklayın.
İpucu:
Oluşturduğunuz özel animasyonlar, gelecekte diğer ögelerde kullanılmak üzere kaydedilir. 
Henüz kaydedilmiş herhangi bir animasyonunuz olmadığında, özel sekmenin ekran görüntüsü

3. Adım | Animasyonu özelleştirme

Şimdi animasyonu sıfırdan oluşturma zamanı. Ögenin boyutunu (Ölçek), konumunu (Ötele), açısını (Döndür), dolgu rengini ve daha fazlasını değiştirmek için her türlü düzen ve tasarım dönüşümünü ekleyin. 
Ayrıca, ögenin ilk durumunu oluşturduğunuz animasyonu tamamlayacak şekilde tasarlayabilirsiniz. Ziyaretçiler ögeyle etkileşime geçmeden önce öge yüklendiğinde böyle görünür. Animasyonun süresini ve hareket kolaylığını ayarlayın. 

Bir animasyonu özelleştirmek için:

  1. Animasyonu nasıl özelleştirmek istediğinizi seçin:
2.   (İsteğe Bağlı) Animasyonunuzu önizlemek için kayan çubuktaki Oynat simgesine  tıklayın.
3. Hazır olduğunuzda Tamam'a tıklayın.
Tuvalde animasyonun önizlemesini gösteren bir GIF
İpucu:
Ögeleri tıklandığında veya üzerine gelindiğinde gösterilecek şekilde ayarlarken, tuvalde damalı bir kaplama ile görünür. Burada ögenin başlangıçta şeffaf olduğunu belirtmek isteriz. 
Studio Editor'de tuvalde damalı kaplama ile görünen, üzerine gelindiğinde görünecek bir düğme

Bu göstergeyi istediğiniz zaman kapatabilirsiniz. Wix Studio simgesine tıklayın, Görünüm'ün üzerine gelin ve Şeffaf Ögeler'e tıklayın.

SSS

Etkileşim oluşturma hakkında daha fazla bilgi edinmek için aşağıdaki başlıklara tıklayın. 

Bu içerik yardımcı oldu mu?

|