header-xh-01 header-xh-02 header-xh-03 header-xh-04 header-xh-05 header-xh-06 header-xh-07 header-xh-08 header-xh-09 header-xh-10 header-xh-11 header-xh-12 header-xh-13 header-xh-14
Lembach's nichtkommerzielle Website rund um CMSimple_XH
Templates, Plugins, Tools, Programme
und Tips und Tricks die mir wichtig sind
Sie sind hier: Startseite > Template-Erweiterungen > Hintergrundbild flyout-flyin

Hintergrundbild flyout-flyin

Wer sich einmal Frank Seidels "fhs-magicHero" - Template angesehen hat (http://fhseidel.de/cmsxh/fhs-magicHero/), der hat sicher bewundert, wie schön der Aus- und wieder Einblendeffekt des Hintergrundbildes der Seiten aussieht.
Diesen Effekt hatte ich vor ein paar Monaten gesehen und mich jetzt (05.12.2021), als ich am krl-3col-flex eine weitere kleine Verbesserung anbrachte, daran erinnert (an den Effekt, nicht an die Quelle). Erst als ich diese Seite erstellte ist mir das Template von Frank Seidel wieder eingefallen. Wer das analysiert findet bestimmt heraus wie die elegantere Lösung funktioniert. Ob dafür wirklich Bootstrap notwendig ist weiß ich zum jetzigen Zeitpunkt nicht.

Wie gesagt, das alles hatte ich vergessen und fing sozusagen bei Null an:

Ein bisschen Recherche nach möglichen Lösungen brachte schnell heraus, dass dieser Effekt nicht ganz ohne JS zu realisieren ist, da CSS von Haus aus keine Kenntnis davon erlangt, wenn die Seite gescrollt wird. Es gibt also keinen "Sensor" den man in CSS verwenden könnte, um eine Formatierung umzuschalten (ja, es gibt da doch Möglichkeiten, die benötigen aber auf der HTML-Seite und im CSS schon einiges an Gehirnakrobatik).

Nach der Lektüre verschiedener Seiten, die ein Beispiel erläuterten, und von https://wiki.selfhtml.org habe ich dann (angeleht an die dort zu sehende Lösung) folgendes zum Laufen gebracht (alles zugeschnitten auf die Verwendung im Template krl-3col-flex, müsste sich jedoch auch sonst umsetzen lassen):

Eine Seite (im Editiermodus, Codebearbeitung aktiv) bekommt das Gerüst aus

<article>
<h1><span class="whiteovershadow">Demo Background-Image flyout-flyin</span></h1>
<p></p>
<p></p>
<p></p>
<p></p>
<h1>Normale H1 Überschrift</h1>
<p>1. Zeile normaler Absatz.</p>
. . . . . .
</article>

wobei das Hintergrundbild als Eigenschaft des <article> - Tags definiert wird und eine H1-Überschrift mit besonderer Formatierung dafür sorgt, dass sie auf jeden Fall vor dem Bild sichtbar wird.

In die Datei user.css wird der Code eingefügt, der das Hintergrundbild schrumpfen und verschwinden lässt und es, wenn man wieder hochscrollt, auch wieder erscheinen lässt. Des Weiteren wird die spezielle H1-Überschrift Formatierung definiert.

article {
    background: url(/userfiles/images/krl-software-develepment480x94.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    animation-duration: 1s;
    animation-name: fadein;
}
.down article {
    transition-timing-function: ease;
    background-size: 0%;
    animation-duration: 3s;
    animation-name: fadeout;
}
@keyframes fadeout {
    from {
        background-size: 100%;
    }
    to {
        background-size: 0%;
    }
}
@keyframes fadein {
    from {
        background-size: 0%;
    }
    to {
        background-size: 100%;
    }
}
h1.whiteovershadow {
    text-shadow: 0.05em 0.05em 0.15em black, 0.05em 0.05em 0.2em white;
    font-size: 3em;
    color: #fff;
    padding-top: 4em;
    padding-bottom: 2em;
}

Zuerst einmal wird für <article> das Hintergrundbild definiert. Als Animation wird das "Einblenden" festgelegt (@keyframe fadein {}). Das JS-Script sorgt dafür, dass dem Format body die Klasse down hinzugefügt wird, sobald die Seite nach unten gescrollt wird und die Klasse wieder verschwindet, wenn nach oben gescrollt wird. Diese Situation wird mit der Formatdefinition .down article {} erfasst. Dadurch wird einerseits die Größe des Hintergrundbildes auf 0% gehalten und andererseits der Übergang via @keyframe fadeout {} festgelegt. Die beiden @keyframes definieren ganz einfache lineare Übergänge von einem Wert der Eigenschaft zum anderen Wert. Das H1-Format ist eigentlich keine Hexerei, es wird lediglich der Abstand nach oben und zum ersten folgenden Absatz festgelegt und die Schrift erhält einen doppelten Schatten.
Andere Effekte als das "Verschwinden in der Unendlichkeit" habe ich bis jetzt (07.12.2021) noch nicht zum Laufen gebracht. Evtl. greife ich das Thema später wieder auf.

Und in der Datei scriptimporter.php wird der nötige JavaScript-Code eingefügt.

<?php
/* krl-3col-flex-V2 - last update 18.07.2021 */
// *** Abhängig vom Wert der Variablen $ScriptImporter2021 werden zusätzliche Code-Zeilen in die Templatedatei importiert. ***
$anzahl = strlen(substr($ScriptImporter2021, 0, 16)); // Anzahl der Stellen
if (!($anzahl > 0)) { // Wenn Anzahl nicht größer 0 ist -> ende
    // echo '<!-- keine Bit-Maske vorhanden -->'."\n";
    goto ende;
}
$flagger = array();
for ($i = 0; $i < $anzahl; $i++) {
    $zeichen = substr($ScriptImporter2021, $i, 1);
    if (($zeichen <> "0") and ($zeichen <> "1")) {
        echo "<!-- \n        ******************************************************************************************************\n
        Die Morepagedata-Variable \$ScriptImporter2021 enthaelt mindestens ein Zeichen, das nicht 0 oder 1 ist.\n
        Ihr Wert lautet: $ScriptImporter2021\n
        ******************************************************************************************************\n -->\n";
        $ImporterError = 1;
        goto ende;
    }
    $flagger[$i] = $zeichen; // Jede Stelle wird in einem Array-Element gespeichert
}
echo '<!-- Anzahl der Masken-Marker 1 -->'."\n";
$i = 0;
if ($i > $anzahl) {goto ende;}
if ($flagger[$i] == 1):?>
<!-- HTML-Code für Style und Script 1 -->
<script>
var lastScrollTop = 0;
$(window).scroll(function(event){
  var st = $(this).scrollTop();
  if (st > lastScrollTop){
    if (!$('body').hasClass('down')) {
      $('body').addClass('down');
    }
   } else {
     $('body').removeClass('down');
   }
   lastScrollTop = st;
   if ($(this).scrollTop() <= 0) {
     $('body').removeClass('down');
   };
});
</script>
<!-- Ende des Codes von Script 1 -->
 . . . . .

Der wird über die Bitmaske zum Scriptimport (Reiter Mehr) für diese Seite aktiviert.

Wie ich schon sagte:

Das ist mit Sicherheit nicht die beste Lösung, es gibt viele andere Wege, die nach Rom führen.

Es ist der Weg, den ich am schnellsten zum Laufen gebracht habe.


| Seitenanfang |

weiter zu: