Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Allgemeine Fragen
Benutzeravatar
dettec61
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 166
Registriert: Di 30. Mär 2021, 09:41
Wohnort: Siegerland

Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von dettec61 »

Hallo Gemeinde,
wie kann man solch einen Effekt erstellen?
z.B. der Header steht fest und der erste Block ist zu sehen. Wenn man dann die Seite scrollt sieht man ein festes Bild in einer bestimmten (einstellbaren?) Höhe. Scrollt man weiter, erscheint der nächste Block und schiebt sich dann von unten über das Bild.
Ich hoffe, ich konnte mich richtig ausdrücken.
Danke für eure Tips/Hilfe
Grüssle
Detlev
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 521
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von Volker »

Gruß Volker
Benutzeravatar
dettec61
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 166
Registriert: Di 30. Mär 2021, 09:41
Wohnort: Siegerland

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von dettec61 »

Volker hat geschrieben: So 23. Mai 2021, 16:11 Meinst Du das so : https://360p.eu/360_grad_bilder.html ?
Ja, genau so was!
Grüssle
Detlev
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2324
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von Tommy Herrmann »

... hier noch ein ergänzendes Beispiel für die CSS-Eigenschaft "fixed" mit Anleitung:

https://mobirise-tutorials.com/Business ... xiert.html



... auch das bekannte Skript "Backstretch" käme vielleicht in Frage:

https://www.mobirise-tutorials.com/Port ... round.html

... oder auch hier:

https://www.mobirise-tutorials.com/Lawy ... round.html
Benutzeravatar
dettec61
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 166
Registriert: Di 30. Mär 2021, 09:41
Wohnort: Siegerland

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von dettec61 »

Ui...
da habe ich ja was zu tun und zu probieren. Dankefein :)
Grüssle
Detlev
Benutzeravatar
dettec61
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 166
Registriert: Di 30. Mär 2021, 09:41
Wohnort: Siegerland

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von dettec61 »

@Tommy
gibt es auch die Möglichkeit einem nachfolgendem Block einen durchsichtigen Hintergrund zu verpassen, so das wie in deinem Beispiel das obere Bild stehen bleibt?
https://mobirise-tutorials.com/Business ... xiert.html

Ich habe jetzt mal den Hintergrund fixiert des ersten Blocks. Der zweite Block soll also einfach hochschieben ohne Hintergrund und durch den unsichtbaren Hintergrund halt den Hintergrund des ersten Blocks nutzen.
Ich habe mal eine leer *.png als Hintergrund benutzt, aber das geht wohl leider nicht...
Grüssle
Detlev
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2324
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von Tommy Herrmann »

Moin,

also bei dieser Seite ist lediglich das Hintergrundbild eines Blocks fixiert worden (siehe Screenshot):

Code: Alles auswählen

background-attachment: fixed;
... dadurch entsteht eben der Eindruck, dass die Seite über dem Bild hinweg scrollt.


fixed.JPG



Im Beispiel (unten) mit den Wassertropfen im Hintergrund habe ich das anders gemacht - also so, wei Du es im Prinzip haben möchtest:

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

Wenn Du möchtest, dass das Hintergrundbild so fixiert ist, dass es schlussendlich hinter der gesamten Seite liegt (also nicht nur hinter einem einzigen Block, dann muss man dafür ein Script nutzen wie "Backstretch":

https://www.mobirise-tutorials.com/Port ... round.html

Auf dieser Seite habe ich eigentlich alles zu "Backstretch" versucht zu erklären. Gucke Dir das zunächst genau an und baue dass erst einmal nach und mache dann weiter.


... dann habe ich eben jedem Block auf dieser Seite:

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

eine eigene Hintergrundfarbe gegeben, wie z.B. Schwarz mit einer Deckkraft ("opacity") von 0.5 (also 50%).

0.0 wäre transparent
1.0 wäre voll Deckraft

Code: Alles auswählen

background-color: rgba(0, 0, 0, 0.5);

background-opacity.JPG
Benutzeravatar
dettec61
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 166
Registriert: Di 30. Mär 2021, 09:41
Wohnort: Siegerland

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von dettec61 »

Hallo Tommy,
ja - habe schon geahnt das es nur so geht. Dann muss ich es mal testen. Danke dir!
Grüssle
Detlev
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2324
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von Tommy Herrmann »

Du änderst also für einen transparenten Hintergrund meist im Mobirise-Block im Bereich "CSS Editor":

von:

background-color: @bg-value;

wobei @bg-value; der Farbwert ist, der über die Mobirise-Parameter an den Werkzeuge-Einstellungen gewählt wurde und den man dann eben ersetzt. Du kannst dann an so einem Block diese Einstellmöglichkeit ohne diese Variable nicht mehr nutzen.

... in:

background-color: transparent;

oder eben leicht transparent wie schon beschrieben ...

... bei z.B. leicht abgedunkelter, transparenter Overlay-Farbe, wie meinetwegen Schwarz mit einer Deckkraft (opacity) von zum Beispiel 0.3 = 30%:

background-color: rgba(0, 0, 0, 0.3);
Benutzeravatar
dettec61
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 166
Registriert: Di 30. Mär 2021, 09:41
Wohnort: Siegerland

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von dettec61 »

Hallo Tommy,
danke für den Tip, funktioniert leider nicht. Wäre auch zu einfach und zu schön gewesen.
Der Hintergrund (fixiert) auf der Beispielseite des Textblocks soll halt in den nächsten Blöcken zu sehen sein. Obwohl der nächste Block jetzt auf Transparent steht, wird er weiß dargestellt..
https://www.kreuztalertanzclub-casino.d ... eite3.html
Dateianhänge
Transparenz.JPG
Grüssle
Detlev
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2324
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von Tommy Herrmann »

Moin,

das hatte ich versucht in meinem letzten Beitrag klar zu machen.

So ist das ja auch ganz logisch und klar. Wenn Du einen Block hast mit einem Hintergrundbild, dann gehört der eben nur zu diesem Block (auch wenn dieser fixiert wurde) - natürlich ist der am nächsten Block nicht zu sehen.

Du musst also dann das Skript "Backstretch" anwenden, denn dieses Skript legt das Hintergrundbild nicht hinter einen Block, sondern in den gesamten <Body> der gesamten Seite. Wenn Du dann die Hintergründe verschiedener (oder aller) Blöcke transparent machst, wird auch dieser "Body-Hintergrund" überall erscheinen.

Bitte arbeite erst einmal das Skript "Backstretch" in Deine Seite ein (am besten in ein neuest Test-Projekt zum üben) und dann wirst Du es schon sehen:

https://www.mobirise-tutorials.com/Port ... round.html
Benutzeravatar
dettec61
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 166
Registriert: Di 30. Mär 2021, 09:41
Wohnort: Siegerland

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von dettec61 »

Tommy Herrmann hat geschrieben: Mo 5. Jul 2021, 18:27 Bitte arbeite erst einmal das Skript "Backstretch" in Deine Seite ein (am besten in ein neuest Test-Projekt zum üben) und dann wirst Du es schon sehen:

https://www.mobirise-tutorials.com/Port ... round.html
Das ist der Plan ;)
Grüssle
Detlev
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2324
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von Tommy Herrmann »

... auf dieser Seite mit der "Welle" im Hintergrund sind übrigens 8 Mobirise-Blöcke, die Welle liegt also hinter jedem Block. Ich habe aber nicht alle Blöcke transparent gemacht.
Benutzeravatar
dettec61
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 166
Registriert: Di 30. Mär 2021, 09:41
Wohnort: Siegerland

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von dettec61 »

Hallo an alle,
nach etwas längerer Krankheit, habe ich mich jetzt mal an backstretch rangetraut, bekomme es aber nicht hin und benötige Unterstützung...
Der Versuch es einzubauen geschieht auf dieser Seite:
http://www.kreuztalertanzclub-casino.de ... cofox.html
Im End of body dieser Seite habe ich den Code eingebaut:
<!-- jQuery für backstretch hinzugefügt -->
<script src="assets/web/assets/jquery/jquery.min.js"></script>
<script src="./backstretch/jquery.backstretch.js"></script>

<script>
$.backstretch([
"../assets/images/background1.jpg"
], {
fade: 750
});
</script>

Im Block geändert:
background-color: rgba(0, 0, 0, 0.3);
Auf dem Server liegen in /assets/web/assets/jquery/ auch die beiden Dateien jquery.min.js und jquery.backstretch.js
Der Block wird auch transparent (0.3) angezeigt, aber kein Hintergrundbild. Dieses wird auch beim Untersuchen der Seite (Bildanhang) rot dargestellt, also vermutlich nicht gefunden. Ich habe die Pfade und Speicherorte auch gefühlt ein Dutzend mal geändert, aber immer das Gleiche Ergebnis.
Was übersehe ich?
P.S.: Nebenbei - wo finde ich eigentlich das lokale Assets - Verzeichnis... (ich blind)
Dateianhänge
Backstretch.JPG
Grüssle
Detlev
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2324
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von Tommy Herrmann »

Moin,

Du musst das Verzeichnis "backstretch" mit der Datei "jquery.backstretch.js" auch auf den Server kopieren, also das in das Stammverzeichnis, dort wo auch die "index.html" (Startseite) Deines Projektes liegt:

backstretch/jquery.backstretch.js

... dort liegt sie im Moment nicht:
Dein Quelltext hat geschrieben:
<script src="./backstretch/jquery.backstretch.js"></script>
http://www.kreuztalertanzclub-casino.de ... stretch.js

Code: Alles auswählen

http://www.kreuztalertanzclub-casino.de/backstretch/jquery.backstretch.js
dettec61 hat geschrieben: Fr 27. Aug 2021, 12:37 P.S.: Nebenbei - wo finde ich eigentlich das lokale Assets - Verzeichnis... (ich blind)
... na dort, wo Du lokal hin publizierst. Du kannst das lokale Verzeichnis anlegen, woimmer Du möchtest. Hier im Screenshot bei mir mal ein Beispiel:


Lokale Publizierung Verzeichnisse.JPG


... ebensso legst Du dieses Verzeichnis mit der jQuery-Datei "backstretch/jquery.backstretch.js" auch lokal an, damit Du das auch schon beim lokalen Publizieren sehen kannst.
Benutzeravatar
dettec61
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 166
Registriert: Di 30. Mär 2021, 09:41
Wohnort: Siegerland

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von dettec61 »

Tach :)
Tommy Herrmann hat geschrieben: Fr 27. Aug 2021, 13:20 Moin,

Du musst das Verzeichnis "backstretch" mit der Datei "jquery.backstretch.js" auch auf den Server kopieren, also das in das Stammverzeichnis, dort wo auch die "index.html" (Startseite) Deines Projektes liegt:
Ahhh. Ich habe das anders gelesen:
Zunächst benötigt Ihr zwei jQuery - Dateien.
jquery.min.js
jquery.backstretch.js - Version 2.0.1 vom 01.10.2012
Entpackt meine ZIP-Datei und kopiert diese beiden jQuery - Dateien in Eurer Verzeichnis “Assets” des Projektes.

dettec61 hat geschrieben: Fr 27. Aug 2021, 12:37 P.S.: Nebenbei - wo finde ich eigentlich das lokale Assets - Verzeichnis... (ich blind)
Tommy Herrmann hat geschrieben: Fr 27. Aug 2021, 13:20 ... na dort, wo Du lokal hin publizierst. Du kannst das lokale Verzeichnis anlegen, woimmer Du möchtest. Hier im Screenshot bei mir mal ein Beispiel:

... ebensso legst Du dieses Verzeichnis mit der jQuery-Datei "backstretch/jquery.backstretch.js" auch lokal an, damit Du das auch schon beim lokalen Publizieren sehen kannst.
Bei der lokalen Publizierung hatte ich schon (falsch, jetzt korrigiert).
Ich meinte die lokale Stelle wovon die Dateien auf den Server kopiert werden, oder ist dass das Gleiche?
Bzw. für "Vorschau im Browser
Grüssle
Detlev
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2324
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von Tommy Herrmann »

Moin,

wenn Du schon eine jQuery-Datei hast, musst Du ja keine zweite hochladen. jQuery ist die meistverwendete und fertige JavaScript-Bibliothek.

Blöd ist nur, dass neue Projekte mit den Themen "Mobirise5" oder "M5" nun die neueste "Bootstrap-Version 5.1" verwenden und daher gar kein jQuery mehr. Mobirise verzichtet mit der Umstellung auf "Bootstrap 5.1" nun auf jQuery ganz. Das führt gerade zu unendlich vielen Problemen.

Du hast aber bei diesem Projekt dieses jQuery (JavaScript-Bibliothek) noch am Server. Bei einem neuen Projekt wird diese jQuery-Datei jedoch fehlen und Du musst sie händisch hochladen. Die andere jQuery ist von "Backstretch" programmiert und betrifft nur die Funktionen von "Backstretch". Die darf natürlich auch nicht fehlen.


... die Vorschau zu verwenden ist zwar nicht wirklich falsch aber Du solltest dieses temporäre Arbeitsverzeichnis gar nicht verwenden. Bitte ebenso diese "Vorschau" möglichst gar nicht verwenden. Außerdem ist dieser kryptische Pfad, passend zum jeweiligen Projekt, nur schwer zu finden.

Bitte immer lokal publizieren, sonst hast Du eventuell mal keine richtige Sicherung. Verwende ein lokales Verzeichnis Deiner Wahl, dem Du dann gleich einen vernünftigen Projekt-Namen gibst.

Es besteht auch überhaupt kein Grund aus einem lokalen Verzeichnis mit "FileZilla" die Daten auf den Server zu kopieren. Das ist unsicherer und eine Quelle von Fehlern und eventuelle Fehlermeldungen von Mobirise können so nicht angezeigt werden. Mobirise "merkt" sich auch alles bereits auf den Server publizierte und wird es nicht erneut publizieren.

Ich verwende ein FTP-Programm ausschließlich zum Löschen von Dateien oder für besondere Dateien, die mit Mobirise nichts zu tun haben. Mit Mobirise selbst zu publizieren geht auch ungleich schneller.

Du trägst dort die gleichen Daten wie bei "FileZilla" in den FTP-Client ein:

https://www.mobirise-tutorials.com/Publizieren.html
Benutzeravatar
dettec61
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 166
Registriert: Di 30. Mär 2021, 09:41
Wohnort: Siegerland

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von dettec61 »

Hallo Tommy,
mache es jetzt so wie du vorgeschlagen hast mit der lokalen Publizierung.
Leider sehe ich das Backstretch da nicht, obwohl die *.js Dateien inkl. Verzeichnisstruktur so liegen wie online. Auch die Bilder sind am rechten Ort...
Komisch
Grüssle
Detlev
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2324
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von Tommy Herrmann »

Moin,

das sollte nicht sein :confused:

Ich kann das genauso lokal sehen - natürlich erst nach dem lokalen Publizieren, also nicht schon in der Arbeitsansicht von Mobirise.
Benutzeravatar
dettec61
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 166
Registriert: Di 30. Mär 2021, 09:41
Wohnort: Siegerland

Re: Wie feststehender Hintergrund und teilweise sichtbare Blöcke erstellen

Ungelesener Beitrag von dettec61 »

Keine Ahnung, finde den Fehler nicht...
Siehe Anhang... Da wo das Kreuz ist, fehlt der Hintergrund...
Dateianhänge
Backstretch.JPG
Grüssle
Detlev
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast