Contao-Camp 2024
Ergebnis 1 bis 1 von 1

Thema: Minitutorial: Standard Contao Slider mit CSS3 und Transitions aufbohren

  1. #1
    Contao-Nutzer
    Registriert seit
    12.03.2010.
    Beiträge
    238

    Standard Minitutorial: Standard Contao Slider mit CSS3 und Transitions aufbohren

    Hi,
    ihr kennt den normalen Slider von Contao.
    Aufregend ist etwas anderes aber er tut seinen Dienst und der Code ist schlank. Siehe unten - Videos auf Imgur
    Mit ein paar Zeilen CSS3 kann man den Slider anständig aufbohren zumindest was die Übergänge angeht.
    Der Slider bietet leider nicht die Möglichkeit die Übergänge zu beeinflussen indem z.B. aktiv Klassen gesetzt werden oder man Übergänge definieren kann.
    Mit dem Code kann man auf die aktiven und inaktiven Slides matchen:
    Code:
       /* wähle alle Elemente, die im Style Attribute NICHT translateX(0px) stehen haben - also alle die nicht zu sehen sind */
      /* der erste selector ist jeweils für den Chrome (das Leerzeichen vor 0px ist wichtig), der zweite für den Firefox (Edge, Brave, Apple Browser ungetestet) */
      .slider-wrapper > :not([style*="translate(0px, 0px)"]),
      .slider-wrapper > *:not([style*="translateX(0px)"]) {
         /* das sollte klar sein */
        opacity: 0;
        /* hier setzen wir eine nice transition für das transform und für die opacity
           und überschreiben die von Javascript gesetzten werte mit !important (ist nicht die feine Englische aber geht nicht anders)
           Opacity dauert etwas länger damit das Bild nicht komplett weg ist wenn es raus fährt.
        */
        transition: transform 1.6s cubic-bezier(.46,.03,.52,.96),
                    opacity 1.8s ease-in-out !important;
    
      }
      .slider-wrapper > [style*="translate(0px, 0px)"],
      .slider-wrapper > *[style*="translateX(0px)"] {
        opacity: 1;
        /* hier das gleich (die Zeit für das Transform sollte gleich der obigen sein sonst sieht das oft nicht schön aus 
            opacity dauert etwas länger und sieht damit smoother aus.
        */
    
        transition: transform 1.6s cubic-bezier(.46,.03,.52,.96),
                    opacity 4s ease-in-out !important;
      }
    Schon ist der Übergang aufgehübscht. Man kann durch die Attributeselektoren und ein + Selektor auch noch auf das nächste (rechts folgende Element) matchen.

    Ein weiterer cooler Effekt entsteht wenn man das Transform vom Slider komplett überschreibt z.B. so:

    Code:
      .slider-wrapper > :not([style*="translate(0px, 0px)"]),
      .slider-wrapper > :not([style*="translateX(0px)"]) {
        --transform-time: 1.6s;
        opacity: 0;
        transform: translateX(-10px) !important;
        transition: transform 1.6s cubic-bezier(.46,.03,.52,.96),
                    opacity 1.8s ease-in-out !important;
      }

    Nicht vergessen ... das ist mehr oder weniger ein unsauberer Hack. Die Schwachstelle ist die Repräsentation der Transformanweisung im Style Attribute.
    Aber viel Spaß ... etwas CSS spart hier nämlich viel Javascript, ggf Templateanpassungen oder auch eine Contaoerweiterung.

    Nachtrag
    Ich habe bei Imgur mal ein paar Bewegtbilder hochgeladen damit man sich das besser vorstellen kann
    https://imgur.com/a/cKeUP1r

    @Admins ... webp wäre schon etwas cool aber ich weiß, dass Vbulletin halt Vbulletin ist
    Geändert von Honig (23.10.2020 um 13:33 Uhr)

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •