Melangkah Rainbow Garis bawah

Saya sangat suka reka bentuk tapak sandwic. Di antara banyak ciri yang indah ialah tajuk utama ini dengan garis bawah Rainbow yang bergerak ketika anda menatal . Ia bukan tatal-jacking-ia hanya ciri reka bentuk kecil yang menggunakan kedudukan tatal untuk membuat pergerakan kecil.

Untuk menarik pelangi itu sendiri, kita boleh menggunakan kecerunan linear dengan henti-henti, konsep yang sama seperti lukisan jalur di CSS. Itulah sebahagian besar CSS, yang baik-baik saja, tetapi saya melihat mereka telah memilih imej latar belakang. Berikut adalah sebagai SVG, iaitu 661 bait (kecil kecil). Kita boleh membuatnya kelihatan seperti garis bawah dengan menetapkan saiz latar belakang untuk mengehadkan ketinggian dan meletakkannya di sepanjang bahagian bawah dengan kedudukan latar belakang.

Kami akan melakukannya pada elemen sebaris supaya garis bawah pecah di mana kata -kata pecah:

 H1 {
  rentang {
    imej latar belakang: URL (spektrum.svg);
    Latar Belakang: REPET-X;
    Latar Belakang: 100VW 0.2EM;
    Latar Belakang-Latar Belakang: Kiri bawah 5px; 
  }
}

Untuk menghidupkannya, kami menggerakkan latar belakang-X. Bukan satu perkara yang sangat sesuai untuk bernyawa, tetapi kami tidak benar -benar menghidupkannya - ia hanya bergerak berdasarkan kedudukan tatal. Daripada memanipulasi latar belakang-X secara manual, kami akan menetapkannya dengan harta tersuai, kemudian memanipulasi harta tersuai dengan JavaScript.

 latar belakang-posisi-x: var (-scrollpos);

Mengemas kini pembolehubah itu semasa skrol halaman mudah mengerikan:

 window.addeventListener ("tatal", e => {
  Biarkan scrollTop = document.body.scrollTop? document.body.scrolltop: document.documentelement.scrolltop; 
  biarkan newpos = scrollTop "px";
  document.documentElement.style.setProperty ('-Scrollpos', NewPos);
});

Di sini ia berfungsi!

Lihat garis yang agak janky di mana saya sama ada menggunakan document.body atau document.documentElement? Itulah perkara penyemak imbas yang bodoh di mana "elemen menatal" berbeza dalam safari berbanding segala yang lain.

Semasa melakukan ini, saya belajar bahawa anda boleh menggunakan Document.ScrollingElement sebaliknya untuk mengelakkan kesakitan di sana. Saya akan meninggalkan komen dalam kod mengenai perkara itu, tetapi biarkan garis asal untuk keturunan.

Atas ialah kandungan terperinci Melangkah Rainbow Garis bawah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!