Schneefall im Header

Um den Inhalt nicht zu stören nutzen wir den Schneefall nur im Header. Als Header nutzen wir hier einen Container.

Zuerst fügt ihr den CSS-Code ein. Entweder per Einstellungen>CSS oder Seitenspezifisch.
Anschließend fügt ihr den Quelltext am Anfang der Seite ein. Dieses Widget erhält die CSS-Klasse: zpBreakout.
Dieses soeben erstellte Widget packt ihr in einen Container, diesem gebt ihr als Hintergrundbild euer gewünschtes Bild und das Inline-CSS: height:80vh; margin-top:-60px; . Somit wird euer Header 80% Höhe des Bildschirmes einnehmen und 60 Pixel nach oben verschoben. Solltet ihr die Höhe (vh) ändern so solltet ihr im CSS den Wert (vh) ebenfalls anpassen.
Nun fügt ihr am Ende der Seite noch das Script ein.

CSS-Code

Diesen Code per Einstellungen > CSS einfügen und anpassen.

markieren & kopieren

Quelltext

Diesen Code per Widget > Quelltext einfügen und anpassen.

markieren & kopieren

Script

Diesen Code am Ende der Seite per Widget > Quelltext einfügen und anpassen.

window.onresize = function() {
  width = ctx.canvas.width = canvas.offsetWidth;
  height = ctx.canvas.height = canvas.offsetHeight;

for (var i = 0; i < snowflakes.length; i++) {
    snowflakes[i].resized();
  }
}

function update() {
  for (var i = 0; i < snowflakes.length; i++) {
    snowflakes[i].update();
  }
}

Snow.prototype.draw = function() {
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
  ctx.fillStyle = '#eaeaea';
  ctx.fill();
  ctx.closePath();
}

Snow.prototype.update = function() {
  this.y += this.speed;
  this.x += this.wind;

if (this.y > ctx.canvas.height) {
    if (this.isResized) {
      this.updateData();
      this.isResized = false;
    } else {
      this.y = 0;
      this.x = random(0, width); 
    }
  }
}

function createSnow(count) {
  for (var i = 0; i < count; i++) {
    snowflakes[i] = new Snow();
  }
}

function draw() {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  for (var i = 0; i < snowflakes.length; i++) {
    snowflakes[i].draw();
  }
}

function loop() {
  draw();
  update();
  animFrame(loop);
}

function random(min, max) {
  var rand = (min + Math.random() * (max - min)).toFixed(1);
  rand = Math.round(rand);
  return rand;
}

createSnow(150);
loop();
</script>

markieren & kopieren

Schneefall im Header

CSS-Code

Quelltext

Script

script

NEUE BEITRÄGE