Contao-Camp 2024
Ergebnis 1 bis 12 von 12

Thema: Bild und Text einblenden

  1. #1
    Contao-Fan
    Registriert seit
    11.06.2013.
    Beiträge
    709

    Standard Bild und Text einblenden

    Hallo zusammen
    Ich habe von einer Wodpress Website eine Art "Slider" gesehen, wo das Team vorgestellt wird:
    https://www.modulotre.ch/experten/

    Ich glaube Rocksolid hat was ähnliches in einem fertigen Template resp Theme.
    Gibt es aber auch eine solche Erweiterung, die ich runterladen kann ohne das ich das ganze Rocksolide Theme benutzen muss ?

    Vielen Dank und Grüsse
    Michi

  2. #2
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.612
    Partner-ID
    1081
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Du kannst auch den Slider ohne Theme lizensieren:
    https://rocksolidthemes.com/de/conta...ponsive-slider

  3. #3
    Contao-Fan
    Registriert seit
    11.06.2013.
    Beiträge
    709

    Standard

    Vielen Dank für die Info.
    Verstehe ich das richtig, dass ich das auch als Inhaltselement verwenden kann so wie in meinem Beispiel dargestellt und es sich nicht ur um einen Slider im Header handelt ?
    Beim Theme von Rocksolid ist es glaube ich das Modul "Feature-Box", welches ich meine.

    Viele Grüsse
    Michi

  4. #4
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.328
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Da brauchst du keinen Slider, das geht auch alles mit CSS.

    Was man da alles machen kann siehst du beispielhaft auf https://animate.style

  5. #5

  6. #6
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Michi Löffler Beitrag anzeigen
    "Feature-Box", welches ich meine.
    Die Feature-Box verwendet auch keinen Slider, wenn ich mich richtig erinnere. Die Effekte werden bei Rocksolid auch häufig per CSS umgesetzt.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  7. #7
    Contao-Fan
    Registriert seit
    11.06.2013.
    Beiträge
    709

    Standard

    Vielen Dank für eure Antworten.
    Ich habe es mir mal angeschaut, vor allem https://animate.style/
    Aber wie bringe ich den gewünschten Code in meine Webite ?
    Das habe ich noch nicht genau verstanden.
    Könnte mirr da jemand helfen ?

    Vielen Dank und Grüsse
    Michi

  8. #8
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Michi Löffler Beitrag anzeigen
    Aber wie bringe ich den gewünschten Code in meine Webite ?
    Vielleicht verstehe ich die Frage nicht, aber so wie jedes andere CSS auch
    • internes css - deprecated, also eher nicht nutzen
    • externes css - je nach Workflow
      • einzelne Datei
      • zusammengeführte Datei aus z.B. Gulp


    Natürlich muss der Code an Deine Gegebenheiten angepasst werden (Klassen, vorhandene Elemente), ggf. ist auch eine Template-Anpassung notwendig, wenn zusätzliche Elemente benötigt werden.

    Aber das alles ist doch unser tägliches Brot als Webdesigner/Frontendentwickler .
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  9. #9
    Contao-Fan Avatar von mdoll
    Registriert seit
    25.06.2009.
    Ort
    Wietze
    Beiträge
    334

    Standard

    Hi,

    Du brauchst das CSS von Animate.css.

    Wenn es Dich nicht stört, externe Inhalte zu laden, dann kannst Du Dir die CSS-Datei von deren CDN holen, siehe hier, letzter Absatz:
    https://animate.style/#usage

    Einfach den diesen Teil in den zusätzlichen Headtags Deines Seitenlayouts einfügen:
    Code:
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"  />
    Danach gibts Du den zu animierenden Elementen die entsprechenden CSS-Klassen, siehe Doku unter Basic Usage. Beispielsweise gibst Du einem Inhaltselement folgende CSS-Klassen und das Inhaltselement wird entsprechend animiert:

    Code:
     animate__animated animate__backInDown animate__slow
    Die Animationen werden beim Laden der Seite durchgeführt, ohne Javascript sieht man die Animation also nur für Elemente above the fold (correct me, if I'm wrong). Eventuell musst Du das Ganze also um Javascript ergänzen, zum Beispiel, wenn die Animation erst ausgelöst werden soll, sobald das Element in den Viewport scrollt.

    Gruß
    Mathias
    Geändert von mdoll (04.10.2021 um 12:22 Uhr)
    “Ah," said Mr Pin. "Right. I remember. You are concerned citizens." He knew about concerned citizens. Wherever they were, they all spoke the same private language, where 'traditional values' meant 'hang someone'.”
    ― Terry Pratchett, The Truth

  10. #10
    Contao-Fan
    Registriert seit
    11.06.2013.
    Beiträge
    709

    Standard

    Vielen Dank euch allen für die Hinweie.
    Ich habe es mit "animate" versucht und das klappt, aber eben, wie Du schreibst, ohne Javascipt gibt es da keine Verzögerung, was natürlich schade ist.
    Leider habe ich aber keine Erfahrung, wie man so ein Javascript erstellt und schreibt. Weiss jemand wo ich mir hierfür Hilfe holen kann ?

    Vielen Dank und Grüsse
    Michi
    Geändert von Michi Löffler (04.10.2021 um 23:55 Uhr)

  11. #11
    Contao-Fan
    Registriert seit
    11.06.2013.
    Beiträge
    709

    Standard

    Es funktioniert mit Rocksolid.
    Man muss eine Lizenz kaufen und das dazugehörige "RockSolid Custom Elements" intallieren. Dann kann man wie folgt vorgehen:
    https://help.rocksolidthemes.com/dis...on-feature-box

    Viele Grüsse
    Michi

  12. #12
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.883
    Partner-ID
    10107

    Standard

    Zitat Zitat von Michi Löffler Beitrag anzeigen
    Vielen Dank euch allen für die Hinweie.
    Ich habe es mit "animate" versucht und das klappt, aber eben, wie Du schreibst, ohne Javascipt gibt es da keine Verzögerung, was natürlich schade ist.
    Leider habe ich aber keine Erfahrung, wie man so ein Javascript erstellt und schreibt. Weiss jemand wo ich mir hierfür Hilfe holen kann ?

    Vielen Dank und Grüsse
    Michi
    Mit dieser Extension kannst du's im Backend einstellen https://community.contao.org/de/show...l=1#post549861
    » sponsor me via GitHub or PayPal or Revolut

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
  •