Sprachmodul mit Schiebetüren Effekt?

[tilda]

Guten Abend,

ich möchte gerne für die Sprachauswahl einen Schiebetüreneffekt anwenden.
Gibt es da von Contao eine Möglichkeit, oder mache es ich es mit CSS.
Wenn ich es mit CSS machen muss, muss ich dann 2 Bilddateien erstellen, oder kann man auch Text verschieben?

Beste Grüße
Tilda

[Andreas]

Contao ist ein CMS und hat mit CSS- und JS-Effekten nichts zu tun.

Wenn du einen Link zur Seite zeigst und genau erzähltst was wann wohin geschoben werden soll, könnte man dir helfen. "Schiebetüreneffekt" ist auch nichts Genormtes und habe ich so auch noch nie gehört.

[tilda]

Hallo Andreas,

es gibt noch keine Link zu Seite - vielleicht ist es als "Sliding Door" ein Begriff?

Bei mouse over "englisch" erscheint "deutsch",
und es scheint so, als würde sich das Wort von der Seite reinschieben.

Aber so, wie du klingst, scheint es nur mit CSS-Bilddateien lösbar zu sein, oder?

Beste Grüße
Tilda

[planepix]

Guten Morgen Tilda,

such mal nach dem Begriff „CSS Sprites”.
Du kannst die Standardgrafik und die Hovergrafik in eine Datei setzen und dann beim Hover-Status wird das Hintergrundbild um die Breite des Elements verschoben.

https://www.w3schools.com/css/css_image_sprites.asp

[alexgr]

Ich nehme and Du meinst so eine Art Button, bei dem sich der eine Text raus- und der andere reinbewegt.

Du musst nicht unbedingt Hintergrundbilder verwenden. Vermutlich hast Du ja HTML in dem Stil:

<ul>
  <li class="active">Deutsch</li>
  <li><a href="en">Englisch</a></li>
</ul>

Dann kannst Du mit CSS die LIs in dem UL hin- und herschieben. Beispiel:

ul {
  width: 6rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  list-style: outside none none;
}

li {
  display: block;
  width: 100%;
  transition: transform 0.3s;
}

li.active {
  transform: translateX(0);
}

li:not(.active) {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(100%);
}

ul:hover li.active {
  transform: translateX(-100%);
}

ul:hover li:not(.active) {
  transform: translateX(0);
}

Demo: https://jsfiddle.net/ucb7aub3/5/

[Edit]
Je nach gewünschtem Browsersupport müsstest Du auf die entsprechenden Präfixe für transform achten, siehe: http://caniuse.com/#feat=transforms2d
[/Edit]

[halb-OT]
Mensch, ich kenne "Sliding Doors" noch als die CSS-Technik, mit der man in Menü-Tabs und dergleichen Bilder übereinander geschoben hat, um einen optischen Rahmen (z. B. oben links und rechts runde Ecken oder so) unabhängig von der Textmenge zu erzeugen:
https://alistapart.com/article/slidingdoors
[/halb-OT]

[tilda]

Vielen Dank für die schnelle Unterstützung!
Es hat geklappt!

Beste Grüße
Tilda

[Andreas]

Und noch eine ohne translate
https://jsfiddle.net/Andreas/o7oncq2e/4/

[tilda]

Ist es besser ohne "translate"?

[Andreas]

Nicht wirklich, sieht nur einfacher aus. Den Link zu caniuse has du ja oben.

Du solltest das sowieso auf nem Touch-Display testen. Man kann nicht herausfinden, ob die virtuelle Ausgabe der Seite auf nem Touch- oder normalen Display oder sonstwo erfolgt.

Hover-Effekte sind nett, aber sie dürfen natürlich nicht den Zugang zu den Inhalten blockieren. Was mich dabei auch stört ist, dass in dem Moment wo ich den Text "English" lesen kann, der Cursor darüber ist. Und dass man nicht sieht welche Sprache angeboten wird.

[tilda]

Tja ja - habe es gerade mal probiert.
Auf einem Touch klappt es natürlich nicht, aber dafür ist zum Glück eine andere Lösung vorgesehen.

Der Einwand der Übersichtlichkeit der Sprachen ist natürlich richtig.

Beste Grüße
Tilda

[Andreas]

Auf einem Touch klappt es natürlich nicht, aber dafür ist zum Glück eine andere Lösung vorgesehen.

Wie gesagt: Man kann nicht herausfinden, ob auf der anderen Seite ein Touchscreen ist oder nicht.

Edit: Deswegen bauen wir die Seiten heutzutage so, dass sie auf jeden Fall auch mit nem Touch oder Tastatur funktionieren.

[tilda]

ah
- ich dachte, über Responsive wäre ich auf der sicheren Seite -
mhm -

[Andreas]

Nein, "responsive" heißt nur, dass sich das Layout an unterschiedlich große Viewports anpasst.

[alexgr]

Und noch eine ohne translate
https://jsfiddle.net/Andreas/o7oncq2e/4/

Bei dieser Lösung ist zu beachten, dass das UL jetzt eine Höhenangabe braucht und die Breite ebenfalls nicht mehr optional ist, weil alle Elemente im UL absolut positioniert sind. Die Vorversion von meiner transform-translateX-Lösung war auch mit position, aber mit relative statt absolute beim aktiven LI, wodurch das aktive LI das umgebende UL aufspannt: https://jsfiddle.net/ucb7aub3/3/

Ist es besser ohne "translate"?

Nicht wirklich, sieht nur einfacher aus. Den Link zu caniuse has du ja oben.

Ich habe hier transform translateX genommen, weil mir das als bessere Lösung im Kopf hing – das allerdings nur, weil dadurch häufig eine bessere Performance und/oder ein flüssigeres Aussehen der Animation gewährleistet sein soll:
https://www.paulirish.com/2012/why-m...osabs-topleft/
https://css-tricks.com/tale-of-animation-performance/
Das dürfte für diesen Fall natürlich nicht so superrelevant sein.

Was im Code einfacher aussieht, kommt wohl auch ein bisschen auf den einzelnen Betrachter an.

Was mich dabei auch stört ist, dass in dem Moment wo ich den Text "English" lesen kann, der Cursor darüber ist.

Das ist tatsächlich ein Nachteil. Andererseits ist es auch wieder nett, weil man dann direkt auf die andere Sprache klicken kann.

Und dass man nicht sieht welche Sprache angeboten wird.

Das ist meiner Meinung nach das wichtigste Problem in diesem speziellen Fall. Zur Lösung, die angebotenen Sprachen bis auf die aktive zu verstecken, greift man ja sonst höchstens, wenn es sehr viele Sprachen sind und man im Kopfbereich nicht so viel Platz dafür hat. Mit diesem "Schiebetüreffekt" kann ja aber sowieso nur zwei Sprachen abbilden[1], und dann können die beiden auch einfach neben- oder untereinander stehen.

[1] Es sei denn man macht so etwas hier: https://jsfiddle.net/ucb7aub3/6/ (Markup ist jetzt natürlich Quatsch, wollte nur schnell eine Demo aus dem Vorhandenen klöppeln).

[Andreas]

Danke für die interessanten Links.

Ich denke, das größte Problem wird die Touchfähigkeit sein.

[tilda]

Gibt es denn für die Touchfähigkeit eine andere Lösung?

[Andreas]

Ja, den Link nach EN direkt zeigen. Oder beim ersten Tipp scrollt es nach links und dann nochmal Tippen um die Verlinkung auszuführen. Müsste dann glaube ich mit JS umgesetzt werden. Ich gebe auch zu bedenken, dass man eventuell überhaupt nich auf die Idee kommt, dass noch eine zweite Sprache angeboten wird, wenn man da oben nur "DE" sieht.

[mlweb]

Ich denke, das größte Problem wird die Touchfähigkeit sein.

Ich hatte mal irgendwo ein js-snippet gefunden, selbst aber bisher nie ausgetestet ob es funktioniert bzw. unter welchen Bedingungen das nicht funktioniert.

 // Touch Device Detection
      var isTouchDevice = 'ontouchstart' in document.documentElement;
      if( isTouchDevice ) {
      $('body').removeClass('no-touch');
          $('body').addClass('touch');
    }

Kannst Du dazu etwas sagen?

[Andreas]

Ja, ich hatte vor einiger Zeil mal etwas länger dazu recherchiert. Das Fazit und auch die Statements der anderen Entwickler waren dabei "es ist nicht möglich".

Wenn "ontouchstart" abgefragt wird, fragt man ein Feature des Browsers ab, aber nicht die Touchfähigkeit des Ausgabegerätes.

[Andreas]

Sorry, noch was. (Mouse)-Hover-Effekte können nett sein und ne Seite evtl. auch aufwerten. Aber der Hover-Effekt sollte immer nur als Bonus (für Mausbenutzer) vorhanden sein und nicht als Notwendigkeit um an die Inhalte zu kommen.

In obigem Fall wäre es ein Einfaches DE und EN direkt anzuzeigen und zum Vorteil für alle Besucher. Hat man sehr viele Sprachen, kann man ein Aufklappmenü gestalten, welches dann auch bei Touch, auf z.B. die aktive Sprache, die Auswahl der anderen Sprachen aufklappt.