יצירת עשן ברקע

יצירת עשן ברקע

כדי ליצור עשן ברקע העתיקו את הקוד המצ"ב וה...

כדי ליצור עשן ברקע העתיקו את הקוד המצ"ב והכניסו אותו לוידג'ט HTML. ניתן לשחק עם הנתונים לשנות. ראו קישור חיצוני לאתר היוצר לוודא אם יש צורך לתת קרדיט.

<div id="repro">
  <canvas id="canvasMiddle" width="500" height="1018"></canvas>
  <canvas id="canvasLeft" width="500" height="1680"></canvas>
  <canvas id="canvasRight" width="500" height="1680"></canvas>
</div>
<script src="https://omrelli.ug/smoke.js/smoke.js">

</script>
<script>
    
  const color = [143, 215, 255];;
const particles = {
  left: 0.15,
  right: 0.15 };


const sideSmoke = (canvas, side) => {
  const ctx = canvas.getContext('2d');
  const machine = SmokeMachine(ctx, color);
  machine.start();
  machine.setPreDrawCallback(() => {
    const w = canvas.clientWidth;
    const h = canvas.clientHeight;
    const posY = innerWidth < 992 ? h : h - h * 0.14;
    machine.addSmoke(w / 2, posY, particles[side]);
    canvas.width = w;
    canvas.height = h;
  });
  return machine;
};

const middleSmoke = canvas => {
  const ctx = canvas.getContext('2d');
  const machine = SmokeMachine(ctx, color);
  machine.start();
  setTimeout(() => {
    machine.setPreDrawCallback(() => {
      const w = canvas.clientWidth;
      const h = canvas.clientHeight;
      machine.addSmoke(w / 2, h * 2 / 3, 0.05);
      canvas.width = w;
      canvas.height = h;
    });
  }, 2500);
  return machine;
};

const repro = document.getElementById('repro');
const canvasMiddle = document.getElementById('canvasMiddle');
const canvasLeft = document.getElementById('canvasLeft');
const canvasRight = document.getElementById('canvasRight');
sideSmoke(canvasLeft, 'left');
sideSmoke(canvasRight, 'right');
const middleSmokeMachine = middleSmoke(canvasMiddle);


repro.addEventListener('mousemove', e => {
  requestAnimationFrame(() => {
    // if (e.pageY > window.innerHeight) return;
    // const t = Math.floor(Math.random() * 200) + 3800
    // middleSmokeMachine.addSmoke(e.pageX, e.pageY, 0.1, t);
    // if (e.pageX > window.innerWidth / 2)
    const min = 0.015;
    const max = 0.15;
    const x = Math.round(e.pageX / innerWidth * 100) / 100;
    particles.left = min + Math.round((max - min) * (1 - x) * 100) / 100;
    particles.right = min + Math.round((max - min) * x * 100) / 100;
  });
});
</script>Code language: HTML, XML (xml)

נשמח לקבל תכנים נוספים שלדעתכם יכולים לעניין את קהל היעד

פרטי יצירת קשר
דילוג לתוכן