Tutorial mengenai paparan awal dan kegigihan kandungan scrolltrigger

Tutorial ini direka untuk menyelesaikan masalah yang kandungan dinamik tidak muncul sebelum menatal atau hilang selepas menatal apabila menggunakan scrolltrigger Greensock. Kami akan menyelam bagaimana untuk memastikan bahawa elemen kandungan pertama dapat dilihat dengan segera apabila halaman dimuatkan, dan bincangkan bagaimana toggleactions Scrolltrigger mempengaruhi kegigihan kandungan semasa menatal. Dengan mengoptimumkan permulaan animasi dan memahami tingkah laku pencetus, anda boleh membuat animasi yang didorong oleh tatal pengalaman pengguna yang lebih lancar dan lebih baik.

Mengoptimumkan Paparan Kandungan Scrolltrigger: Keadaan awal dan kegigihan

Apabila mencipta animasi yang didorong oleh tatal dengan Greensock Scrolltrigger, keperluan yang sama adalah untuk memastikan kandungan tertentu dapat dilihat dengan segera apabila halaman dimuatkan dan masih dapat dilihat selepas menatal melalui kawasan tertentu. Secara lalai, jika keadaan awal elemen kandungan ditetapkan kepada tersembunyi (mis. Autoalpha: 0) dan animasi paparannya pasti akan menelan, maka kandungan tidak akan dipaparkan sehingga pengguna mula menatal. Begitu juga, jika toggleactions animasi tidak ditetapkan dengan betul, kandungan mungkin hilang lagi selepas menatal melalui kawasan pencetusnya.

Analisis Masalah: Menyembunyikan awal dan hilang selepas menatal

Dalam kod contoh yang disediakan, semua. Elemen Konten diasaskan kepada Tersembunyi oleh GSAP.Set ('. Kandungan', {Autoalpha: 0}). Selepas itu, animasi paparan setiap elemen kandungan (.content-i) (set (relevanContent, {autoalpha: 1}, 0)) bersarang dalam smalltimeline dan dikawal oleh contoh scrolltrigger yang berasingan. Scrolltriggers ini menggunakan toggleactions: "Main main main terbalik".

Persediaan ini membawa kepada dua masalah utama:

1. Kandungan awal tidak dapat dilihat: Oleh kerana semua kandungan telah disembunyikan, dan animasi paparan kandungan pertama akan dimainkan hanya apabila menatal ke kedudukan permulaannya, skrin akan kosong apabila halaman dimuatkan dan pengguna tidak menatal.
2. Kandungannya hilang selepas menatal: toggleactions: "main main main terbalik" bermaksud:
   • ONEnter: Mainkan animasi.
   • Onleave: Memainkan animasi secara terbalik.
   • OnEnterback: Mainkan animasi.
   • Onleaveback: Memainkan animasi secara terbalik. Ini bermakna apabila menatal melalui kawasan pencetus elemen kandungan, kandungan akan dipaparkan; Tetapi apabila menatal keluar dari kawasan itu, animasi akan bermain ke belakang, menyebabkan kandungan tersembunyi lagi. Ini bertentangan dengan keperluan untuk "menyimpan kandungan terakhir yang dapat dilihat".

Penyelesaian 1: Pastikan kandungan pertama pada mulanya dapat dilihat

Untuk menyelesaikan masalah pertama, iaitu, biarkan elemen kandungan pertama dipaparkan apabila halaman dimuatkan, kita perlu dengan jelas menetapkan keadaan awalnya di luar logik animasi scrolltrigger. Animasi GSAP adalah deklaratif. Sekiranya keadaan awal unsur ditetapkan untuk disembunyikan, ia akan tetap tersembunyi sehingga terdapat arahan animasi untuk mengubahnya.

Cara yang paling mudah adalah untuk menetapkan harta autoalpha kepada 1 sebelum semua definisi scrolltrigger dan animasi, atau sekurang -kurangnya sebelum smalltimeline elemen kandungan pertama dibuat.

 // Dapatkan elemen kandungan pertama const firstContentElement = document.QuerySelector ('div.content-0');

// Gunakan gsap untuk menetapkan penglihatannya dengan segera gsap.set (firstContentElement, {autoalpha: 1});

// atau, jika anda ingin memaparkannya dalam animasi (walaupun ini adalah keadaan awal, biasanya ditetapkan secara langsung)
// gsap.timeline (). ke (firstContentElement, {autoalpha: 1}, 0);

Letakkan coretan kod ini selepas gsap.set ('. Kandungan', {autoalpha: 0}), tetapi sebelum tajuk utama.

Contoh kod JavaScript yang dioptimumkan:

 // 1. Pada mulanya menetapkan segala -galanya untuk menyembunyikan gsap.set ('. Kandungan', {autoalpha: 0});

// 2. Pastikan kandungan pertama dapat dilihat dengan segera apabila halaman memuatkan const firstContentElement = document.QuerySelector ('div.content-0');
jika (firstContentElement) {// periksa sama ada elemen wujud dan meningkatkan kekukuhan gsap.set (firstContentElement, {autoalpha: 1});
}

var headlines = gsap.utils.toArray (". teks");
var totalDuration = 8000;
var singleduration = totalDuration / headlines.length;

const linetimeline = gsap.timeline ();

Scrolltrigger.create ({
    Pencetus: ".pin-up",
    Mula: "atas atas",
    akhir: "=" totalduration,
    // penanda: benar, // untuk debugging, keluarkan pin: benar,
    Gosok: Benar,
    Animasi: Linetimeline,
});

Headlines.Foreach ((elem, i) => {
    const SmallTimeline = gsap.timeline ();
    const content = document.QuerySelector ('. content-wrap');
    const relevanContent = content.QuerySelector ('div.content-' i);

    Scrolltrigger.create ({
        Pencetus: "badan",
        Mula: "Top -=" (singleduration * i),
        Akhir: "=" Singleduration,
        Animasi: Smalltimeline,
        // 3. Laraskan toggleActions untuk mengawal ketekunan kandungan // Jika kandungan perlu tetap kelihatan setelah menatal, anda boleh mengubah suai tetapan ini // sebagai contoh: untuk kandungan terakhir, anda boleh menetapkannya untuk "bermain tidak ada" atau "bermain tidak ada"
        // atau, jika semuanya harus kelihatan, logik yang lebih kompleks atau toggleactions yang berbeza diperlukan
        toggleActions: "Main main main terbalik", // tetapan asal, akan menyebabkan kandungan hilang});

    Smalltimeline
        .to (elem, {durasi: 0.25, warna: "oren"}, 0)
        .to (elem.firstchild, {durasi: 0.25, latar belakangColor: "oren", lebar: "50px"}, 0)
        .set (relevanContent, {autoalpha: 1}, 0); // tunjukkan kandungan pada permulaan garis masa});

Penyelesaian 2: Pastikan kandungan terakhir tahan lama dan kelihatan

Untuk menyelesaikan masalah kedua, "Simpan kandungan terakhir yang masih dapat dilihat selepas menatal", kita perlu memahami mekanisme toggleactions. Lalai "Main Reverse Play Reverse" menyebabkan kandungan menjadi animasi terbalik dan tersembunyi ketika meninggalkan kawasan pencetus.

Sekiranya matlamatnya adalah untuk memastikan segala -galanya dapat dilihat selepas ia dipaparkan, atau jika hanya kandungan terakhir yang dapat dilihat, terdapat beberapa strategi:

1. Ubah suai toggleActions:

   • Untuk semua kandungan, jika anda mahu mereka tetap kelihatan setelah dipaparkan, anda boleh menetapkan toggleActions untuk "bermain tiada". Ini bermakna bahawa animasi hanya akan dimainkan sekali apabila memasuki dan tidak akan diterbalikkan apabila pergi.
   • Jika anda hanya mahu kandungan terakhir tetap kelihatan, anda boleh menambah penghakiman bersyarat dalam tajuk utama.foreach Loop:

      Scrolltrigger.create ({
         Pencetus: "badan",
         Mula: "Top -=" (singleduration * i),
         Akhir: "=" Singleduration,
         Animasi: Smalltimeline,
         toggleActions: (i === headlines.length - 1)? "Main Tiada Main Tiada": "Main main terbalik terbalik",
     });

     Di sini, "Main Tiada Main Tidak ada" bermaksud bermain ketika masuk, tidak melakukan apa -apa ketika meninggalkan, bermain ketika masuk secara terbalik, dan tidak melakukan apa -apa ketika meninggalkan sebaliknya. Ini memastikan bahawa kandungan terakhir kekal dalam keadaan terakhirnya selepas kawasan pencetus berakhir (Autoalpha: 1).

2. Jangan gunakan Autoalpha: 0 Pada mulanya Sembunyikan: Jika kandungan dilapisi dan anda mahu mereka dipaparkan dan dipegang satu persatu, anda boleh mempertimbangkan menetapkan Autoalpha: 0 di seluruh dunia. Sebaliknya, buat setiap elemen kandungan kelihatan secara lalai, dan kemudian gunakan animasi untuk memindahkannya keluar dari skrin atau menukar gaya mereka. Walau bagaimanapun, untuk senario Autoalpha dalam contoh ini, mengubahsuai pengubahsuaian lebih langsung.

3. Kawalan Kawalan dengan garis masa utama: Untuk senario yang lebih kompleks, kawalan autoalpha untuk semua kandungan boleh diintegrasikan ke dalam linetimeline garis masa utama dan dikawal dengan tepat untuk paparan dan menyembunyikan setiap kandungan berdasarkan kemajuan menatal, dan bukannya bergantung pada pelbagai gulungan bebas.

Ringkasan dan langkah berjaga -jaga

• Pengurusan negeri awal adalah kunci: apa -apa yang perlu dipaparkan dengan serta -merta harus ditetapkan dalam penglihatan awal di luar logik animasi scrolltrigger melalui gsap.set () atau secara langsung dalam CSS.
• Memahami ToggleActions: Memahami Empat Parameter Toggleactions (OneNenter, Onleave, OnEnterback, OnLeaveback) adalah penting untuk mengawal tingkah laku animasi dalam peristiwa menatal.
• Alat Debugging: Semasa proses pembangunan, menggunakan penanda: Benar, anda boleh melihat intuitif dan titik akhir Scrolltrigger, yang sangat membantu untuk debugging tingkah laku animasi.
• Pertimbangan Prestasi: Walaupun animasi dalam contoh ini agak mudah, untuk animasi yang didorong oleh tatal yang lebih kompleks, perhatian harus dibayar untuk mengoptimumkan prestasi, seperti mengelakkan melakukan banyak operasi DOM atau pengiraan mahal dalam peristiwa tatal.

Melalui kaedah di atas, anda dapat menyelesaikan masalah paparan awal dan kegigihan kandungan dalam Scrolltrigger, dengan itu mewujudkan pengalaman animasi menatal yang lebih sesuai dengan jangkaan pengguna dan keperluan reka bentuk.

Atas ialah kandungan terperinci Tutorial mengenai paparan awal dan kegigihan kandungan scrolltrigger. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!