Marquee element-scrolling mit Rocksolid Custom Elements

Ein Wrapper mit 'Start' und 'Stop' und dazwischen sind eigene Contentelemente möglich.
Einstellungsmöglichkeiten der Richtungen, Geschwindigkeit, Durchlaufzeit, ...

Bemerkung:
das template wurde auf meine Notwendigkeiten für bootstrap angepasst » dies müsste auf die eigenen Notwendigkeiten abgeändert werden.

Zusätzlich eingebunden werden müssen die notwendigen js-Dateien. Für meinen Fall ausreichend, da via CSS3 Animation: jquery.marquee.min.js
Die Dateien und die Installationsmöglichkeiten findet ihr hier.

rsce_divMarqueeBegin_config.php

PHP-Code:

---

<?php
// https://www.jqueryscript.net/animation/Text-Scrolling-Plugin-for-jQuery-Marquee.html
return array(
    'label'    => array(
            'de'    => array('Marquee Wrapper begin','marquee-wrapper begin'),
    ),
    'types'                => array('content', 'module'),
    'contentCategory'    => 'beRecont',
    'moduleCategory'    => 'beRecont',
    'wrapper'            => array('type' => 'start'),
    'fields' => array(
    
        'marqueeAllowCSS3support' => array(
            'label' => array(
                'de' => array('CSS3 Animation erlauben','Das Plugin verwendet CSS animations anstatt jQuery<br>
                            [der Browser muss CSS animations unterstützen - dies erkennt das plugin dann von selbst]'),
            ),
            'inputType' => 'radio',
            'options' => array('y'),
 /*                    'options' => array('y','n'),   */
            'reference' => $GLOBALS['TL_LANG']['marqueeLanguages'],
            'default' => 'y',
            'eval' => array('tl_class' => 'w50'),    
        ),
        'marqueeCSS3easing' => array(
            'label' => array(
                'de' => array('CSS3 easing','Übergang auswählen. CSS3 Animation muss erlaubt sein')
            ),
            'inputType' => 'radio',
            'options' => array('linear','ease','ease-in','ease-out','ease-in-out'),
            'default' => 'linear',
            'eval' => array('tl_class' => 'w50'),
        ),
 /*      'marqueeJQeasing' => array(
            'label' => array(
                'de' => array('jQuery easing','Übergang auswählen')
            ),
            'inputType' => 'radio',
            'options' => array('linear','ease','ease-in','ease-out','ease-in-out'),
            'default' => 'linear',
            'eval' => array('tl_class' => 'w50'),
        ),  */
         'marqueeDirection' => array(
            'label' => array(
                'de' => array('Richtung','Richtung der Animation'),
            ),
            'inputType' => 'radio',
            'options' => array('left','right','up','down'),
            'default' => 'left',
            'eval' => array('tl_class' => 'w50'),
        ),              
        'marqueeDelayBeforeStart' => array(
            'label' => array(
                'de' => array('Verzögerung','Pause zur nächsten Animation [Wert in Millisekunden]'),
            ),
            'inputType' => 'text',
            'default' => '1000',
            'eval' => array('tl_class' => 'w50 clr'),
        ),
        'marqueeDuration' => array(
            'label' => array(
                'de' => array('Durchlaufzeit','Durchlaufzeit der Animation [Wert in Millisekunden]'),
            ),
            'inputType' => 'text',
            'default' => '5000',
            'eval' => array('tl_class' => 'w50'),
        ),   
        'marqueeGap' => array(
            'label' => array(
                'de' => array('Abstand/Gap','Abstand zwischen den Tickers [Wert in px]'),
            ),
            'inputType' => 'text',
            'default' => '20',
            'eval' => array('tl_class' => 'w50'),
        ),            
        'marqueeDuplicated' => array(
            'label' => array(
                'de' => array('Duplizieren','Soll der Inhalt dupliziert werden, damit es den Effekt des kontinuierlichen Laufes hat?'),
            ),
            'inputType' => 'radio',
            'options' => array('y','n'),
            'reference' => $GLOBALS['TL_LANG']['marqueeLanguages'],
            'default' => 'n',
            'eval' => array('tl_class' => 'w50 clr'),    
        ),   
        'marqueePauseOnCycle' => array(
            'label' => array(
                'de' => array('Pausieren nach Durchlauf','Pausiert nach einem Durchlauf'),
            ),
            'inputType' => 'radio',
            'options' => array('y','n'),
            'reference' => $GLOBALS['TL_LANG']['marqueeLanguages'],
            'default' => 'n',
            'eval' => array('tl_class' => 'w50'),    
        ),   
        'marqueePauseOnHover' => array(
            'label' => array(
                'de' => array('Pausieren bei Mouse-Over','Pausiert bei Mouse-Over'),
            ),
            'inputType' => 'radio',
            'options' => array('y','n'),
            'reference' => $GLOBALS['TL_LANG']['marqueeLanguages'],
            'default' => 'n',
            'eval' => array('tl_class' => 'w50'),    
        ),        
        'marqueeStartVisible' => array(
            'label' => array(
                'de' => array('Sichtbarkeit','Das Element ist bereits vor dem Beginn des Durchlaufes sichtbar'),
            ),
            'inputType' => 'radio',
            'options' => array('y','n'),
            'reference' => $GLOBALS['TL_LANG']['marqueeLanguages'],
            'default' => 'n',
            'eval' => array('tl_class' => 'w50'),    
        ),                
    ),    
);

---

rsce_divMarqueeBegin.html5

PHP-Code:

---


<script type="text/javascript">
    $(document).ready(function(){ 
        $('.marquee').marquee({
            allowCss3Support: <?php if($this->marqueeAllowCSS3support == 'y'): echo "true"; else: echo "false"; endif; ?>,
            css3easing: '<?php echo $this->marqueeCSS3easing ?>',
            // easing: '<?php echo $this->marqueeJQeasing ?>',
            delayBeforeStart: '<?php echo $this->marqueeDelayBeforeStart ?>',
            direction: '<?php echo $this->marqueeDirection ?>',
            duplicated: <?php if($this->marqueeDuplicated == 'y'): echo "true"; else: echo "false"; endif; ?>,
            duration: '<?php echo $this->marqueeDuration ?>',
            gap: '<?php echo $this->marqueeGap ?>',
            pauseOnCycle: <?php if($this->marqueePauseOnCycle == 'y'): echo "true"; else: echo "false"; endif; ?>,
            pauseOnHover: <?php if($this->marqueePauseOnHover == 'y'): echo "true"; else: echo "false"; endif; ?>,
            startVisible: <?php if($this->marqueeStartVisible == 'y'): echo "true"; else: echo "false"; endif; ?>
        });
        $('.js-marquee-wrapper').addClass('d-inline-block');       // add class for bootstrap <div class=".js-marquee-wrapper d-line-block">
    });
</script>



<div class="container">
    <div calss="row">
        <div class="marquee" style="width:100%;overflow:hidden;">
            <div class="container">
<div class="row">

---

rsce_divMarqueeEnd_config.php

PHP-Code:

---

<?php
// https://www.jqueryscript.net/animation/Text-Scrolling-Plugin-for-jQuery-Marquee.html
return array(
    'label'    => array(
            'de'    => array('Marquee Wrapper end','marquee-wrapper end'),
    ),
    'types'                => array('content', 'module'),
    'contentCategory'    => 'beRecont',
    'moduleCategory'    => 'beRecont',
    'wrapper'            => array('type' => 'stop'),
);

---

rsce_divMarqueeEnd.html5

PHP-Code:

---

</div>
</div>
</div>
</div>
</div> 


---

Im backend könnte es als Beispiel so aussehen:
Anhang 22274


für die Übersetzungen habe ich folgende Datei:
/app/Recources/contao/languages/de/tl_default.php
/app/Recources/contao/languages/en/tl_default.php

PHP-Code:

---

<?php

$GLOBALS['TL_LANG']['marqueeLanguages'] = array
(
    'y' => 'ja',
    'n' => 'nein'
);

---

PHP-Code:

---

<?php

$GLOBALS['TL_LANG']['marqueeLanguages'] = array
(
    'y' => 'yes',
    'n' => 'no'
);

---