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
Templates für CMSimple_XH von
KRL Software-Development
private, nicht kommerzielle Website
by Karl Richard Lembach
Sie sind hier: Startseite > Template krl-3col-flex > Dateien des Templates > Ordner config > crossfade.css.php

crossfade.css.php

Die Datei crossfade.css.php enhält die Styles für den Crossfading-Header.

Dateiname: templates/krl-3col-flex/config/crossfade.css.php

<?php
/*
* @category Template for CMSimple_XH Version 1.7+
* @package krl-3col-flex, Version 3.2
* @file crossfade.css.php | Layout - Header befor crossfading Backgroundimages
* @last_modified 17.12.2021
* @author Karl Richard Lembach | https://lembach-cmsimple.de/?Home
* @copyright 2021 - 2024 Karl Richard Lembach <https://lembach-cmsimple.de>
* @license https://www.gnu.org/licenses/gpl-3.0 GNU GPLv3
* @link https://template.lembach-cmsimple.de/?Template-krl-3col-flex
* @contact https://lembach-cmsimple.de/?Home/Kontakt-Formular | webmaster@lembach-cmsimple.de

Dieses Programm ist freie Software.
Sie können es unter den Bedingungen der GNU General Public License, wie von der Free Software Foundation veröffentlicht,
weitergeben und/oder modifizieren, entweder gemäß Version 3 der Lizenz oder (nach Ihrer Option) jeder späteren Version.

Die Veröffentlichung dieses Programms erfolgt in der Hoffnung, daß es Ihnen von Nutzen sein wird, aber OHNE IRGENDEINE GARANTIE,
sogar ohne die implizite Garantie der MARKTREIFE oder der VERWENDBARKEIT FÜR EINEN BESTIMMTEN ZWECK. Details finden Sie in der GNU General Public License.

Sie sollten ein Exemplar der GNU General Public License zusammen mit diesem Programm erhalten haben. Falls nicht, siehe <https://www.gnu.org/licenses/gpl-3.0>.
Deutsche Übersetzung (kein rechtskräftiger Ersatz des Originals): http://www.gnu.de/documents/gpl.de.html

Algorithmus basiert auf Angerungen von https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Bildwechsler
*/

// CSS - Dezimalzahlen erwarten den Dezimalpunkt! PHP - Dezimalzahlen haben das Dezimalkomma! Daher ist Ersatz des Kommas durch Punkt notwendig:
// z. B.: str_replace(",",".",$slideduration)

// Einlesen der Bilddateien in ein Array
if (is_dir($pth['folder']['base'].$CrossImageFolder)) {
$i = 0;
if ($dh = opendir($pth['folder']['base'].$CrossImageFolder)) {
while (($file = readdir($dh)) !== false) {
if (!is_dir($pth['folder']['base'].$CrossImageFolder.'/'.$file)) {
if (pathinfo($file, PATHINFO_EXTENSION)) {
if (strpos("bmp gif jp2 jpg png tif tiff webp svg ",pathinfo($file, PATHINFO_EXTENSION),0)) {
if (($file !== ".") and ($file !== "..")) {
$crossdateiliste[$i] = $pth['folder']['base'].$CrossImageFolder.'/'.$file;
$i = $i + 1;
}
}
}
}
}
closedir($dh);
}
}
$rgbwert = str_replace("#", "", $CrossMottoColor); // erzeugt reines Farbtrippel
$CrossMottoColorRGB = array( // zerlegen in Einzelfarben
0 => ($rgbwert), 1 => hexdec(substr($rgbwert, 0, 2)), 2 => hexdec(substr($rgbwert, 2, 2)), 3 => hexdec(substr($rgbwert, 4, 2))
);
$CrossMottoColorShadow = 'rgba('.$CrossMottoColorRGB[1].','.$CrossMottoColorRGB[2].','.$CrossMottoColorRGB[3].', 0.5)'; // Umwandeln in Dezimalwerte mit Transparenzwert

$imagecount = count($crossdateiliste); // Anzahl der Bilder im Ordner
$TimeSlotCount = $imagecount * $CrossFadingSpeed; // Anzahl der Zeittakte, die bei @keyframes ueberblenden wirksam werden könnten | $CrossFadingSpeed: Anzahl der Zeittakte, während der die opacity = 1 ist
$timeslottime = $CrossVisibleTime / $CrossFadingSpeed; // Breite eines Zeittaktes in Sekunden
$slideduration = $timeslottime * $TimeSlotCount; // Länge eines kompletten Durchlaufs in Sekunden
$cyclestartinpercent = array(); // Elemente enhalten den Startzeitpunkt der aufeinander folgenden Zeittakte in Prozent der Gesamtdurchlaufzeit
$cycleopacity = array();
for ($i = 1; $i <= ($TimeSlotCount); $i++) { // Anzahl der Zeittakte
$cyclestartinpercent[$i-1] = round((($i-1) * 100/($TimeSlotCount)), 2, PHP_ROUND_HALF_UP); // Startzeitpunkt des Elementes in Prozent
$cycleopacity[$i-1] = 0; // Vorbelegung mit opacity = 0
}
for ($i = 0; $i < $CrossFadingSpeed; $i++) { // Die Takte, zu denen das Bild angezeigt werden soll
$cycleopacity[$i+1] = 1; // opacity = 1
}

$stylecode .='
.logo {
text-decoration: none;
border: unset;
}
#hintergrund {';
if (isset($MainColor2019)) {
$stylecode .='
background-color: '.$MainColor2019.';
';
} else {
$stylecode .='
background-color: var(--akzent);
';
}
$stylecode .='
float: left;
width: 100%;
}
#slidelogo {
margin: 1vw;
float: left;
max-height: 12.5vw;
max-width: 30vw;
border-radius: '.$Crosslogomottoradius.'vw;
padding: .5vw;
background-color: '.$CrossLogoTextbackground.';
}
#slidelogoz {
position: absolute;
top: 0px;
left: 0px;
z-index: 5;
}
#mottotext {
color: var(--akzent);
margin-top: 1vw;
margin-right: 1vw;
float:right;
max-width: 60vw;
text-align: right;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: '.$CrossMottoColor.';
text-shadow: .054vw .054vw .109vw '.$CrossLogoTextbackground.', .164vw .164vw .164vw '.$CrossMottoColorShadow.';
border-radius: '.$Crosslogomottoradius.'vw;
padding: .5vw;
background-color: '.$CrossLogoTextbackground.';
font-size: 1.667vw;
font-weight: bold;
}
#slidemottotextz {
position: absolute;
top: 0px;
right: 0px;
z-index: 4;
}
.header-cont {
background-color: var(--hintergrundheader);';
if (isset($MainColor2019)) {
$stylecode .='
border-bottom: 2px solid '.$MainColor2019.';
';
} else {
$stylecode .='
border-bottom: 2px solid var(--akzent);
';
}
$stylecode .='
}
#slideheigt {';
if (isset($MainColor2019)) {
$stylecode .='
border-top: .26vw solid '.$MainColor2019.';
';
} else {
$stylecode .='
border-top: .26vw solid var(--akzent);
';
}
$stylecode .='
height: 15.4vw;
}
.cross_show figure {
position: absolute;
top: 0;
left: 0;
z-index: 3;
margin: .26vw 0;
padding: 0;
animation: ueberblenden '.str_replace(",",".",$slideduration).'s infinite;
}
';
for ($i = 2; $i <= $imagecount; $i++) { // erzeugt die Liste mit den Animations-Verzögerungszeiten
$stylecode .= '.cross_show figure:nth-of-type('.$i.') {
animation-delay: '.str_replace(",",".",($CrossVisibleTime*($i-1))).'s;
opacity: 0;
}
';
}
$stylecode .= '@keyframes ueberblenden {
';
for ($i = 0; $i <= ($CrossFadingSpeed + 1); $i++) { // erzeugt die Liste der @keyframes von 0% bis einen Takt nach dem letzten opacity = 1, plus dem Ende des letzten Taktes: 100% {opacity: 0;}
$j = str_replace(",",".",$cyclestartinpercent[$i]);
$stylecode .= ' '.$j.'% {opacity: '.$cycleopacity[$i].';}'."\n";
}
$stylecode .=' 100% {opacity: 0;}
}

@media (min-width:1920px) {
.cross_show figure {
margin-top: 5px;
}
#slidelogo {
top: 20px;
left: 20px;
max-height: 242px;
max-width: 576px;
padding: 9px;
}
#mottotext {
top: 20px;
right: 20px;
max-width: 1152px;
padding: 9px;
font-size: 32px;
text-shadow: 1px 1px 2px '.$CrossLogoTextbackground.', 3px 3px 3px '.$CrossMottoColorShadow.';
}
#slideheigt {';
if (isset($MainColor2019)) {
$stylecode .='
border-top: 5px solid '.$MainColor2019.';
';
} else {
$stylecode .='
border-top: 5px solid var(--akzent);
';
}
$stylecode .='
height: 300px;
}
}
';

| Seitenanfang |