Hier für dein Layout "Technical Responsive" LINK.
Folgendes ist zu beachten:
- Da sich das Script über den Header legt sind deine Weiter-Pfeile und -Bullets nicht mehr erreichbar. Deshalb habe ich diese ausgeblendet.
- In der mobilen Ansicht ist die Header-Höhe nicht zu ermitteln. Deshalb wird hier der Schnee wieder abgeschaltet.
- Den CSS-Code musst du eventuell noch ein wenig an deine Layout-Breite und Header-Höhe anpassen. Sollte aber im groben schon so passen.
- In der Zeta Live-Vorschau ist die Darstellung nicht ganz korrekt. In der Browser-Vorschau schon.
Einstellungen > CSS:
<style>
.snow {
position: absolute;
top:120px;
left:50%;
margin-left:-560px;
width: 1120px;
height: 470px;
z-index:99;
}
.flex-control-paging li {
display:none;
}
@media (max-width: 1156px) {
.snow {
display:none;
}}
</style>
Alles anzeigen
Ganz am Ende der Seite Widget > Quelltext:
<canvas id="snow" class="snow"></canvas>
<script>
var canvas = document.getElementById('snow'),
ctx = canvas.getContext('2d'),
width = ctx.canvas.width = canvas.offsetWidth,
height = ctx.canvas.height = canvas.offsetHeight,
animFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame,
snowflakes = [];
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();
}
}
function Snow() {
this.x = random(0, width);
this.y = random(-height, 0);
this.radius = random(0.5, 3.0);
this.speed = random(1, 3);
this.wind = random(-0.5, 3.0);
this.isResized = false;
this.updateData = function () {
this.x = random(0, width);
this.y = random(-height, 0);
}
this.resized = function () {
this.isResized = true;
}
}
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>
Alles anzeigen
