Feuerwerk zum Geburtstag oder andere Anlässe - Teil 1 Aktualisiert 11.02.23
Die Idee und das Grundskript stammt von Daishi! Mal wieder besten Dank!
Die Idee war, für die Foren-Mitglieder etwas Besonderes zum Geburtstag zu präsentieren. Ein Feuerwerk!
Aber wie soll es aussehen, um es in Foren-Beiträgen anzuwenden? Am besten wäre ein Foren-Code, der beliebig anpassbar ist! Oder?
Was kann das folgende Skript?
Über nur einen neuen Foren-Code wird das Geburtstags-Feuerwerk ausgelöst! Die Mittteilung (3 Zeilen), der Auslöse-Grafik und die Button-Beschriftung lassen sich beliebig anpassen!
Auslösung über Grafik oder Button oder Beides!
Ausschalten der Animation durch einen Klick ins Feuerwerk oder automatisch nach einer eingestellten Zeit!
Wer möchte kann auch manuell eine Musikuntermalung mit einblenden!
Das Skript kann auch für andere besondere Anlässe eingesetzt werden wie, "bestandene Prüfung", "Mitglied seit" oder auch für ein "Dankeschön"!
Neu! Das Geburtstagsfeuerwerk ist jetzt mit einem zusätzlichen X-Button zum Schließen des Intros ausgestattet!
Was kann das Skript nicht?
Werden mehr als ein Ereignisse auf einer Seite eingetragen, wird immer der letzte Text in der Animation angezeigt!
<audio id="audioplay_feuer"> <source src="https://files.homepagemodules.de/b104774/f46t1743p4728n2_rGWegVkX.mp3" type="audio/mp3"> Ihr Browser kann die Audio-Datei nicht wiedergeben! </audio>
<script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> <script> function start_intro() {
var w = c.width = window.innerWidth, h = c.height = window.innerHeight, ctx = c.getContext('2d'),
Wegen der Variablen ein PIugin unter "Untere Leiste - header" anlegen!
Wichtig! Im Plugin müssen rechts oben "Unterstützte Templates" markiert werden, z.B.: Business - Template (144) und Mobile - Template (177) (Auswahl mit Mausklick oder Strg + Mausklick)!
In Zeile 71 ist die Sound-Datei zu finden und kann beliebig ausgetauscht werden!
In Zeile 91-93 kann die Schriftdarstellung mobil und in Zeile 97-99 in der Desktop-Version geändert werden, in Zeile 108+126 die Zeiten für das Feuerwerk Teil 1+2!
In Zeile 498 kann die Zeit für das automatische Beenden des Feuerwerks eingestellt werden (hier 90Sek, Eintrag in mS) !
<audio id="audioplay_feuer"> <source src="https://files.homepagemodules.de/b104774/f46t1743p4728n2_rGWegVkX.mp3" type="audio/mpeg"> Ihr Browser kann die Audio-Datei nicht wiedergeben! </audio>
<script> function start_intro() { //$('body').prepend(`<canvas id=c class="toggle_ani" style="display:none;"></canvas>`); var w = c.width = window.innerWidth, h = c.height = window.innerHeight, ctx = c.getContext('2d'),
<img class="start_img" src="{{img}}"><span class="start_anim">{{text}}</span><script>var zeile_a='{{zeilea}}'; var zeile_b='{{zeileb}}'; var zeile_c='{{zeilec}}';</script>
Grafik:
1
//files.homepagemodules.de/b2001010/a_485.png
Weitere Einstellungen:
1
Reihenfolge: 0
Schließen
Beschreibung unter "Iconbar > HTML" anlegen.
Namen vergeben z.B. "Anlässe mit Feuerwerk".
Unter "HTML" den folgenden Code eintragen.
Speichern und Icon platzieren!
1
<div onclick="xob_insert(`[Geburtstag=HAPPY=BIRTHDAY=WERTER USER=https://files.homepagemodules.de/b104774/a_471_0b886575.png=Alles Gute zum Geburtstag]`,``)" class="xob_icon_cont" id="icon_11111"><img alt="Feuerwerk" title="Anlässe mit Feuerwerk" class="xob_icon" src="//files.homepagemodules.de/b2001010/a_485.png"></div>
So sieht der eingetragene Foren Code nach einem Klick aus:
Alle Eingaben sind durch ein Gleichheitszeichen (=) getrennt!
Möchte das Feuerwerk ohne Grafik oder ohne Text starten, nur die Grafikadresse oder den Buttontext aus dem eingetragenen Foren-Code herauslöschen. Die Gleichheitszeichen bleiben stehen!
Der 1. Eintrag = 1. Zeile (HAPPY)!
Der 2. Eintrag = 2. Zeile (BIRTHDAY)
Der 3. Eintrag = Der Name (USER)!
Der 4. Eintrag = Bildadresse für die Start-Grafik (https://....)!
Der 5. Eintrag = Button-Text (Alles Gute zum Geburtstag)!
1
[Geburtstag=HAPPY=BIRTHDAY=USER=//files.homepagemodules.de/b104774/a_471_0b886575.png=Alles Gute zum Geburtstag]
Schließen
Das Geburtstagsfeuerwerk in Aktion (Bitte anklicken!)
Alles Gute zum Geburtstag
Der Forencode im Beitrag:
1
[Geburtstag=HAPPY=BIRTHDAY=WERTER USER=https://files.homepagemodules.de/b104774/a_471_0b886575.png=Alles Gute zum Geburtstag]
Bis dann und viel Spaß Wolfgang
Wolfgang
hat folgende Dateien an diesen Beitrag angehängt
Für die Portal-Box: Feuerwerk zum Geburtstag oder andere Anlässe - Teil 2 Aktualisiert 22.09.22
Wer ein Premium-Forum hat, kann auch in den Portal-Boxen das Geburtstagsfeuerwerk platzieren! Um das Geburtstagsfeuerwerk zu automatisieren, muss zusätzlich die Box "Events & Geburtstage" installiert werden!
Was kann die folgende Installation?
Die "Event- und Geburtstags-Box" wird mit einen Auslöse-Button und einer Auslöse-Grafik erweitert!
Im Geburtstagsfeuerwerk werden automatisch die Namen eingetragen!
Wie in Teil 1 sind alle weiteren Funktionen möglich!
Installation für das Portal in den Templates (v1-4)
Einbau-Anleitung:
Damit das Geburtstagsfeuerwerk im Portal funktioniert, muss das Skript aus Teil 1 installiert sein! Die neuen Foren-Codes sind für die Portal-Anzeige nicht notwendig!
Als erstes im Portal die Box "Events & Geburtstage aufrufen und installieren"! Pfad: "Portal > Portal bearbeiten > Box einfügen anklicken > Events & Geburtstage auswählen > Neu"
Neue "SimpleTextBox" aufrufen, Überschrift vergeben und das folgende Skript eintragen! Wichtig! Boxen-ID's mit "Rechter Maustaste" auslesen und im Skript in Zeile 12+13 eintragen!
Mit "Portal > Drag & Drop" die Box an die richtige Stelle schieben!
Fertig!
In Zeile 2 ist die Auslösegrafik zu finden (hier eine Krone)
In Zeile 3 kann der Button-Text angepasst werden!
In Zeile 9+10 werden die ersten beiden Zeilen für das Feuerwerk bestimmt! Der Geburtstagsname wird automatisch eingetragen!
In Zeile 12 wird die ID (nur Zahlen) von der Box "Events & Geburtstage" eingetragen! Wie finde ich die ID? Rechte Maustaste auf die Box klicken. Die Zahl von "boxcontainer, unserbox oder boxcont" entnehmen und eintragen!
In Zeile 13 wird die ID (nur Zahlen) von der Feuerwerk-Box "SimpleTextBox" eingetragen! Wie finde ich die ID? Rechte Maustaste auf die Box klicken. Die Zahl von "boxcontainer, unserbox oder boxcont" entnehmen und eintragen!
var id_Geburtstagsbox = "82"; // Rechte Maustaste "Untersuchen" var id_Feuerwerk = "76"; // Rechte Maustaste "Untersuchen"
//////// Ende der Eingabe ////////
$('#boxcont_'+id_Geburtstagsbox+' div:first').clone().prependTo('#boxcont_'+id_Feuerwerk+''); var name_g = $('#boxcont_'+id_Feuerwerk+' div:first a').text(); var zeile_c=''+name_g+'';
if (!$('#boxcont_'+id_Geburtstagsbox+' div:first a').length) { $('.close_ani').hide(); };
Update: Feuerwerk zum Geburtstag oder andere Anlässe - Teil 1+2
Das Geburtstagsfeuerwerk kann mit einem Klick auf die Seite beendet werden! Wer das nicht weiß, muss auf die automatische Schließung nach ca. 60 Sekunden warten oder mit den Pfeil-Tasten zurückspringen! Sehr unschön!
Das Geburtstagsfeuerwerk hat deswegen einen zusätzlichen X-Button zum Beenden bekommen!
Auch der neue Foren-Code musste wegen einer Funktionsstörung im Beitrag geändert werden!
Bis dann und besten Dank an nobody für den Hinweis
Anlässlich zu unserem 10. Forum-Geburtstag hat mir der Wolfgang nach meinen Ideen und Vorstellungen einen Gruß an die Mitglieder mit Feuerwerk programmiert. Drück mich, heute werde ich 10!
Danke Wolfgang für deine unendliche Geduld, für deine Zusammenarbeit und behalte deine Freude anderen zu helfen! Das ist in dieser heutigen Zeit nicht alltäglich und schon was besonderes.
Liebe Grüße aus Radeberg vom Arndt
PS: Wolfgang, wenn du willst, kannst du den Skript selbstverständlich hier veröffentlichen, da ich den Gruß am Wochenende wieder aus dem Forum nehmen werde. Nochmal PS: Aus einer Powerpoint habe ich die GIF-Datei gemacht, zu irgendwas muss ich ja auch nütze sein...
Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:
<!-- Sound --> <audio id="audioplay_feuer"> <source src="https://files.homepagemodules.de/b610439/a_958_6b5927b8.wav"> Ihr Browser kann die Audio-Datei nicht wiedergeben! </audio>
<center><img class="start_img" src="https://files.homepagemodules.de/b610439/a_77_c56ff707.gif"><span onclick="start_feuerwerk();" class="start_anim">Drück mich, heute werde ich 10 !</span><img class="start_img" src="https://files.homepagemodules.de/b610439/a_77_c56ff707.gif"></center>
<div id="about_modal" title="Intro schließen"> <center>10 Jahre <br /> Forum-Transportunternehmer <br /> - - - - - <br /> Danke an alle Mitglieder und Gäste für Eure Treue, Ideen und Mitarbeit!</center> </div>
<!-- Feuerwerk --> <canvas id="canvas"></canvas>
<script> /*** Start Intro ***/ function start_intro() { document.getElementById('audioplay_feuer').play();
/*** Stop Animation ***/ function stop_intro(){ location.reload(); };
/*** Stop Animation nach Zeit ***/ setTimeout(stop_intro, 32000);
/* now we will setup our basic variables for the demo */ var canvas = document.getElementById( 'canvas' ), ctx = canvas.getContext( '2d' ), cw = window.innerWidth, ch = window.innerHeight, fireworks = [], particles = [], /* starting hue */ hue = 120, /* when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks */ limiterTotal = 5, limiterTick = 0, /* this will time the auto launches of fireworks, one launch per 80 loop ticks */ timerTotal = 80, timerTick = 0, mousedown = false, mx, my;
canvas.width = cw; canvas.height = ch;
function random( min, max ) { return Math.random() * ( max - min ) + min; }
<!-- Sound --> <audio id="audioplay_feuer"> <source src="https://files.homepagemodules.de/b610439/a_958_6b5927b8.wav"> Ihr Browser kann die Audio-Datei nicht wiedergeben! </audio>
<br /> <center> <div onclick="start_feuerwerk();"> <span class="start_anim">Drück mich, heute werde ich 10 !</span> <br /> <img class="start_img" src="https://files.homepagemodules.de/b610439/a_77_c56ff707.gif"> </div> </center>
<div id="about_modal" title="Intro schließen"> <center>10 Jahre <br /> Forum-Transportunternehmer <br /> - - - - - <br /> Danke an alle Mitglieder und Gäste für Eure Treue, Ideen und Mitarbeit!</center> </div>
/* now we will setup our basic variables for the demo */ var canvas = document.getElementById( 'canvas' ), ctx = canvas.getContext( '2d' ), cw = window.innerWidth, ch = window.innerHeight, fireworks = [], particles = [], /* starting hue */ hue = 120, /* when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks */ limiterTotal = 5, limiterTick = 0, /* this will time the auto launches of fireworks, one launch per 80 loop ticks */ timerTotal = 80, timerTick = 0, mousedown = false, mx, my;
canvas.width = cw; canvas.height = ch;
function random( min, max ) { return Math.random() * ( max - min ) + min; }
Hallo Wolfgang, läuft die mobile Version unter Android problemlos? Auf einem IPhone geht es leider nicht. Ich hab gestern mit Oskar nochmal einiges probiert, aber nichts zufriedenstellendes hinbekommen (er vermutet, das bei Apple keine wav-Musikdateien gehen).
Beste Grüße vom Arndt
Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche: