Forum - Zu Silvester: Feuerwerk-Effekte für die Homepage

Lesezeichen

Forum » XOBOR-Foren und Homepages » Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps » Zu Silvester: Feuerwerk-Effekte für die Homepage
Hier sehen Sie Beiträge zu den einzelnen Themen

Themen-Einstellungen Thema

Thema abonnieren

Thema drucken

Bereich wechseln

Start Willkommen! Ankündigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten Ärger mit Ihrem PC? Ärger mit dem PC - Vorbeugung und Hilfe Ärger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Archiv Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps für Smartphones und iPhones Lob, Kritik & Verbesserungsvorschläge Spiel & Spaß, Witz & gute Laune! Spiritualität, Seele, New Age, Yoga, Gesundheit Alles, was noch so übrig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Zu Silvester: Feuerwerk-Effekte für die Homepage

Wolfgang

Beiträge:	2034
Beiträge:
Registriert:	10.12.2006
Blog:	Wolfgangs Blog


Board-Nr:	104774

29.12.2015 14:46 (zuletzt bearbeitet: 02.01.2018 05:48)

Zu Silvester: Feuerwerk-Effekte für die Homepage
Aktualisiert 01.01.18

Will man zu Silvester einige Effekte in seine Webseite einbauen, gibt es hier viele gute, aber auch unterschiedliche Vorschläge!
Einige Animationen haben ein Starteinrichtung. Gut, wenn das Skript nicht immer laufen soll.
Es gibt auch Animationen, die gleich starten und die Seite verdecken. Hier ist es günstig das Feuerwerk auf eine extra Seite zu laden und sie dann über einen Link oder über eine Grafik aufzurufen!
Des weiteren können Animationen auch ständig im Hintergrund laufen, wenn sie dezent sind, wie z.B. das Xobor-Plugin "Feuerwerk".
Bei einem Skript, das im Hintergrund läuft, gut prüfen, ob es das System nicht zu sehr belastet.
Einige Skripte laufen leider z.Z. noch unter HTTPS.

Happy New Year! - Bild bitte anklicken!

Hier die Links:

Feuerwerk 1: Selbststartendes Feuerwerk von "dtrooper"

• Hintergrundbilder können das Feuerwerk 1 überdecken!
• Wenn man keine Hintergrundbilder eingetragen hat, erscheint das Feuerwerk auf einer bereits bestehenden Webseite ganz unten.

Deswegen funktioniert dieses Feuerwerk am besten, wenn man es auf eine extra HTML-Seite lädt und über einen Seiten-Link oder einer Grafik aufruft.
In den Xobor-Foren geht die Erstellung einer neuen HTML-Seite am besten unter "Admin > Layout > Eigene Seiten".

Start

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
 
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Feuerwerk</title>
 
<style type="text/css">
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
.gruesse {
margin-top:50px;
color:#eeeeee;
text-align:center;
background:#555555;
padding:20px;
border-radius:10px;
border: 5px double #aaaaaa;
width:400px;
}
 
.text2 {
font-size:12px;paddig-bottom:10px;
}
 
.link {
font-size:12px;color:#d5d300;
}
 
</style>
 
</head>
<body>
 
<!-- jQuery laden -->
<script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>
 
<center>
<h1 class="gruesse"> Happy New Year 
<br><br>
 
<span class="text2">Einen guten Rutsch in ein gesundes, erfülltes und zufriedenes neue Jahr 2018</span>
 
<span style="padding:2px;">&nbsp;</span>
<a class="link" href="https://www.hilfe-tricks-tipps.de/t1082f31-Fuer-Silvester-Effekte-fuer-die-Homepage.html">Zurück zur Webseite</a>
 
</h1>
</center>
 
<!-- <JavaScript laden -->
<script>
var SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight,
    mousePos = {
        x: 400,
        y: 300
    },
 
    // create canvas
    canvas = document.createElement('canvas'),
    context = canvas.getContext('2d'),
    particles = [],
    rockets = [],
    MAX_PARTICLES = 400,
    colorCode = 0;
 
// init
$(document).ready(function() {
    document.body.appendChild(canvas);
    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;
    setInterval(launch, 800);
    setInterval(loop, 1000 / 50);
});
 
// update mouse position
$(document).mousemove(function(e) {
    e.preventDefault();
    mousePos = {
        x: e.clientX,
        y: e.clientY
    };
});
 
// launch more rockets!!!
$(document).mousedown(function(e) {
    for (var i = 0; i < 5; i++) {
        launchFrom(Math.random() * SCREEN_WIDTH * 2 / 3 + SCREEN_WIDTH / 6);
    }
});
 
function launch() {
    launchFrom(mousePos.x);
}
 
function launchFrom(x) {
    if (rockets.length < 10) {
        var rocket = new Rocket(x);
        rocket.explosionColor = Math.floor(Math.random() * 360 / 10) * 10;
        rocket.vel.y = Math.random() * -3 - 4;
        rocket.vel.x = Math.random() * 6 - 3;
        rocket.size = 8;
        rocket.shrink = 0.999;
        rocket.gravity = 0.01;
        rockets.push(rocket);
    }
}
 
function loop() {
    // update screen size
    if (SCREEN_WIDTH != window.innerWidth) {
        canvas.width = SCREEN_WIDTH = window.innerWidth;
    }
    if (SCREEN_HEIGHT != window.innerHeight) {
        canvas.height = SCREEN_HEIGHT = window.innerHeight;
    }
 
    // clear canvas
    context.fillStyle = "rgba(0, 0, 0, 0.05)";
    context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
 
    var existingRockets = [];
 
    for (var i = 0; i < rockets.length; i++) {
        // update and render
        rockets[i].update();
        rockets[i].render(context);
 
        // calculate distance with Pythagoras
        var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2));
 
        // random chance of 1% if rockets is above the middle
        var randomChance = rockets[i].pos.y < (SCREEN_HEIGHT * 2 / 3) ? (Math.random() * 100 <= 1) : false;
 
/* Explosion rules
             - 80% of screen
            - going down
            - close to the mouse
            - 1% chance of random explosion
        */
        if (rockets[i].pos.y < SCREEN_HEIGHT / 5 || rockets[i].vel.y >= 0 || distance < 50 || randomChance) {
            rockets[i].explode();
        } else {
            existingRockets.push(rockets[i]);
        }
    }
 
    rockets = existingRockets;
 
    var existingParticles = [];
 
    for (var i = 0; i < particles.length; i++) {
        particles[i].update();
 
        // render and save particles that can be rendered
        if (particles[i].exists()) {
            particles[i].render(context);
            existingParticles.push(particles[i]);
        }
    }
 
    // update array with existing particles - old particles should be garbage collected
    particles = existingParticles;
 
    while (particles.length > MAX_PARTICLES) {
        particles.shift();
    }
}
 
function Particle(pos) {
    this.pos = {
        x: pos ? pos.x : 0,
        y: pos ? pos.y : 0
    };
    this.vel = {
        x: 0,
        y: 0
    };
    this.shrink = .97;
    this.size = 2;
 
    this.resistance = 1;
    this.gravity = 0;
 
    this.flick = false;
 
    this.alpha = 1;
    this.fade = 0;
    this.color = 0;
}
 
Particle.prototype.update = function() {
    // apply resistance
    this.vel.x *= this.resistance;
    this.vel.y *= this.resistance;
 
    // gravity down
    this.vel.y += this.gravity;
 
    // update position based on speed
    this.pos.x += this.vel.x;
    this.pos.y += this.vel.y;
 
    // shrink
    this.size *= this.shrink;
 
    // fade out
    this.alpha -= this.fade;
};
 
Particle.prototype.render = function(c) {
    if (!this.exists()) {
        return;
    }
 
    c.save();
 
    c.globalCompositeOperation = 'lighter';
 
    var x = this.pos.x,
        y = this.pos.y,
        r = this.size / 2;
 
    var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
    gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")");
    gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")");
    gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)");
 
    c.fillStyle = gradient;
 
    c.beginPath();
    c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true);
    c.closePath();
    c.fill();
 
    c.restore();
};
 
Particle.prototype.exists = function() {
    return this.alpha >= 0.1 && this.size >= 1;
};
 
function Rocket(x) {
    Particle.apply(this, [{
        x: x,
        y: SCREEN_HEIGHT}]);
 
    this.explosionColor = 0;
}
 
Rocket.prototype = new Particle();
Rocket.prototype.constructor = Rocket;
 
Rocket.prototype.explode = function() {
    var count = Math.random() * 10 + 80;
 
    for (var i = 0; i < count; i++) {
        var particle = new Particle(this.pos);
        var angle = Math.random() * Math.PI * 2;
 
        // emulate 3D effect by using cosine and put more particles in the middle
        var speed = Math.cos(Math.random() * Math.PI / 2) * 15;
 
        particle.vel.x = Math.cos(angle) * speed;
        particle.vel.y = Math.sin(angle) * speed;
 
        particle.size = 10;
 
        particle.gravity = 0.2;
        particle.resistance = 0.92;
        particle.shrink = Math.random() * 0.05 + 0.93;
 
        particle.flick = true;
        particle.color = this.explosionColor;
 
        particles.push(particle);
    }
};
 
Rocket.prototype.render = function(c) {
    if (!this.exists()) {
        return;
    }
 
    c.save();
 
    c.globalCompositeOperation = 'lighter';
 
    var x = this.pos.x,
        y = this.pos.y,
        r = this.size / 2;
 
    var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
    gradient.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")");
    gradient.addColorStop(1, "rgba(0, 0, 0, " + this.alpha + ")");
 
    c.fillStyle = gradient;
 
    c.beginPath();
    c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true);
    c.closePath();
    c.fill();
 
    c.restore();
};
</script>
 
</body>
</html>
 
 

Schließen

Feuerwerk 2: Feuerwerk im Hintergrund von "go4u-Webdesign"

Will man das Feuerwerk nicht über eine separate HTML-Seite aufrufen, kann man das eigentliche Skript aus Zeile 70-35 verwenden.
Die Zeilen 70-351 in den Header oder Body der Webseite einfügen.
In den Xobor-Foren einfach Zeile 70-351 in die Fußleiste unter Admin > Layout > Kopf- und Fußzeile > Fußzeile einsetzen!
Kein Eingriff ins Template !
Fertig!

Start

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Feuerwerk</title>
 
<style type="text/css">
body {
background-size:100%; -moz-background-size:100%;
}
 
.gruesse {
color:#eeeeee;
text-align:center;
background:#6E522E;
padding:10px;
border-radius:10px;
border: 5px double #3B200B;
width:600px;
}
 
.text2 {
font-size:18px;paddig-bottom:10px;
}
 
.text3 {
font-size:12px;
color:#d5d300;
padding-top:5px;
}
 
.backlink {
color:#FFFF00;
margin:60px 0 0 50px;
text-align:center;
background:#6E522E;
padding:4px;
border-radius:10px;
border: 5px double #3B200B;
 
}
</style>
 
</head>
<body vlink="#ffffff" link="#ffffff" alink:"#ffffff" bgcolor="#6E522E" background="https://files.homepagemodules.de/b104774/f46t1197p2706n141_VvZsLqac.jpg">
 
<div class="page">
<center>
<h1 class="gruesse"> Happy New Year 
<br>
<span class="text2">Einen guten Rutsch in ein gesundes, erfülltes und zufriedenes neue Jahr 2018</span>
<span class="text3">Das Skript kann gut im Hintergrund laufen, ohne zu stören!</span>
</h1>
</center>
 

 
<span class="backlink">
<b>Zurück zum Forum:</b> <a href="https://www.hilfe-tricks-tipps.de/">https://www.hilfe-tricks-tipps.de/</a>
</span>
 
<br><br><br>
 
<span class="backlink">
<b>Zurück zum Beitrag:</b> <a href="https://www.hilfe-tricks-tipps.de/t1082f31-Fuer-Silvester-Effekte-fuer-die-Homepage.html#mitte1">Für Silvester: Effekte für die Homepage</a>
</span>
</div>
 
<script>
////////////////////////////////////////////////////////////////////////
// Fireworks-Script (c) 2012, Dominik Scholz / go4u.de Webdesign
////////////////////////////////////////////////////////////////////////
 
var fireworks = {
 
	///////////////////////////// configuration ////////////////////////////
	
	// random colors
	_color: ['#D0D0D0', '#FF0000', '#FFFF00', '#22FF00', '#2040FF', '#00CCFF', '#FF00FF', '#A319D6'],
	// gravity factor
	_gravity: 0.07,
	// air resistance factor
	_resistance: 0.975,
	// zIndex of particles
	_zIndex: 20000,
	// maximal age of particles (in msec)
	_maxAge: 2000,
	// interval of appearing explosions (in msec)
	_interval: [500, 2500],
	// amount of particles per explosion
	_particlesPerExplosion: 40,
	// maximal speed of particle at moment of explosion
	_speed: 5,
 
	
	
	///////////////////////////// private vars /////////////////////////////
	
	_particles: [],
	_bodyWidth: 0,
	_bodyHeight: 0,
	_count: 0,
	_lastInterval: 0,
 
	
 
	////////////////////////////// functions ///////////////////////////////
 
	// init fireworks
	init: function()
	{
		this._addEventListener(window, 'resize', function() { return fireworks.resize.apply(fireworks); });
		this._addEventListener(window, 'load', function() { return fireworks.start.apply(fireworks); });
	},
	
	
	// add an event listener
	_addEventListener: function(el, name, handler)
	{
		if (el.addEventListener)
			el.addEventListener(name, handler, false); 
		else if (el.attachEvent)
			el.attachEvent('on' + name, handler);
	},
	
	
	// start fireworks
	start: function()
	{
		// init window size
		this.resize();
 
		// start to move snow
		this._lastInterval = this._time();
		requestAnimFrame(function() {fireworks._move();});
		
		this._addExplosion();
	},
	
	
	// add a new explosion
	_addExplosion: function()
	{
		var x = Math.floor(Math.random() * this._bodyWidth),
			y = Math.floor((Math.random() * .5 + .1) * this._bodyHeight),
			dx = Math.random() * 10 - 5,
			dy = Math.random() * -2 - 1,
			c1 = this._random(this._color),
			c2 = this._random(this._color);
		
		for (var i = 0; i < this._particlesPerExplosion; i++)
		{
			this._createParticle(
				x,
				y,
				dx,
				dy,
				i / (this._particlesPerExplosion - 1) * 180 * Math.PI,
				Math.random() * this._speed,
				Math.random() > .5 ? c1 : c2
			);
		}
		
		window.setTimeout(
			function() { return fireworks._addExplosion.apply(fireworks);},
			Math.random() * (this._interval[1] - this._interval[0]) + this._interval[0]
		);
	},
	
	
	// get current time
	_time: function()
	{
		return +new Date();
	},
	
 
	// return a random array element
	_random: function(arr)
	{
		return arr[
			Math.floor(
				Math.random() * (arr.length)
			)
		];
	},
	
	
	// creates a new particle
	_createParticle: function(x, y, dx, dy, rot, speed, color)
	{
		var el = null,
			foundEl = false,
			p = this._particles;
 
		// look for old particle
		for (var i = 0, l = p.length; i < l; i++)
			if (p[i].data.age > 1)
			{
				el = p[i];
				foundEl = true;
				break;
			}
	
		// create span child for particles
		if (!foundEl)
		{
			el = document.createElement('div');
			el.className      = 'particle';
			el.style.position = 'absolute';
			el.style.fontSize = '20px';
			el.style.zIndex   = this._zIndex;
			el.style.width    = '10px';
			el.style.overflow = 'hidden';
			el.innerHTML      = '&#x25cf;';
		}
 
		el.style.left     = x + 'px';
		el.style.top      = y + 'px';
		el.style.color    = color;
		el.data = {
			x: x,
			y: y,
			dx: Math.cos(rot) * speed + dx,
			dy: Math.sin(rot) * speed + dy,
			color: color,
			age: Math.random() * .25
		};
		
		if (!foundEl)
		{
			document.getElementsByTagName('body')[0].appendChild(el);
			this._particles.push(el);
		}
	},
 
	
	// move existing particles
	_move: function()
	{
		requestAnimFrame(function() {fireworks._move();});
	
		// calculate movement factor
		var dif = this._time() - this._lastInterval;
		this._lastInterval = this._time();
		var delta = dif / 20;
		
		var el,
			d,
			p = this._particles,
			r = Math.pow(this._resistance, delta),
			g = this._gravity * delta,
			a = dif / this._maxAge;
		
		for (var i = 0, l = p.length; i < l; i++)
		{
			el = p[i];
			d = el.data;
			
			if (d.age > 1)
				continue;
			
			d.age += a;
			d.dy += g;
			d.dx *= r;
			d.dy *= r;
			d.x += d.dx * delta;
			d.y += d.dy * delta;
			
			if (d.x < 0)
			{
				d.dx *= -1;
				d.x = 0;
			}
			if (d.x > this._bodyWidth)
			{
				d.dx *= -1;
				d.x = this._bodyWidth;
			}
			if (d.y < 0)
			{
				d.dy *= -1;
				d.y = 0;
			}
			if (d.y > this._bodyHeight)
			{
				d.dy *= -1;
				d.y = this._bodyHeight;
			}
			
			if (d.age > 1)
				d.x = d.y = 0;
			
			el.style.left = d.x + 'px';
			el.style.top = d.y + 'px';
			el.style.color = (Math.random() * .5 + d.age >= 1) ? 'transparent' : d.color;
			el.style.fontSize = (1 - d.age) * 5 + 5 + 'px';
		}
	},
	
 
	// calculate new positions for all particles
	resize: function()
	{
		// get new width and height
		this._bodyWidth = this._getWindowWidth() - 10;
		this._bodyHeight = this._getWindowHeight() - 20;
	},
 
	
	// get window width
	_getWindowWidth: function()
	{
		return document.getElementsByTagName('body')[0].offsetWidth;
	},
 
	
	// 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;
	}
 
};
 
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
		  window.webkitRequestAnimationFrame || 
		  window.mozRequestAnimationFrame    || 
		  window.oRequestAnimationFrame      || 
		  window.msRequestAnimationFrame     || 
		  function (cb){
			window.setTimeout(cb, 1000 / 60);
		  };
})();
 
fireworks.init();
 </script>
 

</body>
</html>
 
 

Schließen

Feuerwerk 3: Feuerwerk im Hintergrund von "Rainbow Arch"

Will man das Feuerwerk nicht über eine separate HTML-Seite aufrufen, kann man das eigentliche Skript aus Zeile 74-158 verwenden.
Die Zeilen 74-158 in den Header oder Body der Webseite einfügen.
In den Xobor-Foren einfach Zeile 74-158 in die Fußleiste unter Admin > Layout > Kopf- und Fußzeile > Fußzeile einsetzen!
Kein Eingriff ins Template !
Fertig!

Start

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 

<!--Simply copy and paste just above </body></html> in your page.-->
 
<script language="javascript">
 
//Fireworks
//**  This script and many more from
//   http://rainbow.arch.scriptmania.com
 
if (document.getElementById){
 
//   Plenty of black gives a better sparkle effect.
 
showerCol=new Array('#000000','#ff0000','#ffffff','#000000','#00ff00','#ff00ff','#ffffff','#ffa500','#000000','#fff000');
launchCol=new Array('#ffff00','#ff00ff','#00ffff','#ffffff','#ff8000');
runSpeed=70; //setTimeout speed.
 
//   *** DO NOT EDIT BELOW ***
 
var yPos=200;
var xPos=200;
var explosionSize=200;
var launchColour='#ffff80';
var timer=null;
var dims=1;
var evn=360/14;
firework=new Array();
var ieType=(typeof window.innerWidth != 'number');
var ieRef=((ieType) && (document.compatMode) && 
(document.compatMode.indexOf("CSS") != -1))
?document.documentElement:document.body;
thisStep=0;
step=5;
 
for (i=0; i < 14; i++){
document.write('<div id="sparks'+i+'" style="position:absolute;top:0px;left:0px;height:1px;width:1px;font-size:1px;background-color:'+launchColour+'"><\/div>');
firework[i]=document.getElementById("sparks"+i).style;
}
 
function winDims(){
winH=(ieType)?ieRef.clientHeight:window.innerHeight; 
winW=(ieType)?ieRef.clientWidth:window.innerWidth;
bestFit=(winW >= winH)?winH:winW;
}
winDims();
window.onresize=new Function("winDims()");
 
function Reset(){
var dsy=(ieType)?ieRef.scrollTop:window.pageYOffset; 
thisStep=-1;
launchColour = launchCol[Math.floor(Math.random()*launchCol.length)];
explosionSize=Math.round(100+Math.random()*(bestFit/4));
yPos = explosionSize+Math.round(Math.random()*(winH-(explosionSize*2.2)))+dsy;
xPos = explosionSize+Math.round(Math.random()*(winW-(explosionSize*2.2)));
dims=1;
for (i=0; i < 14; i++){
 firework[i].backgroundColor=launchColour;
 firework[i].width=dims+1+"px";
 firework[i].height=dims+1+"px";
 firework[i].fontSize=dims+1+"px";
}
Fireworks();
}
 
function Fireworks(){
thisStep+=step;
timer=setTimeout("Fireworks()",runSpeed);
 
for (i=0; i < 14; i++){
firework[i].top = yPos + explosionSize * Math.sin(i*evn*Math.PI/180)*Math.sin(thisStep/100)+"px";
firework[i].left= xPos + explosionSize * Math.cos(i*evn*Math.PI/180)*Math.sin(thisStep/100)+"px";
 if (thisStep > 100){
 dims=(explosionSize < 150)?1:Math.round(1+Math.random()*2);
 firework[i].backgroundColor=showerCol[Math.floor(Math.random()*showerCol.length)];
 firework[i].width=dims+1+"px";
 firework[i].height=dims+1+"px";
 firework[i].fontSize=dims+1+"px";
 }
}
if (thisStep > 160){
 clearTimeout(timer);
 Reset();
}
}
window.onload=Fireworks;
}
//-->
</script>
 
 

Schließen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Feuerwerk</title>
 
<style type="text/css">
body {
background-size:100%; -moz-background-size:100%;
}
 
.gruesse {
color:#eeeeee;
text-align:center;
background:#6E522E;
padding:10px;
border-radius:10px;
border: 5px double #3B200B;
width:600px;
}
 
.text2 {
font-size:18px;paddig-bottom:10px;
}
 
.text3 {
font-size:12px;
color:#d5d300;
padding-top:5px;
}
 
.backlink {
color:#FFFF00;
margin:60px 0 0 50px;
text-align:center;
background:#6E522E;
padding:4px;
border-radius:10px;
border: 5px double #3B200B;
 
}
</style>
 
</head>
<body vlink="#ffffff" link="#ffffff" alink:"#ffffff" bgcolor="#6E522E" background="https://files.homepagemodules.de/b104774/f46t1197p2706n141_VvZsLqac.jpg">
 
<div class="page">
<center>
<h1 class="gruesse"> Happy New Year 
<br>
<span class="text2">Einen guten Rutsch in ein gesundes, erfülltes und zufriedenes neue Jahr 2018</span>
<span class="text3">Dieses Skript kann gut im Hintergrund laufen, ohne zu stören und ist sehr klein!</span>
</h1>
</center>
 

 
<span class="backlink">
<b>Zurück zum Forum:</b> <a href="https://www.hilfe-tricks-tipps.de/">https://www.hilfe-tricks-tipps.de/</a>
</span>
 
<br><br><br>
 
<span class="backlink">
<b>Zurück zum Beitrag:</b> <a href="https://www.hilfe-tricks-tipps.de/t1082f31-Fuer-Silvester-Effekte-fuer-die-Homepage.html#mitte1">Für Silvester: Effekte für die Homepage</a>
</span>
</div>
 

 
<!--Simply copy and paste just above </body></html> in your page.-->
 
<script language="javascript">
 
//Fireworks
//**  This script and many more from
//   https://rainbow.arch.scriptmania.com
 
if (document.getElementById){
 
//   Plenty of black gives a better sparkle effect.
 
showerCol=new Array('#000000','#ff0000','#ffffff','#000000','#00ff00','#ff00ff','#ffffff','#ffa500','#000000','#fff000');
launchCol=new Array('#ffff00','#ff00ff','#00ffff','#ffffff','#ff8000');
runSpeed=70; //setTimeout speed.
 
//   *** DO NOT EDIT BELOW ***
 
var yPos=200;
var xPos=200;
var explosionSize=200;
var launchColour='#ffff80';
var timer=null;
var dims=1;
var evn=360/14;
firework=new Array();
var ieType=(typeof window.innerWidth != 'number');
var ieRef=((ieType) && (document.compatMode) && 
(document.compatMode.indexOf("CSS") != -1))
?document.documentElement:document.body;
thisStep=0;
step=5;
 
for (i=0; i < 14; i++){
document.write('<div id="sparks'+i+'" style="position:absolute;top:0px;left:0px;height:1px;width:1px;font-size:1px;background-color:'+launchColour+'"><\/div>');
firework[i]=document.getElementById("sparks"+i).style;
}
 
function winDims(){
winH=(ieType)?ieRef.clientHeight:window.innerHeight; 
winW=(ieType)?ieRef.clientWidth:window.innerWidth;
bestFit=(winW >= winH)?winH:winW;
}
winDims();
window.onresize=new Function("winDims()");
 
function Reset(){
var dsy=(ieType)?ieRef.scrollTop:window.pageYOffset; 
thisStep=-1;
launchColour = launchCol[Math.floor(Math.random()*launchCol.length)];
explosionSize=Math.round(100+Math.random()*(bestFit/4));
yPos = explosionSize+Math.round(Math.random()*(winH-(explosionSize*2.2)))+dsy;
xPos = explosionSize+Math.round(Math.random()*(winW-(explosionSize*2.2)));
dims=1;
for (i=0; i < 14; i++){
 firework[i].backgroundColor=launchColour;
 firework[i].width=dims+1+"px";
 firework[i].height=dims+1+"px";
 firework[i].fontSize=dims+1+"px";
}
Fireworks();
}
 
function Fireworks(){
thisStep+=step;
timer=setTimeout("Fireworks()",runSpeed);
 
for (i=0; i < 14; i++){
firework[i].top = yPos + explosionSize * Math.sin(i*evn*Math.PI/180)*Math.sin(thisStep/100)+"px";
firework[i].left= xPos + explosionSize * Math.cos(i*evn*Math.PI/180)*Math.sin(thisStep/100)+"px";
 if (thisStep > 100){
 dims=(explosionSize < 150)?1:Math.round(1+Math.random()*2);
 firework[i].backgroundColor=showerCol[Math.floor(Math.random()*showerCol.length)];
 firework[i].width=dims+1+"px";
 firework[i].height=dims+1+"px";
 firework[i].fontSize=dims+1+"px";
 }
}
if (thisStep > 160){
 clearTimeout(timer);
 Reset();
}
}
window.onload=Fireworks;
}
//-->
</script>
 

</body>
</html>
 
 

Schließen

Weitere Links zum anschauen und ausprobieren:

Hier gibt es eine Sammlung von Feuerwerk-Animationen, die überall auf der Web-Seite platziert werden können!
Wenn das Feuerwerk den Seiteninhalt stört, kann es per Klick gestoppt und wieder gestartet werden!
Link: JavaScript Fireworks

Start

Riesiges, aber interessantes Skript mit perfekten, einstellbaren Animationen.
Hier die Webseite: Feuerwerk von "Kenneth Kufluk"
Hier das Feuerwerk in Aktion: https://kennethkufluk.github.io/js-fireworks/canvas/

Hier gibt es eine große Sammlung der verschiedensten Feuerwerk-Animationen.
Einige sind hier bereits vorgestellt worden!
Auf "Meine-erste-Homepage.com": Ein Feuerwerk für Ihre Homepage

Weiteres Feuerwerk, das z.Z. noch nicht auf HTTPS läuft, aber recht gut ist!

Feuerwerk ohne HTTPS: Online konfigurierbares Feuerwerk von "LSD Pyrotechnik"

Das Skript kann überall auf der Webseite eingebaut werden
In den Xobor-Foren einfach das Skript in die Fußleiste unter Admin > Layout > Kopf- und Fußzeile > Fußzeile einsetzen!
Kein Eingriff ins Template !
Fertig!
Aber! Läuft z.Z. nicht unter HTTPS://

Bis dann und viel Spaß bei Ausprobieren!
Wolfgang

Antworten!

Mario4370, Hans58, Gabriella und Oberhenne finden das Top!

Thema abonieren Startseite Letzte Beiträge

Antworten

#2 | RE: Zu Silvester: Feuerwerk-Effekte für die Homepage

30.12.2015 14:27

Hallo Wolfgang,

wollte das erste Script einbauen, irgendwie geht das bei mir nicht. Wo bitte muss ich das genau hinstellen?

Lieber Gruss

Gabi

https://www.garten-der-poesie.de

Antworten!

Thema abonieren Startseite Letzte Beiträge

Antworten

#3 | RE: Zu Silvester: Feuerwerk-Effekte für die Homepage

30.12.2015 19:34 (zuletzt bearbeitet: 02.01.2018 06:20)

Zitat von Gabriella im Beitrag #2
Hallo Wolfgang,

wollte das erste Script einbauen, irgendwie geht das bei mir nicht. Wo bitte muss ich das genau hinstellen?

Lieber Gruss

Gabi

Bitte anklicken! Aktualisiert 01.01.18

Hallo Gabi,
das Feuerwerk 1 funktioniert am besten, wenn man es auf eine extra HTML-Seite lädt und über den Seiten-Link oder einer Grafik aufruft.
In den Xobor-Foren geht das unter "Admin > Layout > Eigene Seiten".

• Hintergrundbilder können das Feuerwerk 1 überdecken!
• Wenn man keine Hintergrundbilder eingetragen hat, erscheint das Feuerwerk ganz unter auf der Webseite.

Habe die Infos zum Beitrag #1 hinzugefügt. Danke fürs Feedback!

Du brauchst jetzt nur noch eine passende Grafik oder einen Start-Button.

HTML-Start-Button:

<a href="https://www.esdba.de/page-157755-1.html" style="border-radius:50px;padding:10px;background:#007000;border: 5px double #333333;color:#eeeeee;">Start</a>

Grafik-Button:

Wolfgang

Antworten!

Gabriella findet das Top!

Thema abonieren Startseite Letzte Beiträge

Antworten

#4 | RE: Zu Silvester: Feuerwerk-Effekte für die Homepage

Wolfgang

Beiträge:	2034
Beiträge:
Registriert:	10.12.2006
Blog:	Wolfgangs Blog


Board-Nr:	104774

29.12.2016 21:22 (zuletzt bearbeitet: 02.01.2018 14:42)

Zu Silvester: Feuerwerk-Effekte für die Homepage!
Aktualisiert 01.01.18

• Habe den Beitrag #1 aktualisiert!
• Und zusätzlich die Auslösegrafik vom "Xobor Advens-Kalender" umfunktioniert!

Zum Nachbau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<script type="text/javascript" language="JavaScript">
 
//  Animation der Auslösegrafik beim "Mouseover"!
//  0 = keine Auslösegrafik 
//  1 = ohne Animation
//  2 = Grafik vergrößert sich 
//  3 = Grafik versteckt sich am linken Rand
//  4 = Grafik wird transparent angezeigt
var Kalender_Animation = "3"
 
 
$(document).ready(function() {
 
$('.content').contents().find('.mainContainerDiv').each(function(){
$('#usercont_bottom').css('display','none');
$('.content').css('color','#ffffff');
$('.content a').css('color','#ffffff');
});
 
$('#hover_img').css('position','fixed').css('left','-3px').css('top','500px').css('width','90px').css('z-index','999999');
 
if (Kalender_Animation == 0) {
$('#hover_img').css('display','none');
}
 
if (Kalender_Animation == 2) {
$('#hover_img').hover(function() {
 
$(this).animate({width:'160px'},300);
$(this).animate({top:'450px'},1000);
}, function() {
$(this).animate({top:'500px'},1000);
$(this).animate({width:'90px'},300);
});
};
 
if (Kalender_Animation == 3) {
$('#hover_img').css('width','130px').css('left','-60px').hover(function() {
$(this).animate({left:'0px'},600);
$(this).animate({top:'450px'},1000);
}, function() {
$(this).animate({top:'500px'},1000);
$(this).animate({left:'-60px'},300);
});
};
 
if (Kalender_Animation == 4) {
$('#hover_img').css('opacity','0.5').hover(function() {
$(this).animate({width:'160px'},300);
$(this).animate({opacity:'1.0'},300);
}, function() {
$(this).animate({width:'90px'},300);
$(this).animate({opacity:'0.5'},1000);
});
};
 
});
</script>
 
<a href="https://www.hilfe-tricks-tipps.de/page-104774-21.html"><img id="hover_img" src="https://files.homepagemodules.de/b104774/f46t1197p2706n145_khbVxERS.png"></a>
 

Schließen

Wolfgang

Antworten!

Gabriella findet das Top!

Thema abonieren Startseite Letzte Beiträge

Antworten

#5 | RE: Zu Silvester: Feuerwerk-Effekte für die Homepage

30.12.2016 11:26 (zuletzt bearbeitet: 31.12.2016 09:44)

Hallo Wolfgang,

ich hab mal wieder ein Problem im Garten. Plugins kann ich schon gar keine mehr schalten, da Kontingent von 15 Stück erreicht. Zum Nachbau? Also auf einer HTML SEite (eigene Seite machen)? Hast Du evtl. Zeit mir die wenigstens für den Garten zu machen? Im Radioportal, möchte ich das in einer Box machen, links oder rechts, geht das? Im Musengarten, Handarbeitsforum und im Havaneserforum würde ich es dann selber machen, wenn Du mir die Vorlage dazu im Garten machen würdest :))

**********

Ich habe nun genau das Script hier im Garten eingebaut und zwar in der Kopfzeile. Wäre jetzt alles i. O. nur zeigt es mir natürlich nun Deine Seite an. Würde mich zwar nicht stören, aber die beiden Links unten links, müssten jetzt nicht auf dem Bild sein. Die Flaschenposition liesse ich auch da, aber eigentlich möchte ich mein Script im Feuerwerk haben, das blöde ist, dass es zu schnell verschwindet, sprich, man in der kurzen Zeit nicht alles lesen kann. Einstellung habe ich leider dazu keine gefunden, das die Schrift länger stehen bleibt, da wo Du nur Happy New Year hast.
In der Portalbox vom Garten steht noch das, was ich abgeändert habe. Ich kann nicht einfach, das aus der Box, z. B. in die Kopfzeile setzen, passt leider nicht, wegen dem Rahmen, zudem wäre es besser, wenn der das Pyro Dings auch einbeziehen würde. Schriftgrösse ist leider zu klein, da ist ja auch nichts, wo ich die einstellen kann. Das mit der Flasche und dem HG BIld würde mir ja schon gefallen. Hatte vorher auch nur das Pyro Script von 2013 eingestellt, das wäre wenigsten unter den beiden Awards, nur eben bei dem was ich da schreibe, zu kurz angezeigt.

Lieber Gruss und Dank

Gabi

https://www.garten-der-poesie.de

Antworten!

Thema abonieren Startseite Letzte Beiträge

Antworten