Forum - Idee und Inspiration mit Vorstellung der Scripte

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 � Idee und Inspiration mit Vorstellung der Scripte - Vorlagen

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 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 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 | Idee und Inspiration mit Vorstellung der Scripte - Vorlagen datum

10.06.2024 16:42 (zuletzt bearbeitet: 27.06.2024 01:20)

Daishi

Informationen anzeigen

Beitr�ge:	387
Registriert seit:	08.01.2022

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

Es war nur eine Idee und eine Inspiration. Für die Iconbar, mit besonderen Vorlagen. Man kann es auch abändern und für etwas anderes benutzen. Wie gesagt, es war nur eine Idee und eine Inspiration.

Also nicht wundern. In Zeile 2 - 14 habe ich noch eine Animation versucht einzubauen, sie funktioniert, habe sie aber deaktiviert, falls sie für andere unschön sein können. Wer es möchte, kann es löschen und muss bei "HTML Code" auch den Code löschen.

Wer es löschen möchte, kann dies hier tun, CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/*Zum Animieren freischalten*/
/*#location {
    -webkit-animation-name: bounceOutRight;
  	animation-name: bounceOutRight;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 5s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-delay: 5s;
    -moz-animation-iteration-count: 1;
}*/
 
 

Und HTML:

1
 
<div id="location">

Ich hoffe, dass ich es so weit verständlich erklärt habe, wenn man es nicht möchte, kann man das hier, was angegeben ist, löschen.

Damit es keine Verwirrung gibt, mache ich viele CSS - Scripte über PI als "Untere Leiste - Header". Mache es oft anders als andere Administratoren in ihren Foren.

Viele machen es in den vorgeschriebenen CSS - Code hinein.

Hier mal der CSS - Code für die PI:

Der CSS - Code für das PI

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
 
<style>
/*Zum Animieren freischalten*/
/*#location {
    -webkit-animation-name: bounceOutRight;
  	animation-name: bounceOutRight;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 5s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-delay: 5s;
    -moz-animation-iteration-count: 1;
}*/
 
#reqtangleOne {
    position: relative;
    top: 0px;
    left: 100px;
    width: 400px;
    height: 200px;
    background-color: #007bff;
}
 
#reqtangleTwo {
    position: relative;
    top: -193px;
    left: 100px;
    width: 390px;
    height: 180px;
    border-width: 3px 3px 3px 0px;
    border-color: #FFF;
    border-style: solid;
    z-index: 1;  
  	-webkit-animation-name: bounceInLeft;
  	animation-name: bounceInLeft;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-delay: 2s;
    -moz-animation-iteration-count: 1;
}
 
#reqtangleTwo p {
    position: relative;
    font-family: Arial;
    color: #FFF;
    text-align: justify;
    width: 260px;
    height: 140px;
    margin-top: 0px;
    margin-left: 3px;
    padding: 20px 20px 20px 110px;
    overflow-y: auto;
    z-index: 1;  
  	-webkit-animation-name: bounceInDown;
  	animation-name: bounceInDown;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 2.3s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-delay: 2.3s;
    -moz-animation-iteration-count: 1;
}
 
#triangle {
    position: relative;
    top: -386px;
    left: 500px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 0 100px 100px;
    border-color: transparent transparent transparent #007bff;
}
 
#imgSpin {  
  	-webkit-animation-name: bounceInLeft;
  	animation-name: bounceInLeft;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-delay: 2s;
    -moz-animation-iteration-count: 1;
}
 
#circleOne, #reqtangleOne, #triangle {
    -webkit-animation-name: bounceInLeft;
  	animation-name: bounceInLeft;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-delay: 1.5s;
    -moz-animation-iteration-count: 1;
}
 
#circleOne {
    position: relative;
    top: -586px;
    width: 200px;
    height: 200px;
    background-color: #007bff;
    border-radius: 50%;
}
 
#circleTwo {
    position: relative;
    top: -779px;
    left: 7px;
    width: 180px;
    height: 180px;
    background-color: #007bff;
    border-radius: 50%;
    border: 3px solid #FFF;
}
 
#iconIn img {
    position: relative;
    top: -1133px;
    left: 17px;
    border-radius: 50%;
    border: 3px solid #FFF; 
  	-webkit-animation-name: fadeIn;
  	animation-name: fadeIn;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 2.8s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-delay: 2.8s;
    -moz-animation-iteration-count: 1;
    z-index: 2;
}
 
#border_spin {
    position: relative;
    top: -961px;
    left: 11px;
    border: 9px dotted #FFF;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    z-index: 1;
    cursor: pointer;
    -webkit-animation: anim 30s infinite linear;
    -moz-animation: anim 30s infinite linear;
    -ms-animation: anim 30s infinite linear;
    animation: anim 30s infinite linear;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
}
 
/*ANIMATIONS*/
 
@-webkit-keyframes anim {
  	0%{-webkit-transform:rotate(0deg);} 
  	50%{-webkit-transform:rotate(360deg);} 
  	100%{-webkit-transform:rotate(720deg);}}
@-moz-keyframes anim {
  	0%{-moz-transform:rotate(0deg);} 
  	50%{-moz-transform:rotate(360deg);} 
  	100%{-moz-transform:rotate(720deg);}}
@-ms-keyframes anim {
  	0%{-ms-transform:rotate(0deg);} 
  	50%{-ms-transform:rotate(360deg);} 
  	100%{-ms-transform:rotate(720deg);}}
@keyframes anim {
  	0%{transform:rotate(0deg);} 
  	50%{transform:rotate(360deg);} 
  	100%{transform:rotate(720deg);}}
 
@-webkit-keyframes bounceInLeft {
    0% {opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px);}
    60% {opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px);}
    80% {-webkit-transform: translateX(-10px); transform: translateX(-10px);}
    100% {-webkit-transform: translateX(0); transform: translateX(0);}}
@keyframes bounceInLeft {
    0% {opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px);}
    60% {opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);}
    80% {-webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px);}
    100% {-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}}
 
@-webkit-keyframes bounceInDown {
    0% {opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px);}
    60% {opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px);}
    80% {-webkit-transform: translateY(-10px); transform: translateY(-10px);}
    100% {-webkit-transform: translateY(0); transform: translateY(0);}}
@keyframes bounceInDown {
    0% {opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px);}
    60% {opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px);}
    80% {-webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px);}
    100% {-webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}}
 
@-webkit-keyframes bounceOutRight {
    0% {-webkit-transform: translateX(0); transform: translateX(0);}
    20% {opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px);}
    100% {opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px);}}
@keyframes bounceOutRight {
    0% {-webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
    20% {opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px);}
    100% {opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px);}}
 
@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}}  
</style>
 

Schließen

Ach, so @Wolfgang, ich habe es nach deinem Forum-Style in der CSS angepasst, nicht wundern, warum es jetzt in andere Farbe ist.

Und hier, wie ich es gemacht habe für die iconbar:

Ersetze:

1
 
[vorlesen]

Mit:

1
 
<div id="location"><div id="reqtangleOne"></div><div id="reqtangleTwo"><p> Texte sich vorlesen zu lassen ist eine faszinierende und praktikable Idee!<br> <br> Mit einfachsten Mitteln lassen sich überall im Forum Hilfetexte, Hinweise oder Warnungen mit Sprachausgabe platzieren, ohne extra eine MP3-Datei erstellen zu müssen!<br> <br> <b>Hier geht es zum Beitrag:</b><a href="/t1790f31-Text-to-Speech-TTS-Feste-Textbloecke-in-Sprache-umwandeln-Teil.html#msg5029">Text to Speech (TTS) -Text in Sprache umwandeln!</a></p></div><div id="triangle"></div><div id="circleOne"></div>       <div id="imgSpin"><div id="circleTwo"></div><div id="border_spin"></div></div><div id="iconIn"><a href="#">         <img src="https://files.homepagemodules.de/b104774/a_504_a1f9b795.png" width="160px" style="max-width: 160px;"></a></div></div>

Bild, wie es ausschaut:

Nur schade, dass ich kein Video machen kann wegen der Animationen.

Ich hoffe das die Idee und Inspiration gut ankommt. Wie gesagt, es darf auch das Script verändert werden, wer Ideen und weitere Inspirationen dafür hat, darf diese gerne erweitern.

Wie immer erfreue ich mich herzlichst über Kritik, Fehler und weitere Ideen.

P.S. Habe noch vergessen zu erwähnen das man die bilder 160 x 160 nehmen muss sonst sieht, mist aus.

1
 
<img src="https://files.homepagemodules.de/b104774/a_504_a1f9b795.png" width="160px" style="max-width: 160px;">

Mit herzlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#2 | Besondere Vorlage für die Iconbar - Animierter Hinweis datum

27.06.2024 00:44 (zuletzt bearbeitet: 11.07.2024 11:59)

Wolfgang

Administrator

Informationen anzeigen

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

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

Besondere Vorlage für die Iconbar - Animierter Hinweis
Aktualisiert 11.07.2024

06.07.2024

Hallo DaishiKlasse Animation, um auf etwas hinzuweisen, um etwas zu präsentieren!
Die Animation finde ich gut, angenehm und nicht zu hektisch!
Einfach genial und gelungen!
Habe mir deswegen auch genug Zeit gelassen, um Deine Idee und Inspiration gut zu verpacken!
In den folgenden Skripten gibt es eine Version mit festen und eine mit variablen Einstellungen, die ganz nach Bedarf gewählt werden können!
Wie bei der Spenden-Münze braucht für die Veränderung der Größe und Plus-Länge nur ein Wert verändert werden!

Was habe ich festgestellt?Dein Skript hat für einen Hinweis sehr viel Platz gebraucht!
Auf einer großen HTML-Seite ohne Text und Bilder funktioniert das immer recht gut!
Habe alles, bis auf den äußeren DIV-Container, mit überlagerten DIV's (position:absolute) aufgebaut!
Auffällig ist auch die Größe mit 600px. Für mobile Endgeräten, wie Handy's, recht ungünstig!
Die auskommentierte Animation, die den Hinweis nach rechts auslaufen lässt, ist einfach super, müsste umgebaut werden!

Vorlage variabel:
• Größe 400px + 200px zusätzliche Länge
• Verlinkung zur Bildergalerie

Bitte Grafik zum Testen anklicken!

Grafik testweise anklicken!

Animierter Hinweis mit festen Werten

Es können feste Hinweise und Informationen, zu Geburtstagen, Events, auftretende Fehler, Unterstützungen und Spenden erstellt und mit einem Klick aus der Iconbar abgerufen werden!
Größe, Grafiken und Links werden vorher bestimmt und festgelegt!
Für jeden neuen Hinweis wird ein neuer Foren-Code benötigt und muss erstellt werden!

Animierter Hinweis mit variablen Werten

Hier wird nur ein Foren-Code benötigt, der über die Iconbar in den Beitrag eingefügt wird!
Größe, Grafiken und Links können beliebig über den Foren-Code im Beitrag bestimmt werden!

Was können beide Hinweise?

Für die Ausgangsgröße und für die zusätzliche Länge des Hinweises braucht nur ein Wert eingegeben werden, die anderen Werte stellen sich automatisch nach!
Die Ausgangsgrößen der Grafik sind unkritisch, sie werden automatisch angepasst!
Der Hinweistext ist vertikal zentriert, hat Linksanschlag und ist mit einem schmalen Überlauf ausgestattet!
Gibt es mehrere Hinweise, können sie auch aneinandergereiht werden! Ist die Seite nicht breit genug, werden sie umgebrochen und untereinander dargestellt!
Mouseover und Klick stoppen die rotierende Animation und rufen andere Farben auf!
Wird die Grafik angeklickt, führt sie zur Webseite. Die hier eingebaute Animation lässt den Text nach rechts auslaufen!

Neu! Für extra lange Hinweise gibt es eine einstellbare Zusatzlänge!
Neu! Der Infotext kann jetzt ganz links anfangen und nicht mitten im Foren-Code!
Neu! Link wird im neuen TAB aufgerufen!
Neu! Die Animation wird erst gestartet, wenn sie in den Sichtbereich kommt!!

Größe 200px

Mehrere Vorlagen nebeneinander, in einer Reihe!

Foren-Code:

1
 
[VorlageVariabel=200px=0px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u481_rfKIqYVw.jpg]Größe 200px[/VorlageVariabel] [VorlageVariabel=200px=0px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u483_opeaIEOs.jpg]Größe 200px[/VorlageVariabel] [VorlageVariabel=200px=0px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u488_KjAGhEWI.jpg]Größe 200px[/VorlageVariabel]

Größe 200px
+ 50px Zusatzlänge

Mehrere Vorlagen nebeneinander, in einer Reihe, mit 50px Zusatzlänge!

Foren-Code:

1
 
[VorlageVariabel=200px=50px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u481_rfKIqYVw.jpg]Größe 200px[br]+ 50px Zusatzlänge[/VorlageVariabel] [VorlageVariabel=200px=50px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u483_opeaIEOs.jpg]Größe 200px[br]+ 50px Zusatzlänge[/VorlageVariabel] [VorlageVariabel=200px=50px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u488_KjAGhEWI.jpg]Größe 200px[br]+ 50px Zusatzlänge[/VorlageVariabel]

Schließen

Größe 400px

Größe 300px

Größe 200px

Mehrere Vorlagen mit unterschiedlichen Größen!

Foren-Code:

1
 
[VorlageVariabel=400px=0px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u496_DrHsqkOm.jpg]Größe 400px[/VorlageVariabel] [VorlageVariabel=300px=0px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u499_GWSRyFjD.jpg]Größe 300px[/VorlageVariabel] [VorlageVariabel=200px=0px=https://www.hilfe-tricks-tipps.de/g47-Technik.html=https://files.homepagemodules.de/b104774/pictures_u500_BbRiWXwr.jpg]Größe 200px[/VorlageVariabel]

Schließen

Installation für alle Templates & Mobil

Überblick HTML-Code

Neuer Foren-Code mit festen Werten

Neuer Foren-Code variable Eingabe

Plugin anlegen

Bis dann, gutes Gelingen und viel Spaß beim Ausprobieren!

Wolfgang

Kipper-Spedition findet das Top!

Antworten

Moderations-Kommentar:

Beitrag und Skript überarbeitet, neuer Foren-Code mit einstellbarer Zusatzlänge erstellt.
Mouseover- und Klick stoppen die rotierende Animation!
Linkaufruf im neuen TAB!
Animation startet erst im Sichtbereich!

#3 | RE: Besondere Vorlage für die Iconbar - Animierter Hinweis datum

27.06.2024 21:50 (zuletzt bearbeitet: 28.06.2024 16:54)

Wie immer habt ihr zwei das Klasse gemacht! Ideen ist der Anfang, die Umsetzung ist der zweite Schritt.

Ich hab das natürlich ausprobiert - und es funktioniert.
Frage: kann man die "Animation" auch in Höhe und Breite definieren? Hintergrund: ich wollte ein längliches Bild einsetzen, nur wenn ich die Höhe nicht höher nehme, dann kommen bei dem Bild Scroll-Balken zum Vorschein.
--> gugge hier !!!

Grüße vom Arndt

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang findet das Top!

Antworten

#4 | Für die Iconbar - Animierter Hinweis mit variabler Eingabe datum

28.06.2024 22:07 (zuletzt bearbeitet: 06.07.2024 08:21)

Für die Iconbar - Animierter Hinweis mit variabler Eingabe
Aktualisiert 01.07.2024

Hallo ArndtHabe eine Lösung gefunden!

Da der gesamte Hinweis ineinander verflochten ist und jede Einstellung von der anderen abhängig ist, ist es nur indirekt möglich Höhe und Breite getrennt einzustellen!
Meine Lösung liegt in einer "Längen-Plus-Variante"!
Das heist, dass man die Größe mit allem drumherum einstellt und zusätzlich ein Wert, von z.B. "100px oder 200px" zur Verlängerung des Hinweises zusätzlich einfügt!
Oder, wenn die Verlängerung nicht erforderlich ist, den Wert auf "0px" einstellen!
Plugin und Foren-Code müssen daher neu erstellt oder überschrieben werden!

Größe 450px mit 200px Zusatzlänge!
Alles im Beitrag #2 geändert!

Hier geht es zur Installation: Linke Grafik anklicken!

Nachtrag - Kleine Änderung für die Übersicht

Nach dem Einfügen des Foren-Codes in den Beitrag fängt der Infotext für den Hinweis jetzt ganz links an und nicht mitten im Foren-Code, ist dadurch besser zu finden und nachzuarbeiten!
Webseite wird im neuen TAB aufgerufen!

Wichtig! Bereits geschriebene Beiträge mit dem neuen Hinweis müssen noch geöffnet und wieder geschlossen werden, damit der neue Foren-Code übernommen wird!
Foren-Code variabel (Zusätzliche Eintragung Iconbar) und Plugin müssen überschrieben werden!

Bis dann und besten Dank für die Idee!

Wolfgang

Kipper-Spedition findet das Top!

Antworten

#5 | RE: Für die Iconbar - Animierter Hinweis mit variabler Eingabe datum

02.07.2024 21:42

Danke Wolfgang für die Hilfe bei der Installation im Testforum - irgendwie hab ich es nicht hinbekommen.
Ist es möglich, das der Link in einer anderen Seite aufgeht?

Über das einzufügende Bild hab ich dir schon ne PN geschrieben.

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Antworten

#6 | RE: Besondere Vorlage für die Iconbar - Animierter Hinweis datum

03.07.2024 13:04 (zuletzt bearbeitet: 06.07.2024 09:06)

Wolfgang

Administrator

Informationen anzeigen

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

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

Besondere Vorlage für die Iconbar - Animierter Hinweis

Hallo ArndtIn den Beiträgen gilt der BB-Code, also mit [img] ... [/img] kommst Du da weiter!
Die Verlinkung ist frei wählbar, kann zu jeden Beitrag, zu jeder Mitteilung führen, in Deinem Forum oder auf einer anderen Webseite!

1
 
[VorlageVariabel=260px=140px=https://www.forum-transportunternehmer.de/=https://files.homepagemodules.de/b610439/a_1260_2565684e.png][img]//files.homepagemodules.de/b610439/a_1264_3cc90cc8.png[/img][/VorlageVariabel]

1
 
[img]https://files.homepagemodules.de/b610439/a_1264_3cc90cc8.png[/img]

Ich hoffe ich konnte weiterhelfen....

Wolfgang

Antworten

#7 | RE: Besondere Vorlage für die Iconbar - Animierter Hinweis datum

03.07.2024 15:50

Ich meinte es mit: target="_blank"
Also, die Pressemitteilung soll in einem neuen Tab aufgehen.

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Antworten

#8 | RE: Besondere Vorlage für die Iconbar - Animierter Hinweis datum

03.07.2024 16:17 (zuletzt bearbeitet: 06.07.2024 08:57)

Wolfgang

Administrator

Informationen anzeigen

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

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

Besondere Vorlage für die Iconbar - Animierter Hinweis

Hallo ArndtSorry, da hatte ich etwas überlesen!
Diese Option war beim letzten Update + Nachtrag enthalten!
Bei Dir musste noch der Foren-Code geändert werden!
Weil der Link mit "onclick" aufgebaut ist, sieht target="_blank" etwas anderes aus, siehe Zeile 17!

Wichtig! Bereits geschriebene Beiträge müssen geöffnet und wieder geschlossen werden, damit der neue Foren-Code aktiviert wird!

HTML-Code für Animation-Variabel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<div class="div_location">
  <div class="location" style="--Laenge:{{groesse}}; --LaengePlus: {{plus}};">
    <div class="reqtangleOne"></div>
    <div class="reqtangleTwo">
      <p>
 
.......
 
      </p>
  </div>
  <div class="triangle"></div>
  <div class="circleOne"></div>
  <div class="imgSpin">
    <div class="circleTwo"></div>
    <div class="border_spin"></div>
    </div><div class="iconIn">
      <a href="#" onclick="window.setTimeout(function(){ window.open('{{link}}', '_blank'); }, 3000);return false;">
        <img src="{{img}}">
      </a>
    </div>
  </div>
</div>
 

VG
Wolfgang

Kipper-Spedition findet das Top!

Antworten

#9 | Besondere Vorlage für die Iconbar - Animierter Hinweis - Animationsstart im Sichtbereich! datum

04.07.2024 11:24 (zuletzt bearbeitet: 07.07.2024 15:35)

Wolfgang

Administrator

Informationen anzeigen

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

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

Besondere Vorlage für die Iconbar - Animierter Hinweis - Animationsstart im Sichtbereich!

Hallo zusammenDurch das Ausprobieren und die Vielzahl der Beiträge reißen die Ideen und Inspirationen nicht ab!

FrageWie sieht es mit der einleitenden Animation des Hinweises aus, wenn es mehrere Beiträge gibt, die auch noch ziemlich lang sind und der animierte Hinweis sich im letzten Beitrag befindet?

Mmh....
Es sieht so aus, dass die einleitende Animation (Hinweis von links, Text von oben einlaufend) schon längst abgeschlossen ist und nur noch die rotierende Animation läuft!

Animationsstart im SichtbereichWie sehe es aus, wenn die gesamte Animation erst nach dem Scrollen in den Sichtbereich startet?
Habe mal wieder alles im Beitrag #2 nachgetragen und beschrieben!

Wichtig! Es braucht nur ein kleines JavaScript nachgetragen werden, das andere Script und die CSS bleibt erhalten!

Das Skript "Animationsstart im Sichtbereich"!

Das Skript für den "Animationsstart im Sichtbereich" ist bereit im Beitrag #2 enthalten!

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script>
// Animationsstart im Sichtbereich
{{message.startlist}}   
window.addEventListener('scroll', function() {
  var position = $('#xquoteable_p_{{message:id}} .div_location').get(0).getBoundingClientRect();
  if(position.top < window.innerHeight && position.bottom >= 0) {
     $('.div_location').css('display','inline-block');
  } else{
    $('#xquoteable_p_{{message:id}} .div_location').attr('style','').css('display','none').find('.reqtangleOne, .triangle, .circleTwo, .border_spin').removeClass('Mouseover_off2');
  }
});
{{message.end}}  
</script>
 

Hier geht es zum Beitrag:
Linke Grafik anklicken!

Bis dann und besten Dank an Olaf für seine Unterstützung!

Wolfgang

Antworten

Muss das so sein? � � Bilderpräsentation per Mouseover, per Mausklick, Modal oder per Diashow!

�hnliche Themen

Antworten

Letzter Beitrag

Eine Idee für den Präsentationskalender
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi 2 10.06.2024 16:51
Daishi • Zugriffe: 137

Meine Idee und Inspiration (Daishi) - Audiodateien abspielen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi

24.04.2024 09:41
von

Daishi • Zugriffe: 126

Auf der Suche nach Ideen - Neues Seitenmenü
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi 4 18.01.2024 15:47
Wolfgang • Zugriffe: 228
Bewegte Bilder - Neue Idee und Inspiration
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi 4 07.12.2023 06:06
ichwersonst • Zugriffe: 356
Wie erstelle ich ein Formular - Vorlage aus der Iconbar?
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Anke 15 11.08.2023 13:04
Anke • Zugriffe: 881
Ich möchte Euch mein Homepage vorstellen
Erstellt im Forum Stellen Sie Ihr eigene Webseite vor! von Daishi 0 19.09.2022 15:05
Daishi • Zugriffe: 510
Tab Vorlage
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Anne 22 08.01.2022 15:06
Wolfgang • Zugriffe: 1622
Eigenes Glückkeks Script
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Nara 24 08.05.2021 01:16
creator • Zugriffe: 2328

Scripte und Effekte fürs Forum und die Homepage
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

25.10.2009 17:41
von

Wolfgang • Zugriffe: 13506

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: 85 €

58%

Zum Einbau: Google-Translator!

Favoriten speichern

Forum - Idee und Inspiration mit Vorstellung der Scripte - Vorlagen

Besondere Vorlage für die Iconbar - Animierter Hinweis
Aktualisiert 11.07.2024

Für die Iconbar - Animierter Hinweis mit variabler Eingabe
Aktualisiert 01.07.2024

Besondere Vorlage für die Iconbar - Animierter Hinweis

Besondere Vorlage für die Iconbar - Animierter Hinweis

Besondere Vorlage für die Iconbar - Animierter Hinweis - Animationsstart im Sichtbereich!

Forum Lesezeichen ❌

Forum - Idee und Inspiration mit Vorstellung der Scripte - Vorlagen

Besondere Vorlage für die Iconbar - Animierter HinweisAktualisiert 11.07.2024

Für die Iconbar - Animierter Hinweis mit variabler EingabeAktualisiert 01.07.2024

Besondere Vorlage für die Iconbar - Animierter Hinweis

Besondere Vorlage für die Iconbar - Animierter Hinweis

Besondere Vorlage für die Iconbar - Animierter Hinweis - Animationsstart im Sichtbereich!

Forum Lesezeichen ❌

Besondere Vorlage für die Iconbar - Animierter Hinweis
Aktualisiert 11.07.2024

Für die Iconbar - Animierter Hinweis mit variabler Eingabe
Aktualisiert 01.07.2024