Latar belakang berbintang interaktif untuk kandungan

Tahun lepas, saya berpeluang untuk bekerjasama dengan Shawn Wang (Swyx) dalam projek untuk temporal. Matlamatnya adalah untuk meningkatkan laman web mereka dengan beberapa elemen kreatif. Ini adalah cabaran yang menarik, kerana saya lebih pemaju daripada pereka, tetapi saya memeluk peluang untuk mengembangkan kemahiran reka bentuk saya.

Salah satu sumbangan saya ialah latar belakang berbintang interaktif. Anda dapat melihatnya dalam tindakan di sini:

Konsep blockquote menggunakan perspektif dan sifat tersuai CSS. Menikmati kebebasan kreatif di @temporalio. Menambah sentuhan Whimsy! ⚒️ @reactjs && @TailWindCSS (tapak adalah NextJs)? Pautan ke CodePen melalui @codepen pic.twitter.com/s9xp2trrox

- jhey ?? ✨ (@jh3yy) 2 Julai 2021

Kekuatan reka bentuk ini terletak pada pelaksanaannya sebagai komponen reaksi yang boleh diguna semula, yang menawarkan konfigurasi yang tinggi. Perlukan bentuk yang berbeza dan bukannya bintang? Ingin mengawal penempatan zarah dengan tepat? Anda berada dalam kawalan sepenuhnya.

Mari kita bina komponen ini! Kami akan menggunakan React, Greensock, dan HTML<canvas></canvas> elemen. React adalah pilihan, tetapi menggunakannya mewujudkan komponen yang boleh diguna semula untuk projek masa depan.

Membina aplikasi asas

 Import React dari 'https://cdn.skypack.dev/react';
import reactdom dari 'https://cdn.skypack.dev/react-dom';
Import GSAP dari 'https://cdn.skypack.dev/gsap';

const root_node = document.QuerySelector ('#app');

const starscape = () =><h1> THINGZZ COOL!</h1> ;

const app = () =><starscape></starscape> ;

Reactdom.render (<app></app> , Root_node);

Pertama, kami menjadikan a<canvas></canvas> elemen dan ambil rujukan untuk digunakan dalam cangkuk useEffect React. Jika tidak menggunakan React, simpan rujukan secara langsung dalam pembolehubah.

 const starscape = () => {
  const canvasRef = react.useref (null);
  kembali<canvas ref="{canvasRef}"></canvas> ;
};

Kami akan gaya<canvas></canvas> Untuk mengisi paparan dan duduk di belakang kandungan:

 kanvas {
  Kedudukan: Tetap;
  inset: 0;
  Latar Belakang: #262626;
  Z -indeks: -1;
  Ketinggian: 100VH;
  lebar: 100VW;
}

Menambah bintang

Kami akan mempermudahkan rendering bintang dengan menggunakan bulatan dengan pelbagai opacities dan saiz. Melukis bulatan pada a<canvas></canvas> melibatkan mendapatkan konteks dan menggunakan fungsi arc . Mari membuat bulatan (bintang kita) di tengah menggunakan cangkuk useEffect :

 const starscape = () => {
  const canvasRef = react.useref (null);
  const contextref = react.useref (null);
  React.useeffect (() => {
    canvasRef.current.width = window.innerWidth;
    canvasRef.current.height = window.innerHeight;
    contextref.current = canvasRef.current.getContext ('2d');
    contextref.current.fillstyle = 'yellow';
    contextref.current.beginpath ();
    contextref.current.arc (
      window.innerwidth / 2, // x
      window.innerheight / 2, // y
      100, // RADIUS
      0, // Mula Sudut (Radians)
      Math.pi * 2 // Angle End (Radians)
    );
    contextref.current.fill ();
  }, []);
  kembali<canvas ref="{canvasRef}"></canvas> ;
};

Ini mewujudkan bulatan kuning. Kod selebihnya akan berada di dalam useEffect ini. Inilah sebabnya bahagian React adalah pilihan; Anda boleh menyesuaikan kod ini untuk rangka kerja lain.

Kita perlu menjana dan menjadikan pelbagai bintang. Mari buat fungsi LOAD untuk mengendalikan persediaan generasi dan kanvas bintang, termasuk saiz kanvas:

 const load = () => {
  const vmin = math.min (window.innerheight, window.innerWidth);
  const star_count = Math.floor (vmin * DensityRatio);
  canvasRef.current.width = window.innerWidth;
  canvasRef.current.height = window.innerHeight;
  starSref.current = array baru (star_count) .fill (). map (() => ({{
    x: gsap.utils.random (0, window.innerwidth, 1),
    y: gsap.utils.random (0, window.innerheight, 1),
    Saiz: gsap.utils.random (1, sizelimit, 1),
    Skala: 1,
    Alpha: gsap.utils.random (0.1, defaultalpha, 0.1),
  }));
};

Setiap bintang adalah objek dengan sifat yang menentukan ciri -cirinya (kedudukan x, y, saiz, skala, alpha). sizeLimit , defaultAlpha , dan densityRatio adalah prop yang diluluskan kepada komponen Starscape dengan nilai lalai.

Objek bintang sampel:

 {
  "x": 1252,
  "Y": 29,
  "Saiz": 4,
  "Skala": 1,
  "Alpha": 0.5
}

Untuk menjadikan bintang -bintang ini, kami mewujudkan fungsi RENDER yang melelehkan pelbagai stars dan menjadikan setiap bintang menggunakan fungsi arc :

 const render = () => {
  contextref.current.clearrect (
    0,
    0,
    CANVASREF.CURRENT.WIDTH,
    canvasref.current.height
  );
  starsref.current.foreach ((star) => {
    contextref.current.fillstyle = `hsla (0, 100%, 100%, $ {star.alpha})`;
    contextref.current.beginpath ();
    contextref.current.arc (star.x, star.y, star.size / 2, 0, math.pi * 2);
    contextref.current.fill ();
  });
};

Fungsi clearRect membersihkan kanvas sebelum membuat, yang penting untuk animasi.

Komponen Starscape Lengkap (tanpa interaktiviti lagi) ditunjukkan di bawah:

Komponen Starscape Lengkap (tanpa interaktiviti)

 const starscape = ({densityratio = 0.5, sizelimit = 5, defaultalpha = 0.5}) => {
  const canvasRef = react.useref (null);
  const contextref = react.useref (null);
  const starSref = react.useref (null);
  React.useeffect (() => {
    contextref.current = canvasRef.current.getContext ('2d');
    const load = () => {
      const vmin = math.min (window.innerheight, window.innerWidth);
      const star_count = Math.floor (vmin * DensityRatio);
      canvasRef.current.width = window.innerWidth;
      canvasRef.current.height = window.innerHeight;
      starSref.current = array baru (star_count) .fill (). map (() => ({{
        x: gsap.utils.random (0, window.innerwidth, 1),
        y: gsap.utils.random (0, window.innerheight, 1),
        Saiz: gsap.utils.random (1, sizelimit, 1),
        Skala: 1,
        Alpha: gsap.utils.random (0.1, defaultalpha, 0.1),
      }));
    };
    const render = () => {
      contextref.current.clearRect (0, 0, canvasRef.current.width, canvasref.current.height);
      starsref.current.foreach ((star) => {
        contextref.current.fillstyle = `hsla (0, 100%, 100%, $ {star.alpha})`;
        contextref.current.beginpath ();
        contextref.current.arc (star.x, star.y, star.size / 2, 0, math.pi * 2);
        contextref.current.fill ();
      });
    };
    const run = () => {
      Beban ();
      Render ();
    };
    Lari ();
    window.addeventListener ('saiz semula', lari);
    kembali () => {
      window.RemoveEventListener ('Resize', Run);
    };
  }, []);
  kembali<canvas ref="{canvasRef}"></canvas> ;
};

Eksperimen dengan prop dalam demo untuk melihat kesannya. Untuk mengendalikan saiz semula viewport, kami memanggil LOAD dan RENDER saiz semula (dengan keberanian untuk pengoptimuman, yang ditinggalkan untuk keringkasan di sini).

Menambah interaktiviti

Sekarang, mari kita buat latar belakang interaktif. Apabila penunjuk bergerak, bintang -bintang berhampiran kursor cerah dan skala.

Kami akan menambah fungsi UPDATE untuk mengira jarak antara penunjuk dan setiap bintang, kemudian tween skala bintang dan alpha menggunakan utiliti mapRange Greensock. Kami juga akan menambah scaleLimit dan proximityRatio props untuk mengawal tingkah laku skala.

 const update = ({x, y}) => {
  starsref.current.foreach ((star) => {
    const jarak = math.sqrt (math.pow (star.x - x, 2) math.pow (star.y - y, 2));
    gsap.to (bintang, {
      Skala: scalemapperRef.current (Math.min (jarak, vminref.current * proximityratio)),
      Alpha: alphamapperref.current (Math.min (jarak, vminref.current * proximityratio))
    });
  });
};

Untuk membuat kemas kini, kami menggunakan gsap.ticker (alternatif yang baik untuk requestAnimationFrame ), menambah RENDER ke ticker dan mengeluarkannya dalam pembersihan. Kami menetapkan bingkai sesaat (fps) hingga 24. Fungsi RENDER kini menggunakan nilai star.scale Apabila melukis arka.

 Beban ();
gsap.ticker.add (render);
gsap.ticker.fps (24);
window.addeventListener ('saiz semula', beban);
document.addeventListener ('pointermove', update);
kembali () => {
  window.removeEventListener ('Resize', Load);
  Document.RemoveEventListener ('pointerMove', update);
  gsap.ticker.remove (render);
};

Sekarang, apabila anda menggerakkan tetikus anda, bintang bertindak balas!

Untuk mengendalikan kes di mana tetikus meninggalkan kanvas, kami menambah pendengar acara pointerleave yang mengetuk bintang -bintang kembali ke keadaan asalnya:

 const exit = () => {
  gsap.to (starsref.current, {skala: 1, alpha: defaultalpha});
};

// ... pendengar acara ...
document.addeventListener ('pointerleave', keluar);
kembali () => {
  // ... pembersihan ...
  Document.RemoveEventListener ('PointerLeave', Exit);
  gsap.ticker.remove (render);
};

Bonus: Kod Konami Telur Paskah

Mari tambahkan telur Paskah Kod Konami. Kami akan mendengar peristiwa papan kekunci dan mencetuskan animasi jika kod dimasukkan.

 const konami_code = 'arrowup, arrowup, arrowdown, arrowdown, arrowleft, arrowright, arrowleft, arrowright, keyb, utama';
const codeRef = react.useref ([]);
React.useeffect (() => {
  const handlecode = (e) => {
    coderef.current = [... codeRef.current, e.code] .slice (codeRef.current.length> 9? coderef.current.length - 9: 0);
    jika (codeRef.current.join (','). TolowerCase () === konami_code.tolowerCase ()) {
      // mencetuskan animasi telur Paskah
    }
  };
  window.addeventListener ('Keyup', HandLecode);
  kembali () => {
    window.RemoveEventListener ('Keyup', HandLecode);
  };
}, []);

Komponen Starscape yang lengkap dan interaktif dengan Kod Konami Easter Egg adalah agak panjang dan ditinggalkan di sini untuk keringkasan. Walau bagaimanapun, prinsip -prinsip yang digariskan di atas menunjukkan cara membuat latar belakang berbintang interaktif yang berfungsi sepenuhnya dan disesuaikan menggunakan React, Greensock, dan HTML<canvas></canvas> . Animasi telur Paskah akan melibatkan mewujudkan gsap.timeline untuk menghidupkan sifat bintang.

Contoh ini menunjukkan teknik yang diperlukan untuk membuat latar belakang tersuai anda sendiri. Ingatlah untuk mempertimbangkan bagaimana latar belakang berinteraksi dengan kandungan laman web anda. Eksperimen dengan pelbagai bentuk, warna, dan animasi untuk mencipta visual yang unik dan menarik.

Atas ialah kandungan terperinci Latar belakang berbintang interaktif untuk kandungan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!