[Rocksolid Custom Elements] Ticker - erstellt einen einfachen Ticker.
* slide-Animation mit CSS
* kein Javascipt
* kein jQuery
* Zeit des Slides variierbar
* Möglichkeit zum Stop bei mouseover
* Möglichkeit zur Vergabe einer eigenen Klasse pro Slide
* mit etwas mehr an CSS kann auch via Inserttag z.B. ein News-Module eingefügt werden, welches dann slidet - {{insert_module::ID}}
rsce_ticker_config.php
PHP-Code:
<?php
return [
'label' => ['Ticker','Erstellt einen einfachen Ticker'],
'types' => ['content','module'],
'contentCategory' => 'WERBEpanorama',
'moduleCategory' => 'WERBEpanorama',
'standardFields' => ['cssID'],
'beTemplate' => 'rsce_ticker_backend',
'fields' => [
'duration' => [
'label' => ['Dauer','Geben Sie die Durchlaufdauer in Millisekunden ein. 1000 = 1 Sekunde. Standard = 13000 = 13 Sekunden'],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
'rgxp' => 'natural',
],
'default' => '13000',
],
'animationstopp' => [
'label' => ['Stop Animation','Beendet Animation bei mouse-hover'],
'inputType' => 'checkbox',
'eval' => [
'tl_class' => 'w50 m12',
],
'default' => false,
],
'items' => [
'label' => ['Items','Fügen Sie Inhalte ein. HTML erlaubt'],
'elementLabel' => 'Item %s',
'inputType' => 'list',
'minItems' => 1,
'fields' => [
'content' => [
'label' => ['Item Inhalt',''],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
'allowHtml' => true,
'mandatory' => true,
],
],
'itemclass' => [
'label' => ['Klasse','Hier können Sie eine Klasse für das Item vergeben.'],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
],
],
],
],
],
];
rsce_ticker.html5
PHP-Code:
<?php
$GLOBALS['TL_CSS'][] = 'files/layout/css/rsce_ticker.css';
?>
<div class="slidercontainer">
<div class="slidewrapper">
<div class="slideitems primary <?php if ($this->animationstopp): echo 'stopp'; endif; ?>" style="animation: primary <?= $this->duration ?>ms linear infinite">
<?php foreach($this->items as $item): ?>
<div class="slideitem <?php if ($item->itemclass): echo $item->itemclass; endif; ?>">
<?= $item->content ?>
</div>
<?php endforeach ?>
</div>
<div class="slideitems secondary <?php if ($this->animationstopp): echo 'stopp'; endif; ?>" style="animation: secondary <?= $this->duration ?>ms linear infinite">
<?php foreach($this->items as $item): ?>
<div class="slideitem <?php if ($item->itemclass): echo $item->itemclass; endif; ?>">
<?= $item->content ?>
</div>
<?php endforeach ?>
</div>
</div>
</div>
rsce_ticker.css
PHP-Code:
.slidercontainer {
display: flex;
align-items: center;
height: 50vh;
width: 100%;
overflow: hidden;
}
.slidewrapper {
position: relative;
width: 100%;
height: 20rem;
padding: 2rem 0;
font-size: 2rem;
overflow-x: hidden;
}
.slideitems {
width: inherit;
height: inherit;
position: absolute;
left: 0%;
top: 0%;
display: flex;
align-items: center;
justify-content: space-around;
}
/*.primary {
animation: primary 13s linear infinite;
}
.secondary {
animation: secondary 13s linear infinite;
}*/
@keyframes primary {
from {
left: 0%;
}
to {
left: -100%;
}
}
@keyframes secondary {
from {
left: 100%;
}
to {
left: 0%;
}
}
/* tRansition paused on mouseover */
.slidewrapper:hover > .slideitems.stopp {
animation-play-state: paused!important;
}
rsce_ticker_backend.html5
PHP-Code:
<?php if (TL_MODE === 'BE'): ?>
<span><?= $this->duration ?> ms</span><br>
<?php foreach($this->items as $item): ?>
<span><?= $item->content ?></span><br>
<?php endforeach ?>
<?php endif; ?>
Beispiel Backend:
ticker.jpg
Beispiel Frontend:
output.gif
Lesezeichen