[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 {
    
displayflex;
    
align-itemscenter;
    
height50vh;
    
width100%;
    
overflowhidden;
}
.
slidewrapper {
    
positionrelative;
    
width100%;
    
height20rem;
    
padding2rem 0;
    
font-size2rem;
    
overflow-xhidden;
}
.
slideitems {
    
widthinherit;
    
heightinherit;
    
positionabsolute;
    
left0%;
    
top0%;
    
displayflex;
    
align-itemscenter;
    
justify-contentspace-around;
}
/*.primary {
    animation: primary 13s linear infinite;
}
.secondary {
    animation: secondary 13s linear infinite;
}*/
@keyframes primary {
    
from {
      
left0%;
    }
    
to {
      
left: -100%;
    }
}
@
keyframes secondary {
    
from {
      
left100%;
    }
    
to {
      
left0%;
    }
}
  
/* tRansition paused on mouseover */
.slidewrapper:hover > .slideitems.stopp {
  
animation-play-statepaused!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