logo

tsParticles v1.12.1 rilasciato

Nuova versione di tsParticles rilasciata, 1.12.1.

Note sulla versione

Modifiche sostanziali

  • rimossa la forma del cuore, ora ha il suo repository e il suo pacchetto https://github.com/matteobruni/tsparticles-shape-heart

Modifiche

  • aggiunto l'opacità al metodo delle forme personalizzate, questo dovrebbe essere utilizzato solo da forme che necessitano di una diversa gestione dell'opacità come le immagini

Correzione di bug

  • caricamento delle opzioni fisso
  • corretta l'opacità sulle immagini

Repository preimpostati

  • https://github.com/matteobruni/tsparticles-preset-60fps
  • https://github.com/matteobruni/tsparticles-preset-backgroundMask
  • https://github.com/matteobruni/tsparticles-preset-basic
  • https://github.com/matteobruni/tsparticles-preset-bouncing
  • https://github.com/matteobruni/tsparticles-preset-fire
  • https://github.com/matteobruni/tsparticles-preset-fontAwesome
  • https://github.com/matteobruni/tsparticles-preset-snow
  • https://github.com/matteobruni/tsparticles-preset-stars

Repository di forme

  • https://github.com/matteobruni/tsparticles-shape-spiral
  • https://github.com/matteobruni/tsparticles-shape-heart

Forme e preset personalizzati

tsParticles ora supporta alcune personalizzazioni 🥳.

ORA PUOI CREARE LE TUE FORME O PRESET

Creazione di una forma personalizzata

Ora puoi creare uno script con la tua forma da utilizzare nel tuo sito Web o per distribuirlo ad altri. Tutto quello che devi fare è una funzione di disegno, darle un nome e usarla nella configurazione.

Pubblica le tue forme con tsparticles-shape tagga su NPM così tutti possono trovarlo.

Troverai un esempio qui sotto.

Campione a spirale

spiral.js - Lo script di forma personalizzato, puoi distribuirlo o riutilizzarlo in tutti i tuoi siti web. 

// call this method before initializing tsParticles, this shape will be available in all of your tsParticles instances
// parameters: shape name, drawing method
// opacity is for shapes that can't handle the color opacity like images
tsParticles.addShape("spiral", function(context, particle, radius, opacity) {
  const shapeData = particle.shapeData;
  const realWidth = (radius - shapeData.innerRadius) / shapeData.lineSpacing;

  for (let i = 0; i < realWidth * 10; i++) {
    const angle = 0.1 * i;
    const x =
      (shapeData.innerRadius + shapeData.lineSpacing * angle) * Math.cos(angle);
    const y =
      (shapeData.innerRadius + shapeData.lineSpacing * angle) * Math.sin(angle);

    context.lineTo(x, y);
  }
});

Se preferisci usare i corsi puoi, IShapeDrawer l'interfaccia può essere implementata nel tuo codice o almeno in una classe con un metodo draw(context, particle, radius) dentro. Puoi trovare un esempio qui sotto. 

class SpiralDrawer {
  draw(context, particle, radius, opacity) {
    const shapeData = particle.shapeData;
    const realWidth = (radius - shapeData.innerRadius) / shapeData.lineSpacing;

    for (let i = 0; i < realWidth * 10; i++) {
      const angle = 0.1 * i;
      const x =
        (shapeData.innerRadius + shapeData.lineSpacing * angle) *
        Math.cos(angle);
      const y =
        (shapeData.innerRadius + shapeData.lineSpacing * angle) *
        Math.sin(angle);

      context.lineTo(x, y);
    }
  }
}

// call this method before initializing tsParticles, this shape will be available in all of your tsParticles instances
// parameters: shape name, drawer class
tsParticles.addShape("spiral", new SpiralDrawer());

config.json - La sezione di configurazione da aggiungere alla tua configurazione o nel readme del tuo plugin per insegnare ad altri come usarlo. 

{
  // [... omitted for brevity]
  "particles": {
    // [... omitted for brevity]
    "shape": {
      "type": "spiral", // this must match the name above, the type works as always, you can use an array with your custom shape inside
      "custom": {
        // this must match the name above, these are the values set in particle.shapeData (the first line of the method above)
        // you can use array as value here too, the values will be random picked, like in standard shapes
        "spiral": {
          "innerRadius": 1,
          "lineSpacing": 1,
          "close": false, // this value is used by tsParticles to close the path, if you don't want to close it set this value to false
          "fill": false // this value is used by tsParticles to fill the shape with the particles color, if you want only the stroke set this value to false
        }
      }
      // [... omitted for brevity]
    }
    // [... omitted for brevity]
  }
  // [... omitted for brevity]
}

Creazione di un preset personalizzato

Ora puoi creare uno script con il tuo preset da utilizzare nel tuo sito Web o per distribuirlo ad altri. Tutto quello che devi fare è dargli un nome e impostare tutte le opzioni necessarie per caricarlo correttamente. Ricorda di non importare tutta la configurazione, le proprietà non necessarie possono essere omesse.

Pubblica il tuo preset con tsparticles-preset tagga su NPM così tutti possono trovarlo.

Troverai un esempio qui sotto.

Campione preimpostato di fuoco

fire.preset.js - Lo script predefinito personalizzato, puoi distribuirlo o riutilizzarlo in tutti i tuoi siti web. 

// call this method before initializing tsParticles, this preset will be available in all of your tsParticles instances
// parameters: preset name, preset partial options
tsParticles.addPreset("fire", {
  fpsLimit: 40,
  particles: {
    number: {
      value: 80,
      density: {
        enable: true,
        value_area: 800
      }
    },
    color: {
      value: ["#fdcf58", "#757676", "#f27d0c", "#800909", "#f07f13"]
    },
    opacity: {
      value: 0.5,
      random: true
    },
    size: {
      value: 3,
      random: true
    },
    move: {
      enable: true,
      speed: 6,
      random: false
    }
  },
  interactivity: {
    events: {
      onclick: {
        enable: true,
        mode: "push"
      },
      resize: true
    }
  },
  background: {
    image: "radial-gradient(#4a0000, #000)"
  }
});

config.json - La sezione di configurazione da aggiungere alla tua configurazione o nel readme del tuo plugin per insegnare ad altri come usarlo. 

{
  "preset": "fire" // this should match the name above, it can be used in array values too, it will be loaded in order like everyone else
}

Vuoi integrarti in React.js?

Ho eseguito il fork del repository react-particles-js e aggiunto il supporto tsParticles.

Puoi controllare il fork qui:https://github.com/matteobruni/react-particles-js

E la demo di esempio qui:https://github.com/matteobruni/react-particles-js-demo

Spero che questo venga unito nel repository principale.

Link utili

Scopri la demo qui:https://particles.matteobruni.it

Vuoi sostituire il vecchio, obsoleto e abbandonato partition.js?
Sei nel posto giusto!

repository GitHub

https://github.com/matteobruni/tsparticles

npm

https://www.npmjs.com/package/tsparticles

filato

https://yarnpkg.com/package/tsparticles

jsDelivr

https://www.jsdelivr.com/package/npm/tsparticles

CDNJS

https://cdnjs.com/libraries/tsparticles

Sentiti libero di contribuire al progetto!

Dimostrazioni

Ecco alcune demo!

Preimpostazioni personalizzate

guarda il codice per la creazione di preimpostazioni personalizzate

Forme personalizzate

guarda il codice per creare forme personalizzate

Personaggi come particelle

Caratteri FontAwesome come particelle:

Collegamenti al passaggio del mouse

Maschera poligonale

Particelle di maschera di sfondo

Particelle COVID-19 SARS-CoV-2

Non fare clic! NON CLICCA! OH NO SI DIFFUSIONE!!!!

COVID-19 non è divertente. È un grave problema mondiale e dovremmo prevenirne la diffusione. Se ti trovi in ​​una zona a rischio per favore RIMANI A CASA