CSS 3: Zufällige CSS Hintergründe
von Deniz Cetin (Kommentare: 1)
Es gibt Fälle, bei denen man zufällige Hintergründe auf einer Website haben möchte. Für mehr Abwechslung? Für unterschiedliche Grafiken? Mit etwas Javascript- und jQuery-Magie schafft man das ganz schnell und einfach.
Lösung und Beispiel
Hierfür haben wir ein kleines Javascript geschrieben. In unserem Beispiel soll eines von vier Zufallsbildern mit den Namen zufallsbild-1.png, zufallsbild-2.png, zufallsbild-3.png und zufallsbild-4.png jedem Element mit der CSS-Klasse zufallsbild zugeordnet werden.
1 <script>
2 var images = ['zufallsbild-1.png', 'zufallsbild-2.png', 'zufallsbild-3.png', 'zufallsbild-4.png'];
3 $('.zufallsbild').css({'background-image': 'url(files/sys/img/' + images[Math.floor(Math.random() * images.length)] + ')'});
4 </script>Was passiert hier also? In Zeile 2 definieren wir ein sogenanntes Array, in dem wir die Namen der Bilddateien definieren, die nachher benutzt werden sollen. Im nächsten Schritt wird der Klasse zufallsbild per CSS-Befehl 'background-image' eins dieser Bilder aus dem Ordner 'files/sys/img' entnommen, die dort abgelegt sind.
Fertig!
In Contao 4 nutzen
In Contao 4 kann man dieses Script dann bei aktiviertem jQuery dann einfach unter Themes > Seitenlayouts > IHR_LAYOUT > "Eigener JavaScript-Code" einfügen. Ein funktionierendes Beispiel kann man rechts oder hier darunter dem JSFiddle entnehmen. Bei jedem Klick auf Result sollte ein anderes Hintergrundbild auftauchen!
Fertig. Bei Fragen oder anderen Sonderfällen einfach ein Kommentar hinterlassen!
Einen Kommentar schreiben
Kommentar von Kira |
Wieso das Ganze mit jQuery? Ehrlich gesagt halte ich von JQuery absolut NIX und schreibe meinen Code immer ohne diese Bibliothek. Denn er wird mit jQuery nur völlig unüberischtlich und weniger Code (= Schreibaufwand) entsteht auch nur sehr selten.
Zufälliger Hintergrung ohne jQuery nur auf Grundlage von Javascript (neueste Verion: ECMAScript 2021):
var zufallsbilder = ['zufallsbild-1.png', 'zufallsbild-2.png', 'zufallsbild-3.png', 'zufallsbild-4.png'];
var zufallsbild = images[Math.floor(zufallsbilder.length * Math.random())];
document.getElementById("element_fuer_hintergrund").style.backgroundImage = `url('Pfad der Bilder/${zufallsbild}')`;
Hierbei wird nur der Hintergund eines Elements geändert und nicht der Wert eine gesamten Klassen. Denn es wird ja wohl kaum eine sinnvolle Anwendung geben, wo mehrere Hintergründe mittels Klasse auf einen identischen Hintergrund gesetzt werden soll.
Sofern das doch mal der Fall sein sollte, schreibt man mittels Javascript eben die Klasse im Quelltext um. jQuery macht auch nichts anderes:
Die dritte Zeile des obigen Quellcodes wird geändert in
document.write("<sty"+`le>.zufallsHintergrund {background-image:url('Pfad der Bilder/${zufallsbild}')</sty`+"le>";
Der hier jetzt erscheinende Aufwand an mehr Quelltext likegt nicht daran, dass ich ohne jQuery arbeite, sondern an der Übersichtlichkeit. Zu diesem Zweck habe ich das Zufallsbild in einer Variablen zwischengespechert. Wenn ich das nicht gemacht hätte, wäre ich auch mit 2 Codezeilen ausgekommen.
Und nun mal ehrlich, was ist verständlicher? jQuery mit dem $(kein Mensch weiß welches Element gemeint ist, zuweisung) oder ein klar strukturierter Quelltext rein nur mit Javascript?
Antwort von Deniz Cetin
Hallo Kira,
diesen Beitrag hatte ich noch zu meinen Anfängen geschrieben. Das zeigt doch relativ deutlich, wie sehr wir Neulinge mit jQuery aufwachsen. Ich stimme dir absolut zu, dass es deutlich bessere (und einfachere) Methoden gibt für viele Kleinigkeiten. Vielen Dank für deinen Hinweis.
Da jQuery dennoch oft genutzt wird und vor allem bei unseren Haupt-CMS Contao bei vielen Dingen nach wie vor Voraussetzung ist, wird es allerdings wohl noch eine ganze Weile bleiben, daher ist der Beitrag nach wie vor gültig, aber sicherlich nicht optimal und immer zu empfehlen. Aber wenn man bereits jQuery im Projekt benutzt, kann man es ja nutzen :)
Beste Grüße,
Deniz