Star Wars Intro

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Star Wars Intro

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 11, 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 11, 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 Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. 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 | Star Wars Intro datum

28.08.2022 14:28 (zuletzt bearbeitet: 02.02.2023 07:39)

Daishi

Informationen anzeigen

Beitr�ge:	387
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	329

Hallo Wolfgang, ich habe mal ein nettes, schönes Intro gebastelt.

Hier ist meine beste Arbeit bis jetzt von meiner Sicht, ich denke, das hat noch keiner.

Das war bis jetzt meine beste Idee denke ich, und hoffe sie gefällt dir. Während das Intro läuft kann man auch anklicken. Beim nächsten Durchlauf wird es angezeigt, es funktioniert.

Ist mit Sound, hoffe das war ok, fängt dunkel an und dann lass dich überraschen.

Sound und Lautsprecher kann man anhalten und stumm schalten.

Hier der HTML Code:

1
2
3
4
5
6
7
8
9
10
11
 
  <!-- hier kommt die musik adresse rein -->
 
<embed src="https://ia801703.us.archive.org/15/items/StarWarsThemeSongByJohnWilliams/Star%20Wars%20Theme%20Song%20By%20John%20Williams.mp3" hidden="true" autostart="true" loop="true">
 

 
 <span></span>
<div>
  <!-- Hier kommt die adresse rein von Forum oder Webseite--> 
  <iframe src="https://www.hilfe-tricks-tipps.de/"></iframe>
</div>  
 

Schlie�en

Hier der CSS Code:

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
 
  body {
  background-color: black;
  overflow: hidden;
}
 
span {
  position: relative;
  display: block; 
  width: 630px; 
  height: 195px; 
  margin-top: 200px;
  margin-left: auto; 
  margin-right: auto;
  opacity: 0;
  background-size: cover;
  background-image: url(http://imgh.us/logo_claim.svg);  
  animation-name: logo;
  animation-duration: 10s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-delay: 0s;
  
}
 
div {
  display: inline-block;
  width: 100%;
  height: 1200px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  transform-origin: 50% 50%;
  transform: perspective(400px) rotateX(40deg);
}
/* hier kann man die geschwindigkeit einstellen*/
iframe {
  position:relative;
  border-style: none;
  width: 100%;
  height: 10060px;
  overflow: hidden;
  background-color: white;
  opacity: 0;
  animation-name: scrollDown;
  /* hier kann man die scrollgeschwindigkeit einstellen für schnell ist 40s */
  animation-duration: 100s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* hier kann man die einblendgeschwindigkeit einstellen für schnell ist 6s */
  animation-delay: 12s;
}
 
@keyframes logo {
  10% {
    opacity: 1; 
  }
  100% {
    opacity: 0; 
    width: 0px;
    height: 0px;
  }
}
 
@keyframes scrollDown {
  0% {
    top: 1500px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    top: -10060px;
  }
}  
 

Schlie�en

Sehr saubere Ansicht, sehr schön.

Habe es auch auf eigene Seite eingebaut im Testforum leider bekomme ich es nicht sauber zum Laufen. Habe noch eine große Schwäche mit dem Xobor-Forum, das ist noch sehr schwer für mich, manchmal bekomme ich was hin dann wieder nicht.

Muss noch fürs Xobor - Forum umgeändert werden.

Schlechte Qualität, denke das man die CSS - Tags noch umschreiben muss für das Xobor - Forum. Ich habe mit dem Umschreiben noch sehr große Probleme. Man merkt im Forum selbst ändern sich die Tags ständig und man muss alle Scripts nacharbeiten und neu justieren.

Ich hoffe, dass meine Inspiration gut ankommt.

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang und Nara finden das Top!

Antworten

#2 | Star Wars Intro fürs Forum modifiziert - Teil 1-3! datum

29.08.2022 19:32

Star Wars Intro fürs Forum modifiziert!

Hallo Daishi,
es ist wirklich eine Klasse für sich, was man mit "transform", "animation", "@keyframes" und "Co" alles machen kann, und das nur aus der CSS heraus!
Ich bin so wie so ein Freund von Effekten, aber auch hier muss man schauen, was man nimmt und wie oft man es einspielt.

Ich habe mal Dein super Skript forumtauglich gemacht und festgestellt, dass die eingestellten Werte von einander stark abhängig sind.
Zum Schluß muss man immer prüfen, ob die Geschwindigkeit die Dauer, die Schräge und die Position des Intros passt!
Ich habe Dein Skript im Plugin "Globale Nachricht" eingefügt, sehr praktisch!
Das Plugin kann von Haus aus bestimmen, wie oft etwas wiederholt wird, wenn es weggeklickt wird (1-4 Tage oder unendlich)!
Habe das Skript so gebaut, dass es nur auf der Forum-Übersicht läuft!
Ein Klick auf die Seite stoppt das Intro, ein Klick auf das "X" oder den Lösch-Button setzt das Intro aus!
Auch nach Ablauf einer festgesetzten Zeit wird das Intro automatisch angehalten.
Man kann sich so den Effekt in Ruhe anschauen, stoppen oder auch für Tage wegklicken!
Das folgende Skript läuft ohne iFrame-Einbindung!
Autoplay beim Seitenneustart wird überall unterbunden, auch auf "youTube", hier muss man den Sound extra anklicken!
Ist für die Startseite auch gut so, denke ich!

Lasse das "Star Wars Intro" zur Probe hier im Forum laufen, viel Spaß!

Nicht so schön ist es komplette Webseite in ein iFrame einzubinden. Einige Webeseite sind mit iFrame-Sperren ausgerüstet, damit sie nicht auf fremde Webseiten eingebaut werden können!

Die Einbau-Anleitung folgt !

Installation erstmal nur fürs Business-Template

Bevor man das Intro einbauen will, muss man sich fragen, welches Ausmaß das Intro annehmen soll!
Soll die ganze Seite, die Kopfzeile oder nur eine Box mit dem Intro versehen werden!
Will man schnell im Forum Navigieren, ist eine komplette Animation der Seite nicht zu empfehlen, hier sind Boxen oder die Kopfzeile angebracht!

Antworten

#3 | Star Wars Intro fürs Forum modifiziert - Teil 1-3! datum

01.09.2022 23:12 (zuletzt bearbeitet: 02.09.2022 07:03)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3398
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1280

Star Wars INTRO fürs Forum modifiziert - Fürs Portal Teil 1!

Hallo Daishi,
wie ich feststellen musste, ist im Nachgang immer noch eine Anpassung notwendig...
Da rutscht das Into zu weit nach rechts, ist zu groß und man muss immer einen übergeordneten Div-Container haben!
Auch muss die Länge der Startseite für die Einstellungen des Intros mit in Betracht gezogen werden!
Möchte man das Intro für eine Startseite nutzen ist es wichtig, dass man das Intro auch abschalten kann und dass es nur auf einer Seite angezeigt wird!
Da im Business-Template ausreichend Classes und ID's vergeben wurden sind, lässt sich das Star Wars Intro relativ gut einzubauen!

Was kann das Star Wars Intro?

Mit der folgenden Installation wird die gesamte Portal-Seite im Star Wars-Stiel animiert angezeigt
Wer möchte kann den Sound manuell dazuschalten!
Ein Klick auf die Seite stoppt das Intro!
Ein Klick auf den "Intro-Button" schließt die Animation für die im Plugin eingestellten Tage!

Installation fürs Business Template(v4) und die Portalseite

Einbau-Anleitung:

Für die Installation ist das Plugin "Globale Nachricht" notwendig!
Sehr praktisch, da das Plugin von Haus aus bestimmen kann, wann etwas wiederholt angezeigt wird, wenn man es wegklickt (1-4 Tage oder unendlich)!

Plugin-Store unter "Admin > Plugins > Home > Plugin-Store" aufrufen!
Plugin "Globale Nachricht" installieren!
Rechte vergeben! Style und Farbeinstellungen haben keinen Einfluss!
Folgendes Skript unter "Nachricht" einfügen.
Unter "Cookie Lebenszeit" werden die Tage angeben, nachdem das weggeklickte Intro wieder angezeigt werden soll!
Fertig! Speichern nicht vergessen!

Das komplette Skript!

In Zeile 40 wird die Schräglage bestimmt!
In Zeile 52+86 wird die max. Dauer der Animation eingestellt
In Zeile 18-28 kann das Aussehen des Intro-Buttons angepasst werden!
In Zeile 68 steckt der Sound!

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
 
<style>
#forumActionInfoCont, .delspan, .footer {
  display:none !important; 
}
#forumActionInfo {
  background:none !important; 
  border:none !important;
}
.notification_wrapper {
  border:none !important; 
  box-shadow:none !important; 
  background:none !important;
}
.notification_div div:last-child {
  display:none !important; 
}
.close_intro_button {
  font-family:arial;
  font-size:18px;
  color: #ffdddd;
  letter-spacing: 5px;
  font-weight:bold;
  padding: 10px 20px;
  margin:10px 5px;
  background:#aa0000;
  border-radius:5px;
  border:1px solid#aaaaaa;
  cursor:pointer;
}
.body_toggle {
  right:0;
  margin: auto;
  margin-top:-150px;
  display:table;
  width: 80%;
  height: 0;
  overflow: hidden;
  position: absolute;
  cursor:pointer;
  transform:  perspective(800px) rotateX(20deg);
}
.container_toggle {
  z-index:-1;
  position:absolute;
  left: 0;
  right: 0;
  margin: auto;
  display:table;
  width: 80%;
  height: 100%;  
  overflow: hidden;
  animation: scrollDown linear 25s;
}
@keyframes scrollDown {
  0% { top: 400px; }
  100% { top: -4000px; }
}
</style>
 

<script>
window.addEventListener('load', function(){
 
if($('.portal').length){
 
$('body').before(`
<button class="close_intro_button" onclick="close_notification(); location.reload();">Intro ausschalten</button>
<p class="body_sound"><audio controls> <source src="https://ia801703.us.archive.org/15/items/StarWarsThemeSongByJohnWilliams/Star%20Wars%20Theme%20Song%20By%20John%20Williams.mp3"  type="audio/mp3"> </audio></p>
`);
 
$('body').addClass('body_toggle');
$('.container').addClass('container_toggle');
}
 
$('html').on('click',function(){
$('body').removeClass('body_toggle')
$('.body_sound').remove();
$('.container').removeClass('container_toggle');
}).css('cursor','pointer');
 
function newload_intro(){
$('body').removeClass('body_toggle');
$('.body_sound').remove();
$('.container').removeClass('container_toggle');
};
setTimeout(newload_intro,25000);
 
});
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Bis dann, viel Erfolg beim Einbau und besten Dank an Daishi!
Wolfgang

Antworten

#4 | Star Wars INTRO fürs Forum modifiziert - Für die Portal-Boxen - Teil 2! datum

03.09.2022 12:58 (zuletzt bearbeitet: 04.09.2022 10:01)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3398
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1280

Star Wars INTRO fürs Forum modifiziert - Für die Portal-Boxen - Teil 2!
Aktualisiert 04.09.22

Will man das "Star Wars Intro" oder den Effekt in die Portal-Boxen einbauen, ist folgendes zu bedenken:

Ist der Sound hier wirklich notwendig?
Beim Seiten-Neustart ist bereits Standard, dass der Sound unterbunden und nicht automatisch gestartet werden kann!
Die Player-Konsole nimmt auch noch zusätzlich Platz ein!
Welche Box soll das Intro bekommen?
Die seitlich kleinen Boxen oder besser, die mittleren Boxen?
Das Intro läuft schräg nach oben. Der Erkennungswert der Box ist dadurch gemindert! Muss das so sein?
Mit einem kleinen Eingriff kann der Inhalt der Box automatisch gerade nach oben scrollen!

Oder so, siehe Text?

Installation fürs Business Template (v4) und für Portal-Boxen

Einbau-Anleitung:

Für die Installation ist auch hier das Plugin "Globale Nachricht" notwendig!
Sehr praktisch, da das Plugin von Haus aus bestimmen kann, wann etwas wiederholt angezeigt wird, wenn man es wegklickt (1-4 Tage oder unendlich)!

Plugin-Store unter "Admin > Plugins > Home > Plugin-Store" aufrufen!
Plugin "Globale Nachricht" installieren!
Rechte vergeben! Style und Farbeinstellungen haben keinen Einfluss!
Folgendes Skript unter "Nachricht" einfügen.
Unter "Cookie Lebenszeit" werden die Tage angeben, nachdem das weggeklickte Intro wieder anzeigt werden soll!
Fertig! Speichern nicht vergessen!

Das komplette Skript!

Der Sound und damit auch die Player-Konsole ist nicht eingebaut!
In Zeile 47 wird die Schräglage bestimmt!
Wird sie gelöscht oder auskommentiert, läuft sie gerade von unten nach oben!
In Zeile 58+105 wird die max. Dauer der Animation eingestellt
In Zeile 18-28 kann das Aussehen des Intro-Buttons angepasst werden!
In Zeile 92+93 steckt eine Hintergrund-Info für die leere Portalbox!
In Zeile 63-70 kann der Inhalt formatiert werden!
Wichtig! Box-ID in Zeile 83 eintragen!
Box ID über "Rechte Maustaste" - Portal-Box - "Untersuchen"

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
 
<style>
#forumActionInfoCont, .delspan {
  display:none !important; 
}
#forumActionInfo {
  background:none !important; 
  border:none !important;
}
.notification_wrapper {
  border:none !important; 
  box-shadow:none !important; 
  background:none !important;
}
.notification_div div:last-child {
  display:none !important; 
}
.close_intro_button {
  float: right;
  font-family:arial;
  font-size:12px;
  color: #ffffff;
  letter-spacing: 5px;
  font-weight:bold;
  padding: 0px 10px 2px 13px;
  background:#990000;
  border-radius:5px;
  border:1px solid#aaaaaa;
  cursor:pointer;
}
.close_intro_button:hover {
  background:#4444ee;
}
.header .usercontent, .header {
  background-color: #11277e !important;
}
.body_toggle {
  border:none;
  margin: auto;
  margin-bottom:30px;
  display:table;
  width:92%;
  height: 0;
  overflow: hidden;
  position: relative;
  cursor:pointer;
/* Schräglage der Animation - kann ausgeblendet werden */
  transform:  perspective(800px) rotateX(20deg);
}
.body_toggle .boxheader {
  z-index:9999 !important;
}
.container_toggle {
  padding:20px;
  margin: 50px;
  border:1px solid #aaaaaa;
  position:relative;
  overflow: hidden;
  animation: scrollDown linear 25s;
  border-radius:5px;
  z-index:999 !important;
}
.back_info {
  z-index:99; 
  position:absolute; 
  bottom:0; 
  left:0; 
  right:0; 
  margin:auto auto 60px auto; 
  border:0px; 
  padding:10px 60px 10px 30px; 
}
 
@keyframes scrollDown {
  0% { top:400px; }
  100% { top: -400px; }
}
</style>
 
 
<script>
window.addEventListener('load', function(){
/* Box ID - Rechte Maustaste - Portal-Box - "Untersuchen" */
var Box_ID = "1105";
 
if($('.portal').length){
  $('#boxcontainer_'+Box_ID+' .boxheader').prepend(`
    <button title="Intro schließen!" class="close_intro_button" onclick="close_notification(); location.reload();">&#x2716; </button>
  `);
 
  $('#boxcontainer_'+Box_ID+' .spacer10').before(`<center><div class="back_info">
 
    <!-- Hintergrund-Info für die leere Portal-Box - Hier eine Grafik -->
    <img width="150px" src="//files.homepagemodules.de/b104774/a_152_f2cf5aac.png">
 
  </div></center>`);
 
  $('#boxcontainer_'+Box_ID+' .box').addClass('body_toggle');
  $('#boxcontainer_'+Box_ID+' .spacer10').addClass('container_toggle');
 
  function newload_intro(){
    $('#boxcontainer_'+Box_ID+' .box').removeClass('body_toggle');
    $('.body_sound').remove();
    $('#boxcontainer_'+Box_ID+' .spacer10').removeClass('container_toggle');
    $('.back_info').remove();
  };
  setTimeout(newload_intro, 24000);
 
};
 
});
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Bis dann, viel Erfolg beim Einbau und besten Dank an Daishi!
Wolfgang

Daishi findet das Top!

Antworten

#5 | RE: Star Wars INTRO fürs Forum modifiziert - Für die Portal-Boxen - Teil 2! datum

03.09.2022 13:23 (zuletzt bearbeitet: 10.09.2022 10:48)

Riesen Respekt von mir, das hast du super umgesetzt, sieht echt Hammer aus, ist schlicht und einfach. Das sieht in der Portal-Box sehr gut aus.

Ich gebe nur eine ehrliche Meinung ab, Geschmäcker sind ja verschieden. Ich finde, ehrliche Meinungen sind ja auch sehr wichtig. Ich sehe das du daran ja schon Tage sitzt und sie bearbeitest und dir den Kopf zerbrichst. Jetzt sehen sie gut aus!

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#6 | Star Wars INTRO fürs Forum modifiziert - Beliebige Startseite - Teil 3! datum

04.09.2022 09:08

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3398
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1280

Star Wars INTRO fürs Forum modifiziert - Beliebige Startseite - Teil 3!
Aktualisiert 05.09.22

Was kann das Star Wars Intro in Teil 3?

Mit der folgenden Installation kann die Start-Seite im Star Wars-Stiel ausgesucht werden!
Es braucht nur die Classes einer oder mehrere Seiten eingetragen zu werden, z.B. die Forum Übersicht, der Blog, die Bildergalerie, u.s.w.
Wer möchte kann den Sound manuell dazuschalten!
Ein Klick auf die Seite stoppt das Intro!
Ein Klick auf den "Intro-Button" schließt die Animation für die im Plugin eingestellten Tage!

Star Wars Intro - Hier der Kalender

Installation fürs Business Template(v4) und einer beliebigen Startseite

Einbau-Anleitung:

Für die Installation wird auch hier das Plugin "Globale Nachricht" benötigt!
Sehr praktisch, da das Plugin von Haus aus bestimmen kann, wann etwas wiederholt angezeigt wird, wenn man es wegklickt (1-4 Tage oder unendlich)!

Plugin-Store unter "Admin > Plugins > Home > Plugin-Store" aufrufen!
Plugin "Globale Nachricht" installieren!
Rechte vergeben! Style und Farbeinstellungen haben keinen Einfluss!
Folgendes Skript unter "Nachricht" einfügen.
Unter "Cookie Lebenszeit" werden die Tage angeben, nachdem das weggeklickte Intro wieder anzeigt werden soll!
Fertig! Speichern nicht vergessen!

Das komplette Skript!

In Zeile 40 wird die Schräglage bestimmt!
In Zeile 53+94 wird die max. Dauer der Animation eingestellt
In Zeile 18-28 kann das Aussehen des Intro-Buttons angepasst werden!
In Zeile 74 steckt der Sound!
In Zeile 66 wird die Class der Seite eingetragen, die animiert werden soll! Mehrere Seiten werden durch ein Komma getrennt!

.page_index (Forum Übersicht), .page_blog_main (Blog), .page_gallery (Bildergalerie), .page_calendar (Kalender), .page_geomap (Landkarte), .page_treetalk (Talk)

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
 
<style>
#forumActionInfoCont, .delspan, .footer {
  display:none !important; 
}
#forumActionInfo {
  background:none !important; 
  border:none !important;
}
.notification_wrapper {
  border:none !important; 
  box-shadow:none !important; 
  background:none !important;
}
.notification_div div:last-child {
  display:none !important; 
}
.close_intro_button {
  font-family:arial;
  font-size:14px;
  color: #ffdddd;
  letter-spacing: 5px;
  font-weight:bold;
  padding: 3px 10px;
  margin:10px 5px;
  background:#aa0000;
  border-radius:5px;
  border:1px solid#aaaaaa;
  cursor: pointer;
}
.body_toggle {
  left:0;
  right:0;
  margin: 0 auto; 
  display: table;
  width: 80%;
  height: 0;
  overflow: hidden;
  position:relative;
  cursor:pointer;
  transform:  perspective(1600px) rotateX(30deg);
}
.container_toggle {
  z-index:-1;
  position:relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: table;
  width: 90%;
  max-height: 100%; 
  height:1000px;
  overflow: hidden;
  animation: scrollDown linear 21s;
}
@keyframes scrollDown {
  0% { top: 400px; }
  100% { top: -1500px; }
}
</style>
 
 
<script>
/* Classes der Intro - Seite */
/* .page_index, .page_blog_main, .page_gallery, .page_calendar, .page_geomap, .page_treetalk */
 
var IntroPage = " .page_index"; 
 
window.addEventListener('load', function(){
 
  if($(''+IntroPage+'').length){
 
    $('body').before(`
      <button class="close_intro_button" onclick="close_notification(); location.reload();">Intro ausschalten</button>
      <p class="body_sound"><audio controls> <source src="https://ia801703.us.archive.org/15/items/StarWarsThemeSongByJohnWilliams/Star%20Wars%20Theme%20Song%20By%20John%20Williams.mp3"  type="audio/mp3"> </audio></p>
    `).css('overflow','hidden');
 
    $('body .container').addClass('body_toggle');
    $(''+IntroPage+'').addClass('container_toggle');
  };
 
  $('html').on('click',function(){
    $('body .container').removeClass('body_toggle')
    $('.body_sound').remove();
    $(''+IntroPage+'').removeClass('container_toggle');
    $('body,.body_toggle, .container_toggl').css('overflow','');
  }).css('cursor','pointer');
 
  function newload_intro(){
    $('body .container').removeClass('body_toggle');
    $('.body_sound').remove();
    $(''+IntroPage+'').removeClass('container_toggle');
    $('body,.body_toggle, .container_toggl').css('overflow','');
  };
setTimeout(newload_intro,20000);
 
});
</script>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Bis dann, viel Erfolg beim Einbau und besten Dank an Daishi!
Wolfgang

Daishi findet das Top!

Antworten

EINE NEUE HOFFNUNG FÜR DAS CODIEREN � � Digitale Visitenkarte

�hnliche Themen

Antworten

Letzter Beitrag

Ich stelle meine 2 Intros vor (Daishi)
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 5 23.05.2024 17:52
Daishi • Zugriffe: 323

Virtueller Nachruf für unsere lieben Menschen und liebgewonnenen Tiere
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi

16.11.2022 16:12
von

Daishi • Zugriffe: 957

Feuerwerk zum Geburtstag oder andere Anlässe - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

25.08.2023 20:30
von

Kipper-Spedition • Zugriffe: 1544

Ungeimpft
Erstellt im Forum Faszinationen & Unglaubliches! von Daishi 1 01.09.2022 00:58
Mato • Zugriffe: 366
Mitteilung an die Ungeimpften - Beitrag aus MMNews
Erstellt im Forum Spiritualit�t, Seele, New Age, Yoga, Gesundheit von Wolfgang 0 31.08.2022 21:38
Wolfgang • Zugriffe: 341
Spoiler Alarm
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 3 11.03.2024 10:24
Wolfgang • Zugriffe: 519
EINE NEUE HOFFNUNG FÜR DAS CODIEREN
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Daishi 3 29.08.2022 21:49
ichwersonst • Zugriffe: 334
Cookie-Fenster --> Das wäre eine elegante Lösung für Xobor-Foren
Erstellt im Forum Alles, was noch so �brig bleibt von 844er 1 05.08.2021 19:37
Wolfgang • Zugriffe: 1135

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

17%

Zum Einbau: Google-Translator!

Favoriten speichern

Forum - Star Wars Intro

Star Wars Intro fürs Forum modifiziert!

Star Wars INTRO fürs Forum modifiziert - Fürs Portal Teil 1!

Einbau-Anleitung:

Star Wars INTRO fürs Forum modifiziert - Für die Portal-Boxen - Teil 2!
Aktualisiert 04.09.22

Einbau-Anleitung:

Star Wars INTRO fürs Forum modifiziert - Beliebige Startseite - Teil 3!
Aktualisiert 05.09.22

Einbau-Anleitung:

Forum Lesezeichen ❌

Forum - Star Wars Intro

Star Wars Intro fürs Forum modifiziert!

Star Wars INTRO fürs Forum modifiziert - Fürs Portal Teil 1!

Einbau-Anleitung:

Star Wars INTRO fürs Forum modifiziert - Für die Portal-Boxen - Teil 2!Aktualisiert 04.09.22

Einbau-Anleitung:

Star Wars INTRO fürs Forum modifiziert - Beliebige Startseite - Teil 3!Aktualisiert 05.09.22

Einbau-Anleitung:

Forum Lesezeichen ❌

Star Wars INTRO fürs Forum modifiziert - Für die Portal-Boxen - Teil 2!
Aktualisiert 04.09.22

Star Wars INTRO fürs Forum modifiziert - Beliebige Startseite - Teil 3!
Aktualisiert 05.09.22