Parallax Blöcke/Bildgröße

Allgemeine Fragen
scherenschlag
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Parallax Blöcke/Bildgröße

Ungelesener Beitrag von scherenschlag »

Moin.
Ich schraube mal wieder auf einer Testseite rum.
Nehmt mal das Bild:
Alles in allem ist mir das Foto zu groß. Auch auf dem PC.
Wenn ich das jetzt mal einfüge, sieht man in der Desktop Ansicht 3 Pilsgläser.
In der Mobile Ansicht aber nur eines und ein Stückchen vom zweiten.
Wie bekomme ich das in der PC Parallax Ansicht kleiner?
Ich denke dann ist es auch auf dem Phone kleiner.
Wie macht man es überhaupt richtig mit den (Parallax-) Fotos?
Da war mal was..... :confused:

https://www.tsad17.de/testseite
Dateianhänge
bier-602x399.jpg
scherenschlag
MBR 5.9.17
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5867
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Parallax Blöcke/Bildgröße

Ungelesener Beitrag von Tommy Herrmann »

Du - das sind (eigentlich) recht viele Fragen auf einmal, die man auf unterschiedlichste Weisen beantworten könnte.

Als "Parallax" Effekt bezeichnet man ein Bild, das beim Scrollen der Seite entweder komplett fixiert ist oder über ein JavaScript leicht fixiert ist und in einer anderen Geschwindigkeit scrollt als die Seite - letzteres passiert, wenn Du den "Parallax" Effekt von Mobirise aktivierst.

Hier eine Seite von mir mit beiden Beispielen:

https://www.mobirise-tutorials.com/Busi ... xiert.html

Bei den Bildern kann das auch ganz unterschiedliche Blocks geben (falls Du das nicht selbst einstellst). Mobirise verwendet meist @Media-Anweisungen, bei denen dann bei einer bestimmten Displaygröße etwas geschieht. Man könnte auch am Handy damit ein ganz anderes Bild (was vielleicht besser passt) anzeigen:

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Meist ist das aber (ganz richtig) bei Mobirise so gelöst, das bildschirmfüllende Bilder eben auf die CSS-Eigenschaft "cover" gestellt werden, was zur Folge hat (damit die Bilder am Handy, insbesondere hochkant, nicht verzerrt werden), dass die Bilder beschnitten werden.

Bei "cover" werden Bilder zentriert und dann auf die bestmögliche Höhe am Handy dargestellt, die Breite wird dann links und rechts abgeschnitten, damit das Bild eben nicht verzerrt wird. Das geht auch nicht anders, oder man müsste das Bild dann verkleinern, was meist aber auch nicht das Ergebnis zeigt, das man erreichen will.

Hier mal eine Beispielseite, bei der ich Bilder eben auch proportional verkleinere, um diese eben nicht am Handy zu beschneiden:

https://www.mobirise-tutorials.com/Lawy ... float.html

... dort beschreibe ich auch wie man Bilder selbst an jeder beliebigen Stelle eines (meinetwegen) einfachen Textblocks in jeder Größe und jeder Position einfügen kann.

Hier noch ein Beispiel mit eigenen Bildergalerien mit eigener CSS (man muss ja nicht zwingend die Blöcke von Mobirise verwenden):

https://www.mobirise-tutorials.com/Busi ... mages.html

Mit anderen Worten - bei den Gläsern von Dir, sollte man darauf achten - wenn diese eben mittels "CSS cover" am Handy gezeigt werden - dass sie möglichst zentriert im Foto erscheinen.

https://developer.mozilla.org/de/docs/W ... round-size

In Deinem Beispiel steht das obere Bild mit den Biergläsern auf "cover" und das untere wird proportional mit CSS:

width: 100%;

verkleinert, also immer nur maximal 100% der Container-Breite. Mobirise bietet da Blöcke für beides an.
scherenschlag
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Re: Parallax Blöcke/Bildgröße

Ungelesener Beitrag von scherenschlag »

Danke Tommy.
Da habe ich ja richtig was zum ausprobieren.
scherenschlag
MBR 5.9.17
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5867
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Parallax Blöcke/Bildgröße

Ungelesener Beitrag von Tommy Herrmann »

Moin,

... mir ist noch aufgefallen, dass Du mit dieser Testseite auch den Versuch gemacht hast, "Backstretch" einzubauen und das auch wieder falsch und an der falschen Stelle, wie bereits hier beschrieben. Diese Skript-Verweise sollten in den "Seiteneinstellungen" im Bereich "End of <body> code" stehen.

Lasse auch in Testseiten möglichst nie etwas falsch stehen sondern verbessere oder lösche es. Du guckst dann vielleicht viel später mal und weißt dann nicht mehr warum es so nicht geht.

Weiterhin hast Du hier die Dateien für "Backstretch" im Verzeichnis "assets" auf den Server gelegt, wie auch das Skript "jquery.backstretch.js".

... diese Datei liegt also hier:

Code: Alles auswählen

https://www.tsad17.de/testseite/assets/backstretch/jquery.backstretch.js
https://www.tsad17.de/testseite/assets/ ... stretch.js


... bei dem Verweis zu dieser Datei hast Du jedoch das Verzeichnis "assets" vergessen anzugeben:

Code: Alles auswählen

<script src="./backstretch/jquery.backstretch.js"></script>
... zum verwendeten Hintergrundbild hast Du es dagegen richtig gemacht:

Code: Alles auswählen

<script>
   $.backstretch("./assets/backstretch/hintergrund.jpg");
</script>
Du musst bei diesen Pfadangaben immer sehr genau aufpassen, wenn die nicht stimmen, dann geht natürlich gar nichts.
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 139 Gäste