Hiukkasefektit: pölyä, kipinöitä ja valoa liikkuvaan designiin

Hiukkasefekti on animaatio, jossa monet pienet pisteet liikkuvat itsenäisesti: pöly leijuu valonsäteessä, hiillos nousee tulesta, tai kuvassa näkyy tähtiä, lunta, kipinöitä tai sumua. Liikkuvassa designissa hiukkaset tuovat taustaan syvyyttä ja tunnelmaa kilpailematta sanojen kanssa, kunhan niitä on vähän ja ne liikkuvat pieninä ja hitaina. Taito on pidättyvyydessä: hiukkasten pitäisi tuntua ennen kuin ne huomataan.

Miten hiukkasefekti toimii

Jokainen hiukkanen on pieni joukko lukuja: missä se on, kuinka suuri se on, mihin suuntaan ja kuinka nopeasti se liikkuu, kuinka näkyvä se on ja joskus kuinka kauan se elää. Efekti syntyy sadoista hieman erilaisista hiukkasista, jotka noudattavat samaa yksinkertaista sääntöä. Muuta sääntöä, ja samat pisteet luovat aivan erilaisen tunnelman.

Tee hiukkasista hienovaraisia

Tunnelman ja näytönsäästäjän ero on lähes aina määrässä ja nopeudessa. Nämä asetukset pitävät hiukkaset taustalla, jonne ne kuuluvat.

Vaihtele kokoa ja peittävyyttä syvyyden luomiseksi: pienet, terävät ja himmeät hiukkaset näyttävät kaukaisilta, muutama suurempi ja pehmeämpi taas läheiseltä. Läheisten hiukkasten tulisi myös liikkua hieman nopeammin. Sama keino luo parallaksin.

Hiukkaset ja teksti

Kirjaimen yli kulkeva kirkas piste saa sen välkkymään, ja kokonainen pistekenttä tekee pienestä tekstistä vaikeasti luettavaa. Pidä sanat kuvan rauhallisella alueella, harvenna hiukkasia niiden takana tai suurenna tekstiä niin, ettei ohittava piste haittaa. Älä pelasta sanoja niiden taakse lisättävällä hehkulla: rauhallisempi tausta toimii paremmin. Teksti liukuvärillä käsittelee liikkuvien taustojen kontrastia.

Missä hiukkasefekti tuo arvoa

Hiukkaset palkitsevat katseen, joka viipyy näytöllä yli sekunnin. Ohi vieritettävässä syötejulkaisussa niitä tuskin huomaa. Tarinassa, liikkeen näytöllä tai verkkosivun pääosiossa ne antavat silmälle rauhallisen lepopaikan.

• Tarinoiden ja Reels-videoiden taustat, joissa koko näytön kuva pysyy esillä useita sekunteja.
• Tilojen näytöt: ruokalistanäytöt, vastaanoton ruudut ja ikkunanäytöt, jotka pyörivät koko päivän. Katso tunnelmavideo.
• Verkkosivun pääosiot, kevyenä kerroksena liukuvärin päällä. Pysäytä liike vähennetyn liikkeen valinneille kävijöille.
• Tapahtumien ja lanseerausten lähtölaskennat, joissa hiillos tai tähdet luovat illan tunnelman.
• Puhelimen ja tietokoneen taustakuvat, joissa hidas pöly tai tähtien liike ei väsytä. Katso elävä taustakuva.

Hiukkasefektin silmukka ja vienti

1. 1

   Tee silmukasta saumaton

   Yhdestä reunasta poistuvien hiukkasten tulisi ilmestyä vastakkaiselle reunalle, jotta viimeinen ruutu jatkuu ensimmäiseen. Saumattomat silmukat selittää menetelmän.

2. 2

   Vie MP4, älä GIF

   GIF sisältää vain 256 väriä ruutua kohti. Pienet liikkuvat pisteet pehmeällä liukuvärillä muuttuvat siksi kirjavaksi kohinaksi. MP4 käsittelee niitä paljon paremmin.

3. 3

   Anna videolle riittävästi laatua

   Hienoja liikkuvia yksityiskohtia on vaikea pakata. Jos hiukkaset suttaantuvat tai katoavat, vie paremmalla laadulla tai vähennä niiden määrää.

4. 4

   Tarkista puhelimella

   Alustat pakkaavat ladatut videot uudelleen. Julkaise ensin yksityisesti tai lähetä video itsellesi ja varmista, että hiukkaset säilyivät.

Sävyraidat ja hiukkaset esiintyvät usein yhdessä tummilla taustoilla. Liukuvärien sävyraidat tarjoaa korjaukset. GIF ja MP4 kertoo, miksi video voittaa liikkuvissa yksityiskohdissa.

Hiukkasefekti CSS:llä ja canvas-elementillä

Verkkosivun kevyt hiukkaskerros kannattaa piirtää taustan päälle asetettuun canvas-elementtiin. pointer-events: none varmistaa, ettei se estä klikkauksia. Tämä skripti piirtää leijuvaa pölyä ja huomioi vähennetyn liikkeen valinneet kävijät: he näkevät hiukkaset paikallaan.

const canvas = document.querySelector('canvas.dust');
const ctx = canvas.getContext('2d');
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
const dpr = Math.min(window.devicePixelRatio || 1, 2);
let w = 0, h = 0;

function resize() {
  w = canvas.clientWidth;
  h = canvas.clientHeight;
  canvas.width = w * dpr;
  canvas.height = h * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  draw();
}

const dust = Array.from({ length: 70 }, () => ({
  x: Math.random(), y: Math.random(),
  r: 0.5 + Math.random() * 1.5,        // mostly tiny
  speed: 0.00002 + Math.random() * 0.00006,
  alpha: 0.15 + Math.random() * 0.45,
}));

function draw() {
  ctx.clearRect(0, 0, w, h);
  ctx.fillStyle = '#fde68a';
  for (const p of dust) {
    ctx.globalAlpha = p.alpha;
    ctx.beginPath();
    ctx.arc(p.x * w, p.y * h, p.r, 0, Math.PI * 2);
    ctx.fill();
  }
}

let last = performance.now();
function tick(now) {
  const dt = now - last; last = now;
  for (const p of dust) {
    p.y -= p.speed * dt;               // drift upwards
    if (p.y < -0.02) p.y = 1.02;       // wrap to the bottom
  }
  draw();
  requestAnimationFrame(tick);
}

window.addEventListener('resize', resize);
resize();
if (!reduce) requestAnimationFrame(tick);

Pidä määrä maltillisena puhelimissa, joissa jokainen hiukkanen kuluttaa akkua. Vähennetyn liikkeen opas selittää mediakyselyn kokonaan.

Hiukkaset Gradientlyssä

Gradientlyssä hiukkaset kuuluvat Markiin: hieno rakeisuus liikkuu Markin omissa väreissä, jolloin se sopii taustaan eikä näytä päälle liimatulta valkoiselta. Kun viet liikkuvan designin Prolla, voit säilyttää sen omat hiukkaset, poistaa ne tai kokeilla esimerkiksi pölyä, tähtiä, sumua, parvea, silkkiä tai hiillosta. Valitse paikallaan pysyvä liike, jolloin tausta pysyy paikoillaan ja vain hiukkaset liikkuvat. Silmukat viedään saumattomina 5-30 sekunnin pituisina. Kuvavienti säilyttää hiukkaset juuri sellaisina kuin ne ovat designissa.