Eine interaktive Sternenkulisse für Inhalte

Letztes Jahr hatte ich die Gelegenheit, mit Shawn Wang (SWYX) an einem Projekt für Temporal zusammenzuarbeiten. Ziel war es, ihre Website mit einigen kreativen Elementen zu verbessern. Dies war eine faszinierende Herausforderung, da ich eher ein Entwickler als ein Designer bin, aber ich nutzte die Chance, meine Designfähigkeiten zu erweitern.

Einer meiner Beiträge war eine interaktive Sternenkulisse. Sie können es hier in Aktion sehen:

Blockquote -Konzept Verwenden Sie Perspektive und CSS -benutzerdefinierte Eigenschaften. Genießen Sie die kreative Freiheit bei @temporalio. Fügen Sie einen Hauch von Laune hinzu! ⚒️ @reactjs && @tailwindcss (Site is NextJS)? Link zu CodePen über @CodePen pic.twitter.com/s9xp2trrox

- Jhey ?? ✨ (@jh3yy) 2. Juli 2021

Die Stärke dieses Designs liegt in seiner Implementierung als wiederverwendbare React -Komponente und bietet eine hohe Konfigurierbarkeit. Benötigen Sie verschiedene Formen statt Sterne? Möchten Sie die Partikelplatzierung genau steuern? Sie haben die vollständige Kontrolle.

Lassen Sie uns diese Komponente bauen! Wir werden React, Greensock und das HTML verwenden<canvas></canvas> Element. React ist optional, aber die Verwendung von IT erstellt eine wiederverwendbare Komponente für zukünftige Projekte.

Aufbau der Basis -App

 Importieren von 'https://cdn.skypack.dev/react';
Reactdom von 'https://cdn.skypack.dev/react-dom';
Importieren Sie GSAP aus 'https://cdn.skypack.dev/gsap';

const root_node = document.querySelector ('#App');

const steScape = () =><h1> Cooles Thingzzz!</h1> ;

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

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

Erstens machen wir a<canvas></canvas> Element und holen Sie sich eine Referenz für die Verwendung innerhalb von Reacts useEffect -Haken. Wenn Sie React nicht verwenden, speichern Sie die Referenz direkt in einer Variablen.

 const starscape = () => {
  const canvasref = react.useref (null);
  zurückkehren<canvas ref="{canvasRef}"></canvas> ;
};

Wir werden das stylen<canvas></canvas> Um das Ansichtsfenster zu füllen und hinter dem Inhalt zu sitzen:

 Leinwand {
  Position: fest;
  Einschub: 0;
  Hintergrund: #262626;
  Z -Index: -1;
  Höhe: 100VH;
  Breite: 100VW;
}

Sterne hinzufügen

Wir werden das Sternrendern vereinfachen, indem wir Kreise mit unterschiedlichen Opazitäten und Größen verwenden. Ein Kreis auf a zeichnen<canvas></canvas> beinhaltet den Kontext und die Verwendung der arc -Funktion. Lassen Sie uns einen Kreis (unser Stern) in der Mitte mit einem useEffect -Haken rendern:

 const starscape = () => {
  const canvasref = react.useref (null);
  const contexTref = react.useref (null);
  React.Usesefect (() => {
    canvasref.current.width = window.innnerwidth;
    canvasref.current.height = window.innerHeight;
    contexTref.current = canvasref.current.getContext ('2d');
    contextref.current.FillStyle = 'gelb';
    contextref.current.beginPath ();
    contextref.current.arc (
      window.innnerwidth / 2, // x
      window.innerHeight / 2, // y
      100, // Radius
      0, // Startwinkel (Radians)
      Math.pi * 2 // Endwinkel (Radians)
    );
    contextref.current.fill ();
  }, []);
  zurückkehren<canvas ref="{canvasRef}"></canvas> ;
};

Dies schafft einen gelben Kreis. Der verbleibende Code befindet sich innerhalb dieser useEffect . Aus diesem Grund ist der React -Teil optional; Sie können diesen Code für andere Frameworks anpassen.

Wir müssen mehrere Sterne erzeugen und rendern. Lassen Sie uns eine LOAD erstellen, um die Sterngenerierung und das Canvas -Setup zu verarbeiten, einschließlich Leinwandgrößen:

 const last = () => {
  const vmin = math.min (window.innerHeight, window.innnerwidth);
  const star_count = math.floor (vmin * densityRatio);
  canvasref.current.width = window.innnerwidth;
  canvasref.current.height = window.innerHeight;
  starsRef.current = new Array (star_count) .fill (). map (() => ({{{{{{{{{{
    x: gsap.utils.random (0, window.innnerwidth, 1),
    y: gsap.utils.random (0, window.innerHeight, 1),
    Größe: gsap.utils.random (1, Sizelimit, 1),
    Skala: 1,
    Alpha: GSAP.utils.Random (0,1, Defaultalpha, 0,1),
  }));
};

Jeder Stern ist ein Objekt mit Eigenschaften, die seine Eigenschaften definieren (x, y Position, Größe, Skala, Alpha). sizeLimit , defaultAlpha und densityRatio sind Requisiten, die mit Standardwerten an die Starscape -Komponente übergeben wurden.

Ein Beispielsternobjekt:

 {
  "x": 1252,
  "y": 29,
  "Größe": 4,
  "Skala": 1,,
  "Alpha": 0,5
}

Um diese Sterne zu rendern, erstellen wir eine RENDER , die über das stars iteriert und jeden Stern mithilfe der arc -Funktion wiederholt:

 const render = () => {
  contextref.current.clearrect (
    0,,
    0,,
    canvasref.current.width,
    canvasref.current.height
  );
  starsRef.current.foreach ((stern) => {
    contextref.current
    contextref.current.beginPath ();
    contextref.current.arc (star.x, star.y, star.size / 2, 0, math.pi * 2);
    contextref.current.fill ();
  });
};

Die clearRect -Funktion löscht die Leinwand vor dem Rendern, was für die Animation von entscheidender Bedeutung ist.

Die vollständige Starscape (bisher ohne Interaktivität) ist unten dargestellt:

Vollständige Sternenkomponente (ohne Interaktivität)

 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.Usesefect (() => {
    contexTref.current = canvasref.current.getContext ('2d');
    const last = () => {
      const vmin = math.min (window.innerHeight, window.innnerwidth);
      const star_count = math.floor (vmin * densityRatio);
      canvasref.current.width = window.innnerwidth;
      canvasref.current.height = window.innerHeight;
      starsRef.current = new Array (star_count) .fill (). map (() => ({{{{{{{{{{
        x: gsap.utils.random (0, window.innnerwidth, 1),
        y: gsap.utils.random (0, window.innerHeight, 1),
        Größe: 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 ((stern) => {
        contextref.current
        contextref.current.beginPath ();
        contextref.current.arc (star.x, star.y, star.size / 2, 0, math.pi * 2);
        contextref.current.fill ();
      });
    };
    const run = () => {
      LADEN();
      MACHEN();
    };
    LAUFEN();
    window.adDeVentListener ('Größe', Run);
    return () => {
      window.removeEventListener ('Größe', run);
    };
  }, []);
  zurückkehren<canvas ref="{canvasRef}"></canvas> ;
};

Experimentieren Sie mit den Requisiten in einer Demo, um ihre Auswirkungen zu sehen. Um die Änderung der Ansichtsfenster zu behandeln, rufen wir LOAD und RENDER in der Größe (mit der Entladung der Optimierung, die hier ausgelassen wird).

Interaktivität hinzufügen

Lassen Sie uns nun den Hintergrund interaktiv machen. Wenn sich der Zeiger bewegt, hellen Sterne in der Nähe des Cursors auf und skalieren sich.

Wir werden eine UPDATE hinzufügen, um den Abstand zwischen dem Zeiger und jedem Stern zu berechnen und dann die Skala des Sterns und das Alpha mit mapRange -Dienstprogramm von Greensock zu tween. Wir werden auch scaleLimit und proximityRatio -Requisiten hinzufügen, um das Skalierungsverhalten zu kontrollieren.

 const update = ({x, y}) => {
  starsRef.current.foreach ((stern) => {
    const distanz = math.sqrt (math.pow (star.x - x, 2) math.pow (star.y - y, 2));
    gsap.to (stern, {
      Skala: scalemapperref.current (math.min (Distanz, vminref.current * proximityRatio),
      Alpha: AlphamapperRef.Current (Math.min (Entfernung, vminref.current * proximityRatio),
    });
  });
};

Um Updates zu erzielen, verwenden wir gsap.ticker (eine gute Alternative zum requestAnimationFrame ), fügen dem Ticker RENDER hinzu und entfernen sie in der Reinigung. Wir setzen die Frames pro Sekunde (FPS) auf 24. Die RENDER verwendet nun den Wert der star.scale beim Zeichnen des Bogens.

 LADEN();
gsap.ticker.add (Render);
gsap.ticker.fps (24);
window.adDeVentListener ('Größe', Last);
document.addeventListener ('pointermove', update);
return () => {
  window.removeEventListener ('Größe', last);
  document.removeEventListener ('pointermove', update);
  gsap.ticker.remove (render);
};

Wenn Sie Ihre Maus bewegen, reagieren die Sterne!

Um den Fall zu bewältigen, in dem die Maus die Leinwand verlässt, fügen wir einen pointerleave -Ereignis -Hörer hinzu, der die Sterne zurück in ihren ursprünglichen Zustand tweetet:

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

// ... Event -Hörer ...
document.addeventListener ('pointerleave', beenden);
return () => {
  // ... Reinigung ...
  document.removeEventListener ('pointerleave', beenden);
  gsap.ticker.remove (render);
};

Bonus: Konami Code Osterei

Fügen wir einen Konami -Code -Osterei hinzu. Wir hören auf Tastaturereignisse und lösen eine Animation aus, wenn der Code eingegeben wird.

 const konami_code = 'Pfeil, Pfeil, Pfeil, Pfeil, Pfeil, Pfeil, Arrowleft, Arrowright, KeyB, Keya';
const coderef = react.useref ([]);
React.Usesefect (() => {
  const handlecode = (e) => {
    coderef.current = [... coderef.current, e.code] .slice (coderef.current.length> 9? coderef.current.length - 9: 0);
    if (coderef.current.join (','). tolowerCase () === konami_code.tolowerCase ()) {
      // Ostereianimation auslösen
    }
  };
  window.adDeVentListener ('KeyUp', HandleCode);
  return () => {
    window.removeEventListener ('KeyUp', HandleCode);
  };
}, []);

Die komplette, interaktive Starscape mit dem Konami -Code -Osterei ist hier ziemlich lang und für die Kürze weggelassen. Die oben beschriebenen Prinzipien zeigen jedoch, wie ein voll funktionsfähiges und anpassbares interaktives Sternen Hintergrund mit React, Greensock und HTML erstellt werden kann<canvas></canvas> . Die Ostereianimation würde das Erstellen einer gsap.timeline für Animation Star -Eigenschaften beinhalten.

In diesem Beispiel zeigt die Techniken, die zum Erstellen Ihrer eigenen benutzerdefinierten Hintergründe erforderlich sind. Denken Sie daran, zu überlegen, wie der Hintergrund mit dem Inhalt Ihrer Website interagiert. Experimentieren Sie mit verschiedenen Formen, Farben und Animationen, um einzigartige und ansprechende Bilder zu erstellen.

Das obige ist der detaillierte Inhalt vonEine interaktive Sternenkulisse für Inhalte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!