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.....
https://www.tsad17.de/testseite
Parallax Blöcke/Bildgröße
-
- Mitglied (Level 10)
- Beiträge: 257
- Registriert: Di 15. Dez 2020, 11:46
- Wohnort: Dortmund
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Parallax Blöcke/Bildgröße
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.
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.
-
- Mitglied (Level 10)
- Beiträge: 257
- Registriert: Di 15. Dez 2020, 11:46
- Wohnort: Dortmund
Re: Parallax Blöcke/Bildgröße
Danke Tommy.
Da habe ich ja richtig was zum ausprobieren.
Da habe ich ja richtig was zum ausprobieren.
scherenschlag
MBR 5.9.17
MBR 5.9.17
- Tommy Herrmann
- Site Admin
- Beiträge: 5867
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Parallax Blöcke/Bildgröße
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:
https://www.tsad17.de/testseite/assets/ ... stretch.js
... bei dem Verweis zu dieser Datei hast Du jedoch das Verzeichnis "assets" vergessen anzugeben:
... zum verwendeten Hintergrundbild hast Du es dagegen richtig gemacht:
Du musst bei diesen Pfadangaben immer sehr genau aufpassen, wenn die nicht stimmen, dann geht natürlich gar nichts.
... 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
... 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>
Code: Alles auswählen
<script>
$.backstretch("./assets/backstretch/hintergrund.jpg");
</script>
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 139 Gäste