Anzuschauen bei mir: https//:www.smokestop-berlin.de 2,3 Sekunden warten, dann rieselt leise der Schnee
Den folgenden Code hier komplett kopieren und in eine Textdatei rein.
Diese dann umbenennen als "snowflakes.js".
Achtet darauf, das die Dateieindeung auch auf *.js endet.
Bei Windowssystemen, wo in den Dateiansichtoptionen das Häckchen gesetzt ist" Dateiendung bei bekannten Typen ausblenden"
Ändert sich die Endung nicht, sondern WIndows macht dann snowflakes.js.txt draus.
Also aufpassen!
- Code: Alles auswählen
var snowflakes = {
///////////////////////////// configuration ////////////////////////////
// amout of flakes
_amount: 50,
// random colors
_color: ['#AAAACC', '#DDDDFF', '#CCCCDD', '#F3F3F3', '#F0FFFF'],
// random fonts
_type: ['Arial Black', 'Arial Narrow', 'Times', 'Comic Sans MS'],
// char used for flake
_flakeChar: '*',
// speed of flakes
_speed: .2,
// minimum flake font size
_minSize: 6,
// maximum flake font size
_maxSize: 22,
// horizontal drift
_drift: 15,
// zIndex of flakes
_zIndex: 20000,
///////////////////////////// private vars /////////////////////////////
_flakes: [],
_bodyWidth: 0,
_bodyHeight: 0,
_range: null,
_count: 0,
_timeout: 20,
_lastInterval: 0,
_eventHandlerResize: window.onresize,
_eventHandlerLoad: window.onload,
////////////////////////////// functions ///////////////////////////////
// start snow
start: function()
{
if (this._eventHandlerLoad != null) this._eventHandlerLoad();
// calculate range
this._range = this._maxSize - this._minSize;
// init window size
this._windowSize();
// add new flakes
while (this._amount > this._flakes.length)
this._createFlake(this._flakes.length);
// start to move snow
this._lastInterval = this._time();
window.setInterval(function() { snowflakes._move(); }, this._timeout);
},
// get current time
_time: function()
{
return +new Date();
},
// return a random number bewtween 0 and range
_random: function(range)
{
return Math.floor(Math.random() * range);
},
// creates a new snowflake
_createFlake: function(i)
{
// select body tag
var insertBody = document.getElementsByTagName('body')[0];
// create span child for flake
var f = document.createElement('div');
f.id = 'flake' + i;
f.style.position = 'absolute';
f.style.left = '0px';
f.style.top = '-' + this._maxSize + 'px';
f.style.color = this._color[this._random(this._color.length - 1)];
f.style.family = this._type[this._random(this._type.length - 1)];
f.style.fontSize = (this._random(this._range) + this._minSize) + 'px';
f.style.zIndex = this._zIndex;
f.innerHTML = this._flakeChar;
insertBody.appendChild(f);
// create array element
this._flakes[i] = {
x: this._random(this._bodyWidth - this._drift - this._maxSize - 3) + this._drift + 1,
y: -this._maxSize - this._random(this._bodyHeight),
size: this._random(this._range) + this._minSize,
count: this._random(10000)
};
},
// restart an existing snow flake
_restartFlake: function(i)
{
this._flakes[i] = {
x: this._random(this._bodyWidth - this._drift - this._maxSize - 3) + this._drift + 1,
y: -this._maxSize,
size: this._random(this._range) + this._minSize,
count: this._random(10000)
};
},
// move existing flakes
_move: function()
{
// calculate movement factor
var dif = this._time() - this._lastInterval;
this._lastInterval = this._time();
var f = dif * this._speed;
this._count += f / 80;
for (var i = 0; i < this._flakes.length; i++)
{
var flake = this._flakes[i];
flake.y += f * this._speed * this._maxSize / flake.size;
// restart existing flake
if (flake.y + flake.size >= this._bodyHeight)
{
this._restartFlake(i);
continue;
}
var flakeDiv = document.getElementById('flake' + i);
flakeDiv.style.left = Math.floor(flake.x + Math.sin(flake.count + this._count) * this._drift) + 'px';
flakeDiv.style.top = Math.floor(flake.y) + 'px';
}
},
// calculate new positions for all flakes
_windowSize: function()
{
// save old width
var oldWidth = this._bodyWidth;
// get new width and height
this._bodyWidth = this._getWindowWidth() - this._maxSize;
this._bodyHeight = this._getWindowHeight() - this._maxSize;
// calculate correction ratio
var ratio = this._bodyWidth / oldWidth;
// for all flakes
for (var i = 0; i < this._flakes.length; i++)
{
var flake = this._flakes[i];
// do width correction
flake.x *= ratio;
// restart existing flake
if ((flake.y + flake.size) >= this._bodyHeight)
this._restartFlake(i);
}
},
// get window width
_getWindowWidth: function()
{
var w = Math.max(self.innerWidth || 0, window.innerWidth || 0);
if (document.documentElement)
w = Math.max(w, document.documentElement.clientWidth || 0);
if (document.body)
{
w = Math.max(w, document.body.clientWidth || 0);
w = Math.max(w, document.body.scrollWidth || 0);
w = Math.max(w, document.body.offsetWidth || 0);
}
return w;
},
// get window height
_getWindowHeight: function()
{
var h = Math.max(self.innerHeight || 0, window.innerHeight || 0);
if (document.documentElement)
h = Math.max(h, document.documentElement.clientHeight || 0);
if (document.body)
{
h = Math.max(h, document.body.clientHeight || 0);
h = Math.max(h, document.body.scrollHeight || 0);
h = Math.max(h, document.body.offsetHeight || 0);
}
return h;
},
// handle resize event
resize: function()
{
if (this._eventHandlerResize != null)
this._eventHandlerResize();
this._windowSize();
}
};
// register window resize event
window.onresize = function() { snowflakes.resize(); }
window.onload = function() { snowflakes.start(); }
Damit die Flocken überall rieseln im Shop, nimmt ihr nun eine Infobox, die überall im Shop zu sehen ist.
Dort kopiert ihr nun folgenden HTML Code rein. Achtet beim reinkopieren, das auch HTML Editier Modus an ist und nicht nur TXT.
Dazu oben lionks auf Quellcoe klicken, dann seit ihr im HTML Modus
Folgenden Code reinkopieren und speichern:
- Code: Alles auswählen
<script type="text/javascript" src="snowflakes.js"></script>
"Ich habe die Codezeile in meinen Zahklungsmöglichkeitenbox" drin, die immer angezeigt wird, egal wo der Kunde sich aufhält.
Möchte man nur auf der Startseite den Code, dann eine Box wählen, die nur auf der Startseite angezeigt wird oder den code einfach in ein HTMl Element unterbringen, das nur auf der Startseite angezeigt wird.
Nun noch speichern, raus aus dem Adminmenü. F5 drücken und sich freuen