Text switch alle paar Sekunden

[stefane9]

Liebe Gruppe, ich bin aktuell am grübeln wie ich folgendes auf meine Page einfüge:

Erklärung:
Und zwar gehts darum, dass sich ein eingegebener Text alle 3-5 sekunden ändert und ein anderer an selber Stelle auftritt.

- siehe Gif.



Habe versucht den HTML Code über Google Chrome > Untersuchen rauszukopieren. (auf Page wo das funktioniert)
Folgendes wurde aus der Stelle kopiert:


<div class="hurry">
<div class="display">
<div class="stock" style="display: none;"> Hurry, only <strong class="stock-level">10</strong> left at this price.</div>

<div class="sold" style="display: block;">
<strong class="number">54</strong> sold in the <span class="time-span">last <strong> 3 hours</strong></span>
</div>

</div>
</div>



Ist womöglich ganz banal und klar dass das so nicht funktioniert - bin leider nicht so fortgeschritten bezüglich HTML & CSS.
- würde mich dennoch sehr über Hilfe freuen.

LG und vielen Lieben Dank!


Ps. zusätzlich habe ich gerade gesehen dass sich die Zahlen auch kontinuierlich (willkürlich?) ändern. Wie ist das möglich?
- laut code oben sollte die Zahl "54" kommen - im Gif ist aber die Zahl "70" zu sehen.
Wie macht man sowas?

 

[basti1012]

An besten wäre mal ein Link zur Seite dann kann man dir das genau sagen wie die das gemacht haben.
Ich denke aber mit Javascript.
Man kann es so machen
Mit Javascript brauch man Math.random , setInterval und in den Beispiel arrays mit den Texten und Farben

Text switch alle paar Sekunden

Text switch alle paar Sekunden Liebe Gruppe, ich bin aktuell am grübeln wie ich folgendes auf meine Page einfüge: Erklärung: Und zwar gehts darum, dass sich ein eingegebener Text alle 3-5 sekunden ändert und ein anderer an selber Stelle auftritt. - siehe Gif. <img class="vorschau"...

basti1012.bplaced.net

 

[stefane9]

An besten wäre mal ein Link zur Seite dann kann man dir das genau sagen wie die das gemacht haben.
Ich denke aber mit Javascript.


Man kann es so machen

Mit Javascript brauch man Math.random , setInterval und in den Beispiel arrays mit den Texten und Farben

https://codepen.io/basti1012/pen/BaaMymo

Oder nur mit html und css

https://codepen.io/basti1012/pen/yLLZyQP?editors=1100

Doch da geht es nur fester Farbe und fester reinfolge. Zufalls Texte gehen da meines wissen nicht

Vielen lieben Dank für die rasche Hilfe.
Der HTML/CSS Code ist aufjedenfall „verständlicher“ für mich. :)

 

[basti1012]

Vielen lieben Dank für die rasche Hilfe.
Der HTML/CSS Code ist aufjedenfall „verständlicher“ für mich. :)

Ok , kann ich verstehen , da sind nur die möglichkeiten begrenzt.
In den JS Code könnte man ein Random auf alle 16 millionen Farben setzen da wird wohl nie der gleiche Text mit der gleichen Farbe kommen.
Das kannst du in der Css Variante natürlich nicht machen, außer du willst 16 millionen mal anzahl texte in der Css und html definieren.

Wenn dir die html Variante reicht ist ja gut. Die kann man so wie sie ist auch ohne probleme verlängern.
Man könnte bei jeden Text auch noch verschiedene Zahlen anzeigen lassen ( feste reinfolge ), doch das würde den Code auch noch einiges verlängern

 

[stefane9]

Hab versucht den HTML/CSS code so umzuschreiben, dass es lediglich 2 verschiedene Texte hat und den die ganze zeit switcht. Leider hab ich es nicht hinbekommen. Habe irgendwie den Code verschlampt.

Wie würde das im Falle von lediglich 2 custom texten aussehen? Und so dass einer IMMER in der Farbe zb.: rot (bzw. allgemein gleicher "style" ist und der 2. text immer in zb.: blau (auch gleicher style)?


Beispiel - so ähnlich würde ich es brauchen..

So in etwa text nr1:
12 Lamps™ sold today - farbe Blau.

text2:
(insert text) farbe rot.

- kann man auch eine endlosschleife setzen sodass sich die 2 alle paar sekunden abwechseln?






Editiert hat leider nicht funktioniert:
Hab in deinem zusammengetragenen CSS

" #box > #innen > #text3{
color:SteelBl !important; "

versucht die folgenden Codeabschnitte von Nummer 3 bis nummer 8 so umzuschreiben, dass ich immer abwechselnd die nummer 1 und 2 eingetragen habe. Ich dachte mir dass dann immer der Text nummer 1 und 2 wiederholt wird.
Leider hat er aber nichts mehr angezeigt im preview fenster.

Zur veranschaulichung:


#box > #innen > #text1{
color:blue !important:
}
#box > #innen > #text2{
color:SkyBlue !important;
}
#box > #innen > #text1{
color:SteelBl !important;
}
#box > #innen > #text2{
color:Tomato !important;
}
#box > #innen > #text1{
color:grey !important;
}
#box > #innen > #text2{
color:yellow !important;
}
#box > #innen > #text1{
color:blue !important;
}
#box > #innen > #text2{
color:green !important;
}
#box > #innen > #text1{
color:red !important;
}


so habe ich es versucht. LG

 

[basti1012]

Ich weiß zwar nicht, warum du das nicht hinbekommen hast , dafür müsstest du mal deinen ganzen Versuch zeigen.

Bei nur 2 Texten geht das auch einfacher, bzw. ein anderer Weg.

Beide Texte übereinander legen und einen immer aus und ein Blenden.
Zb so
Link zur Lösung

 

[stefane9]

Danke, hat funktioniert! LG