Animasi yang didorong oleh tatal adalah hebat! Mereka adalah alat yang berkuasa yang membolehkan pemaju mengikat pergerakan dan transformasi elemen terus ke kedudukan tatal pengguna. Teknik ini membuka cara baru untuk mencipta pengalaman interaktif, menyentuh imej untuk muncul, teks untuk meluncur melintasi panggung, dan latar belakang untuk beralih secara halus. Digunakan dengan teliti, animasi yang didorong oleh tatal (SDA) boleh membuat laman web anda berasa lebih dinamik, menarik, dan responsif.

Beberapa minggu yang lalu, saya bermain-main dengan animasi yang didorong oleh tatal, hanya mencari segala macam perkara rawak yang boleh anda lakukan dengannya. Ketika itulah saya datang dengan idea untuk menghidupkan teks tajuk utama (H1) dan, menggunakan SDA, tukar tajuk itu sendiri berdasarkan kedudukan tatal pengguna pada halaman. Dalam artikel ini, kita akan memecahkan idea itu dan membina semula langkah demi langkah. Ini adalah arah umum yang akan kita jalani, yang kelihatan lebih baik dalam skrin penuh dan dilihat dalam pelayar kromium:

Adalah penting untuk diperhatikan bahawa kesan dalam contoh ini hanya berfungsi dalam pelayar yang menyokong animasi yang didorong oleh tatal. Di mana SDA tidak disokong, terdapat sandaran yang tepat untuk tajuk statik. Dari perspektif aksesibiliti, jika penyemak imbas telah mengurangkan gerakan yang didayakan atau jika halaman itu diakses dengan teknologi bantuan, kesannya dilumpuhkan dan pengguna mendapat semua kandungan dalam cara semantik dan boleh diakses sepenuhnya.

Hanya nota cepat: Pendekatan ini bergantung pada beberapa "nombor sihir" untuk kerangka utama, yang akan kita bicarakan kemudian. Walaupun mereka sangat responsif, kaedah ini sangat sesuai untuk kandungan statik, dan ia tidak sesuai untuk laman web yang sangat dinamik.

Melihat lebih dekat pada animasi

Sebelum kita menyelam ke dalam animasi yang didorong oleh tatal, mari kita ambil satu minit untuk melihat animasi teks itu sendiri, dan bagaimana ia berfungsi. Ini berdasarkan idea yang saya ada beberapa tahun lalu apabila saya ingin membuat kesan mesin taip. Pada masa itu, kebanyakan kaedah yang saya dapati melibatkan animasi lebar elemen, yang diperlukan menggunakan font monospace, atau latar belakang warna pepejal. Tidak ada yang benar -benar bekerja untuk saya. Oleh itu, saya mencari jalan untuk menghidupkan kandungan itu sendiri, dan penyelesaiannya, seperti yang sering, dalam unsur-unsur pseudo.

Pseudo-elements mempunyai harta kandungan, dan anda boleh (jenis) menghidupkan teks itu. Ia bukan animasi yang betul, tetapi anda boleh menukar kandungan secara dinamik. Bahagian yang sejuk adalah bahawa satu -satunya perkara yang berubah adalah teks itu sendiri, tidak ada cara lain yang diperlukan.

Mulakan dengan asas yang kukuh

Sekarang anda tahu helah di sebalik animasi teks, mari kita lihat bagaimana untuk menggabungkannya dengan animasi yang didorong oleh tatal, dan pastikan kami mempunyai sandaran yang kukuh dan boleh diakses juga.

Kami akan bermula dengan beberapa markup semantik asas. Saya akan membungkus semuanya dalam elemen utama, dengan bahagian individu di dalamnya. Setiap bahagian mendapat tajuk dan kandungannya sendiri, seperti teks dan imej. Untuk contoh ini, saya telah menyediakan empat bahagian, masing -masing dengan sedikit teks dan beberapa imej, semua tentang warna utama.

<main>
  <section>
    <h1>Warna utama</h1>
    <p>Tiga warna utama (merah, biru, dan kuning) membentuk asas semua warna lain pada roda warna. Mencampurkannya dalam kombinasi yang berbeza menghasilkan pelbagai warna.</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228405842915.jpg" class="lazy" alt="Tajuk melekit yang didorong oleh tatal">
  </section>
  
  <section>
    <h2>Kuasa merah</h2>
    <p>Merah adalah warna yang berani dan bersemangat, melambangkan tenaga, semangat, dan kehangatan. Ia mudah menarik perhatian dan sering dikaitkan dengan emosi yang kuat.</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406079019.jpg" class="lazy" alt="Tajuk melekit yang didorong oleh tatal">
  </section>
  
  <section>
    <h2>Tenang biru</h2>
    <p>Biru adalah warna yang tenang dan sejuk, mewakili ketenangan, kestabilan, dan kepercayaan. Ia membangkitkan imej langit dan laut, mewujudkan suasana yang damai.</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406146761.jpg" class="lazy" alt="Tajuk melekit yang didorong oleh tatal">
  </section>
  
  <section>
    <h2>Kegembiraan kuning</h2>
    <p>Kuning adalah warna yang cerah dan ceria, berdiri untuk cahaya, keyakinan, dan kreativiti. Ia sangat kelihatan dan membawa rasa kebahagiaan dan harapan.</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406273727.jpg" class="lazy" alt="Tajuk melekit yang didorong oleh tatal">
  </section>
</main>

Bagi gaya, saya tidak melakukan apa -apa yang istimewa pada peringkat ini, hanya asas -asas. Saya menukar fon dan menyesuaikan saiz teks dan tajuk, sediakan paparan untuk bahagian utama dan bahagian, dan menetapkan saiz imej dengan objek yang sesuai.

Oleh itu, pada ketika ini, kami mempunyai tapak mudah dengan kandungan statik, semantik, dan boleh diakses, yang hebat. Sekarang matlamatnya adalah untuk memastikan ia tetap seperti itu ketika kami mula menambah kesan kami.

Tajuk pertama kedua

Kami akan mulakan dengan menambah elemen H1 yang lain di bahagian atas utama. Unsur baru ini akan berfungsi sebagai pemegang tempat untuk teks animasi kami, mengemaskini mengikut kedudukan tatal pengguna. Dan ya, saya tahu sudah ada H1 di bahagian pertama; Tidak mengapa dan kami akan mengatasinya dalam seketika supaya hanya satu yang boleh diakses pada satu masa.

<h1 aria-hidden="true"> Warna utama</h1>

Perhatikan bahawa saya telah menambah aria tersembunyi = "benar" ke tajuk ini, jadi ia tidak akan diambil oleh pembaca skrin. Sekarang saya boleh menambah kelas khusus untuk pembaca skrin, .sronly, ke semua tajuk lain. Dengan cara ini, sesiapa yang melihat kandungan "biasanya" akan melihat hanya tajuk animasi, sementara pengguna teknologi bantuan akan mendapat tajuk semantik biasa, statik.

Nota: Gaya untuk kelas .sronly didasarkan pada "tersembunyi secara inklusif" oleh Scott O'Hara.

Mengendalikan sokongan

Seperti yang penting, ada kebimbangan yang perlu kita ingat: sokongan. Animasi yang didorong oleh CSS adalah hebat, tetapi mereka masih tidak disokong sepenuhnya di mana-mana. Itulah sebabnya penting untuk menyediakan versi statik untuk penyemak imbas yang tidak menyokong SDA.

Langkah pertama ialah menyembunyikan tajuk animasi yang kami tambahkan menggunakan paparan: Tiada. Kemudian, kami akan menambah blok @supports baru untuk memeriksa sokongan SDA. Di dalam blok itu, di mana SDA disokong, kita boleh menukar kembali paparan untuk tajuk.

Kelas .sronly juga harus bergerak ke blok @supports, kerana kita hanya mahu ia memohon apabila kesannya aktif, bukan apabila ia tidak disokong. Dengan cara ini, seperti teknologi bantuan, sesiapa yang melawat halaman dalam penyemak imbas tanpa sokongan SDA masih akan mendapat kandungan statik.

 .ScrolldrivenHeading {
  Paparan: Tiada;
}

@Supports (Animation-Timeline: Scroll ()) {
  .ScrolldrivenHeading {
    paparan: blok;
  }
  
  / * Pembaca skrin sahaja */
  .sronly {
    Klip: Rect (0 0 0 0); 
    Clip-Path: Inset (50%);
    Ketinggian: 1px;
    Limpahan: Tersembunyi;
    Kedudukan: Mutlak;
    ruang putih: nowrap; 
    lebar: 1px;
  }
}

Dapatkan melekit

Perkara seterusnya yang perlu kita lakukan ialah mengendalikan keterangan tajuk. Untuk memastikan tajuk sentiasa kekal di skrin, kami akan menetapkan kedudukannya untuk melekit dengan atas: 0 supaya ia melekat pada bahagian atas viewport.

Walaupun kita berada di sana, mari kita tambahkan beberapa gaya asas, termasuk latar belakang supaya teks tidak menggabungkan dengan apa sahaja di belakang tajuk, sedikit padding untuk jarak, dan ruang putih: nowrap untuk mengekalkan tajuk pada satu baris.

 / * di dalam blok @supports */
.ScrolldrivenHeading {
  paparan: blok;
  Kedudukan: melekit;
  Atas: 0;
  imej latar belakang: gradien linear (0deg, telus, hitam 1em);
  Padding: 0.5em 0.25EM;
  ruang putih: nowrap;
}

Sekarang semuanya disediakan: Dalam keadaan biasa, kita akan melihat satu tajuk melekit di bahagian atas halaman. Dan jika seseorang menggunakan teknologi bantuan atau penyemak imbas yang tidak menyokong SDA, mereka masih akan mendapat kandungan statik biasa.

Sekarang kita sudah bersedia untuk memulakan animasi teks. Hampir…

Nombor sihir

Untuk membina animasi teks, kita perlu tahu dengan tepat di mana teks harus berubah. Dengan SDA, menatal pada dasarnya menjadi garis masa kita, dan kita perlu menentukan titik tepat pada garis masa itu untuk mencetuskan animasi.

Untuk menjadikannya lebih mudah, dan untuk membantu anda menentukan kedudukan tersebut, saya telah menyediakan skrip berikut:

 @Property --croll-kedudukan {
  Sintaks: "<number> ";
  Warisan: palsu;
  nilai awal: 0;
}

body :: selepas {
  Reset Counter: SP var (-kedudukan tatal);
  Kandungan: Kaunter (SP) "%";
  Kedudukan: Tetap;
  Atas: 0;
  Kiri: 0;
  Padding: 1em;
  latar belakang warna: Maroon;
  Animasi: Langkah Scrollposition (100);
  Animasi-masa: tatal ();
}

@KeyFrames Scrollposition {
  0% {--scroll-position: 0; }
  100% {--scroll-position: 100; }
}</number>

Saya tidak mahu terlalu mendalam ke dalam kod ini, tetapi idea itu adalah untuk mengambil garis masa tatal yang sama yang akan kami gunakan di sebelahnya untuk menghidupkan teks, dan menggunakannya untuk menghidupkan harta tersuai (--Croll-posisi) dari 0 hingga 100 berdasarkan kemajuan tatal, dan paparkan nilai dalam kandungan.

Jika kami akan menambah ini pada permulaan kod kami, kami akan melihat dataran merah kecil di sudut kiri atas skrin, menunjukkan kedudukan tatal semasa sebagai peratusan (untuk memadankan kerangka key). Dengan cara ini, anda boleh tatal ke mana -mana bahagian yang anda mahu dan mudah menandakan peratusan di mana setiap tajuk harus bermula.

Dengan kaedah ini dan sedikit percubaan dan kesilapan, saya mendapati bahawa saya mahu tajuk berubah pada 30%, 60%, dan 90%. Jadi, bagaimana sebenarnya kita melakukannya? Mari mulakan animasi.

Teks animasi

Pertama, kami akan membersihkan kandungan di dalam elemen .scrolldrivenheading supaya ia kosong dan siap untuk kandungan dinamik. Di CSS, saya akan menambah elemen pseudo ke tajuk, yang akan kami gunakan untuk menghidupkan teks. Kami akan memberikan kandungan kosong, menetapkan nama animasi, dan tentu saja, tetapkan masa animasi untuk menatal ().

Dan kerana saya menghidupkan harta kandungan, yang merupakan jenis diskret, ia tidak beralih dengan lancar antara nilai. Ia hanya melompat dari satu ke yang seterusnya. Dengan menetapkan harta animasi-masa-fungsi untuk melangkah, saya pastikan setiap perubahan berlaku tepat pada kerangka utama yang saya tentukan, jadi teks beralih tepat di mana saya mahu, bukannya di antara.

 .ScrolldrivenHeading {
  / * gaya */

  & :: selepas {
    Kandungan: '';
    Nama Animasi: HeadingContent;
    Animasi-Timing-Function: Step-end;
    Animasi-masa: tatal ();
  }
}

Bagi kerangka utama, bahagian ini cukup mudah (untuk sekarang). Kami akan menetapkan bingkai pertama (0%) ke tajuk pertama, dan memberikan tajuk lain kepada peratusan yang kami dapati sebelum ini.

 @KeyFrames HeadingContent {
  0% {Content: 'Warna Utama'}
  30% {kandungan: 'kuasa merah'}
  60% {kandungan: 'biru tenang'}
  90%, 100% {Content: 'Yellow Joy'}
}

Jadi, sekarang kami mempunyai laman web dengan tajuk melekit yang kemas kini semasa anda menatal.

Tetapi tunggu, sekarang ia hanya beralih dengan serta -merta. Di mana animasi?! Di sinilah ia menarik. Oleh kerana kita tidak menggunakan JavaScript atau mana -mana manipulasi rentetan, kita perlu menulis kerangka key kami. Pendekatan terbaik adalah bermula dari tajuk sasaran yang anda ingin capai, dan membina ke belakang. Jadi, jika anda ingin menghidupkan antara tajuk pertama dan kedua, ia akan kelihatan seperti ini:

 @KeyFrames HeadingContent {
  0% {Content: 'Warna Utama'}
  
  9% {kandungan: 'warna primer'}
  10% {kandungan: 'colo primer'}
  11% {kandungan: 'col primer'}
  12% {kandungan: 'primer co'}
  13% {kandungan: 'primer c'}
  14% {kandungan: 'primer'}
  15% {kandungan: 'primer'}
  16% {kandungan: 'primar'}
  17% {kandungan: 'prima'}
  18% {kandungan: 'prim'}
  19% {kandungan: 'pri'}
  20% {kandungan: 'pr'}
  21% {kandungan: 'P'}
  
  22% {kandungan: 'r'}
  23% {kandungan: 're'}
  24% {kandungan: 'merah'}
  25% {kandungan: 'merah'}
  26% {kandungan: 'merah p'}
  27% {kandungan: 'merah po'}
  28%{kandungan: 'merah pow'}
  29% {content: 'red powe'}
  
  30% {kandungan: 'kuasa merah'}
  60% {kandungan: 'biru tenang'}
  90%, 100% {Content: 'Yellow Joy'}
}

Saya hanya kembali sebanyak 1% setiap kali, mengeluarkan atau menambah surat yang diperlukan. Perhatikan bahawa dalam kes lain, anda mungkin mahu menggunakan saiz langkah yang berbeza, dan tidak selalu 1%. Sebagai contoh, pada tajuk yang lebih lama dengan lebih banyak perkataan, anda mungkin mahu langkah yang lebih kecil.

Jika kita mengulangi proses ini untuk semua tajuk lain, kita akan berakhir dengan tajuk animasi sepenuhnya.

Keutamaan pengguna

Kami bercakap sebelum ini mengenai kebolehcapaian dan memastikan kandungan berfungsi dengan baik dengan teknologi bantuan, tetapi ada satu lagi perkara yang perlu anda ingat: lebih suka-dikurangkan-gerakan. Walaupun ini bukan keperluan WCAG yang ketat untuk animasi semacam ini, ia boleh membuat perbezaan besar bagi orang yang mempunyai sensitiviti vestibular, jadi ia adalah idea yang baik untuk menawarkan cara untuk menunjukkan kandungan tanpa animasi.

Jika anda ingin memberikan alternatif yang tidak animasi, yang perlu anda lakukan ialah membungkus blok @supports anda dengan pertanyaan yang lebih suka dikurangkan-gerakan:

 Skrin @media dan (lebih suka-dikurangkan-gerakan: tidak ada pilihan) {
  @Supports (Animation-Timeline: Scroll ()) {
    / * gaya */
  }
}

Meratakan

Mari bercakap mengenai variasi. Dalam contoh terdahulu, kami menghidupkan keseluruhan teks tajuk, tetapi kami tidak perlu berbuat demikian. Anda boleh menghidupkan hanya bahagian yang anda mahu, dan menggunakan animasi tambahan untuk meningkatkan kesan dan membuat perkara lebih menarik. Sebagai contoh, di sini saya menyimpan teks "warna primer" tetap, dan menambah rentang selepas ia mengendalikan teks animasi.

<h1 aria-hidden="true">
  Warna utama<span></span>
</h1>

Dan sejak saya kini mempunyai rentang yang berasingan, saya juga boleh menghidupkan warna untuk memadankan setiap nilai.

Dalam contoh seterusnya, saya menyimpan animasi teks pada rentang, tetapi bukannya menukar warna teks, saya menambah satu lagi animasi yang didorong oleh tatal pada tajuk itu sendiri untuk menukar warna latar belakangnya. Dengan cara ini, anda boleh menambah seberapa banyak animasi yang anda mahu dan ubah apa sahaja yang anda suka.

Giliran anda!

Animasi yang didorong oleh CSS adalah lebih daripada sekadar helah yang sejuk; Mereka adalah penukar permainan yang membuka pintu kepada dunia reka bentuk web yang baru. Dengan hanya sedikit kreativiti, anda boleh mengubah halaman yang paling biasa menjadi sesuatu yang interaktif, tidak dapat dilupakan, dan benar -benar menarik. Kemungkinan benar -benar tidak berkesudahan, dari kesan halus yang meningkatkan pengalaman pengguna, ke peralihan animasi liar yang menjadikan tapak anda menonjol.

Jadi, apa yang akan anda bina dengan animasi yang didorong oleh tatal? Apa yang akan anda buat dengan kuasa besar baru ini? Cubalah, percubaan, dan jika anda datang dengan sesuatu yang sejuk, mempunyai beberapa idea, eksperimen liar, atau kegagalan yang pelik, saya suka mendengar tentang mereka. Saya sentiasa teruja untuk melihat apa yang orang lain datang, jadi jangan ragu untuk berkongsi kerja, soalan, atau maklum balas anda di bawah.

Terima kasih kepada Cristian Díaz untuk mengkaji semula contoh -contoh, memastikan semuanya dapat diakses, dan menyumbang nasihat dan penambahbaikan yang berharga.

Atas ialah kandungan terperinci Tajuk melekit yang didorong oleh tatal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!