[Suche] HTML Code 2 Layer parallax scrolling [erledigt]

  • Hallo liebe Community !

    Da ich mich nicht gut mit HTML auskenne und den folgenden Code nicht richtig verstehe, so wollte ich euch einmal fragen, wie dieser Aufbau eigentlich funktioniert und wie man den Code noch optimieren könnte.

    Ich habe nur begrenzten Zugriff auf die Website, wo ich den Code einfügen kann (nur ein Kästchen) und darum bin ich mir nicht so sicher, was ich der verstelle und wieso ganz bestimmte Fehler auftreten. Es geht um den folgenden HTML Code ...

    Code
    <img rel="nofollow" src="" style="background-repeat: no-repeat;background-size: cover;background-position: 0em 0px;margin-left: -13em;margin-right: 0;margin-top: 0em;margin-bottom:0em;width:100vw;" target="_blank">
    <ul target="_blank" style="border:4px background-attachment:fixed;background-image: url(https://i.imgur.com/Platzhalter1.png);background-attachment: fixed; background-repeat:no-repeat; background-size:100%;background-position:0em 0px;margin-left: -10em; margin-right: -10; margin-top:2em; " rel="nofollow"><br><p style="border: none; background:none; background-image:none; background-position:center top ;width: 100%; padding: 0px;border-radius: 3px; margin-top:2em;  ;margin-right: auto; margin-right:auto;  text-align: center; text-shadow: 0 0 2px#ffffff, 0 0 5px#ffffff, 0 0 20px #ffffff; font-size:20px; line-height: 20px;  font-family:Poster;" target="_blank" rel="nofollow"><br target="_blank" rel="nofollow"><br><img border="0" src="https://i.imgur.com/Platzhalter2.png"  target="_blank" rel="nofollow">


    Was ich mit dem Code erreichen möchte ist, das 2 Bilder mit Paralaxscrolling auf der Seite erscheinen. Das bedeutet 1 Bild als Hintergrund, welches starr bleibt und sich nicht bewegt und das 2 Bild soll scrollen, wenn ich mit der Maus runter und rauf gehe auf der Website. Das Bild im Vordergrund sind Texte und Grafiken und das Hintergrundbild ist nur eine einzelne Grafik (Muster).

    Das Problem an dem Code ist jedoch, das das Bild über dem Hintergrund in einer Art Rahmen steckt und deshalb jede Menge Platz links und rechts ist. Ich würde gerne erreichen, das ich für das Bild im Vordergrund mehr Breite zur Verfügung habe und das sich die Grafik auch automatisch an den Bildschirm anpaßt.

    Also wenn ich meinen Browser verkleinere, dann sollte das Bild quasi mit skalieren. Ich habe auch schon ein wenig umhergespielt mit dem Code und eine Kleinigkeit geändert, aber wenn ich nun im geänderten Code den Browser verkleinere, dann schiebt der das Vordergrundbild links und rechts außerhalb des Bildschirms.

    Der geänderte Code lautet:

    Code
    <img rel="nofollow" src="" style="background-repeat: no-repeat;background-size: cover;background-position: 0em 0px;margin-left: -13em;margin-right: 0;margin-top: 0em;margin-bottom:0em;width:100vw;" target="_blank">
    <ul target="_blank" style="border:4px background-attachment:fixed;background-image: url(https://i.imgur.com/Platzhalter1.png);background-attachment: fixed; background-repeat:no-repeat; background-size:100%;background-position:0em 0px;margin-left: -10em; margin-right: -10; margin-top:2em; " rel="nofollow"><br><p style="border: none; background:none; background-image:none; background-position:center top ;width: 100%; padding: 0px;border-radius: 3px; margin-top:2em;  ;margin-right: auto; margin-right:auto;  text-align: center; text-shadow: 0 0 2px#ffffff, 0 0 5px#ffffff, 0 0 20px #ffffff; font-size:20px; line-height: 20px;  font-family:Poster;" target="_blank" rel="nofollow"><br target="_blank" rel="nofollow"><br><img border="0" src="https://i.imgur.com/Platzhalter2.png"  target="_blank" rel="nofollow">


    Könnt ihr mir bitte dabei helfen, den Code so zu ändern, das ich am Ende 2 Bilder habe mit Paralaxscrolling und mehr Platz links und rechts für das Bild im Vordergrund und das die komplette Grafik sich dem Browserfenster mit anpaßt, wenn dieser zu klein ist ?

    Für den Code 1 ist mein Bild nur 1080x3000 gewesen, aber ich brauche unbedingt 2000x3000 wegen der Breite und mehr Platz für das Bild über dem Hintergrund (Texte, Grafiken ...).

  • HTMLNoob82

    Hat den Titel des Themas von „HRML Code für parallax scrolling Bilder“ zu „[Suche] HTML Code 2 Layer parallax scrolling“ geändert.
  • Der Code, den Du da gepostet hast, ist zum großen Teil fehlerhaft. Da Du ihn nicht verstehst, vermute ich, dass Du ihn irgend wo im Web gefunden hast?


    Unter "Parallax Scrolling" verstehe ich etwas wie z. B. hier:

    Parallax Scrolling: Funktionsweise und 8 Beispiele
    Wie durch Parallax Scrolling eine optische Täuschung auf Ihrer Website entsteht, die das Nutzererlebnis verbessert, erfahren Sie hier.
    blog.hubspot.de


    Aber Du meinst anscheinend etwas anderes: Das Hintergrundbild soll das Browserfenster voll ausfüllen und das Vordergrundbild soll sich beim Scrollen bewegen. Wie genau ist das gemeint? Ist das Vordergrundbild von der Höhe her wesentlich größer als das Browserfenster, so dass man scrollen muss, um es vollständig sehen zu können?


    Zitat

    Ich habe nur begrenzten Zugriff auf die Website, wo ich den Code einfügen kann (nur ein Kästchen)

    Wie kommt das, handelt es sich um einen Baukasten oder ein CMS? Ich vermute, das ist der Grund für das viele Inline-CSS in deinem Code.

  • 01.png 02.png 2023.04.17 Bild 01.png


    Also der Code 1(siehe unten) von mir geht, aber ich möchte daran etwas ändern. Ich habe den Code allerdings nicht erstellt, sondern so im Internet gefunden. Auf den Bildern oben sieht man, was ich als Ergebnis haben möchte (grundlegend).

    Es sollen also 2 Layer sein, wovon sich einer bewegt (Vordergrund) und der andere (Hintergrund) nicht. Dadurch entsteht eine gewisse Simulation, die ich möchte, also das Paralax-Scrolling.

    Mein Problem ist allerdings nun, der Layer "Vordergrund" zu wenig Platz bietet und zwar nicht so wie auf der Grafik oben, denn die ist nur zur Veranschaulichung gedacht. Was ich gerne möchte ist, das der Layer "Vordergrund" verbreitert wird im Code UND das sich beide Layer an den Bildschirm anpassen.

    Aktuell passen sich bei meinem Code die beiden Layer nur ein wenig an, aber wenn das Fenster kleiner wird als 1.370 Pixel, dann verschieben sie die beiden Layer merkwürdig.

    Im Code 2 (siehe unten) ist genau das gleiche, nur das ich da an 2 Werten rumgespielt habe. Das Ergebnis war zwar mehr Platz links und rechts auf dem Layer "Vordergrund" ,aber so bald ich meinen Browser aus dem Vollbild nehme (verkleiner) ,dann verschiebt sich der Layer "Vordergrund" merkwürdig rechts außerhalb des Bildschirms.

    Ich habe außerdem nur die Möglichkeit in 1 Fenster den Code zu schreiben (siehe Anhang schwarzes Bild) und somit keinen Zugriff auf den Header, oder sonstwas. Der ganze Code muß also wie auf dem Bild zusehen ist, in den Kasten rein.

    Das ist was ich eigentlich erklären wollte und wobei ich Hilfe bräuchte ;) .

    Wenn also jemand mir mit dem Code helfen könnte, oder einen ganz neuen kennt, der besser für dieses Anwendungsbeispiel passen würde, dann wäre ich sehr dankbar für eine Lösung, des Problems.



    CODE 2 (Problem)
    ================

    Code
    <img rel="nofollow" src="" style="background-repeat: no-repeat;background-size: cover;background-position: 0em 0px;margin-left: -13em;margin-right: 0;margin-top: 0em;margin-bottom:0em;width:100vw;" target="_blank">
    <ul target="_blank" style="border:4px background-attachment:fixed;background-image: url(https://i.imgur.com/Vordergrund.png);background-attachment: fixed; background-repeat:no-repeat; background-size:100%;background-position:0em 0px;margin-left: -20em; margin-right: -20; margin-top:1em; " rel="nofollow"><br><p style="border: none; background:none; background-image:none; background-position:center top ;width: 100%; padding: 0px;border-radius: 3px; margin-top:1em;  ;margin-right: auto; margin-right:auto;  text-align: center; text-shadow: 0 0 2px#ffffff, 0 0 5px#ffffff, 0 0 20px #ffffff; font-size:20px; line-height: 20px;  font-family:Poster;" target="_blank" rel="nofollow"><br target="_blank" rel="nofollow"><br><img border="0" src="https://i.imgur.com/Hintergrund.png"  target="_blank" rel="nofollow">





    CODE 1 (geht aber zu wenig Platz links und rechts):
    ====================================

    Code
    <img rel="nofollow" src="" style="background-repeat: no-repeat;background-size: cover;background-position: 0em 0px;margin-left: -13em;margin-right: 0;margin-top: 0em;margin-bottom:0em;width:100vw;" target="_blank">
    <ul target="_blank" style="border:4px background-attachment:fixed;background-image: url(https://i.imgur.com/Hintergrund.png);background-attachment: fixed; background-repeat:no-repeat; background-size:100%;background-position:0em 0px;margin-left: -10em; margin-right: -10; margin-top:2em; " rel="nofollow"><br><p style="border: none; background:none; background-image:none; background-position:center top ;width: 100%; padding: 0px;border-radius: 3px; margin-top:2em;  ;margin-right: auto; margin-right:auto;  text-align: center; text-shadow: 0 0 2px#ffffff, 0 0 5px#ffffff, 0 0 20px #ffffff; font-size:20px; line-height: 20px;  font-family:Poster;" target="_blank" rel="nofollow"><br target="_blank" rel="nofollow"><br><img border="0" src="https://i.imgur.com/Vordergrund.png"  target="_blank" rel="nofollow">
  • Als Test, ob ich das Verhalten, das Du erzielen möchtest, richtig verstehe, versuche zunächst dies:

    Wie Du das dann mit deinen begrenzten Möglichkeiten umsetzen kannst, überlegen wir danach. Dazu musst Du aber diese Frage beantworten:

    Zitat

    Ich habe nur begrenzten Zugriff auf die Website, wo ich den Code einfügen kann (nur ein Kästchen)

    Zitat
  • Vielen herzlichen Dank für die Mühe mit deinem HTML-Code.

    Leider funktioniert der Code nicht, wenn ich meine Bilder da in die Platzhalter einfüge, denn dann bekomme ich nur den Text "Test Scrolling Container" zusehen und nichts weiter.

    Es handelt sich dabei um eine Website, auf der man nur einen Bereich ausfüllen kann, ähnlich wie bei einer Single-Börse. Dort habe ich nur einen Kasten "Über mich" und "Wunschliste" und da kann ich dann einen HTML-Code einfügen. Als Beschreibung steht unter der Box vom Betreiber der Website der folgende Hinweis "Du kannst einige HTML-Tags verwenden (a p i strong b u ul ol li h1 h2 h3 img font br span).".

    Das bedeutet, das ich nicht irgendwo CSS-Code woanders speichern kann, oder auch nichts in einen Header der Website schreiben kann. In anderen Profilen sehe ich auch schöne Designs und da ist noch viel mehr möglich, mit Änderung des Mauszeigers und klickbaren Flächen innerhalb eines Banners (nicht der ganze Banner) und vieles mehr.

    Alles müßte also wie bei "CODE 1" in diesen Kasten rein, was ja auch geht. Ich möchte halt eben gerne meine Änderungen durchführen.

  • Danke für die Erklärung!


    Zitat

    Leider funktioniert der Code nicht, wenn ich meine Bilder da in die Platzhalter einfüge

    Wie hast Du das denn versucht, poste mal den Code. Die Bilder sind als Hintergrundbilder angelegt:

    Code
    background-image: url(images/dia0.jpg);

    Hast Du versucht, dort deine eigenen Bilder einzusetzen?

  • Ich habe versucht folgendes einzufügen und jedes mal sehe ich nur einen Text "Test Scrolling Container" und nichts weiter.

    Code Versuch 1:


    Code Versuch 2:


  • Im ersten Versuch war das "images/" in der URL des Bildes überflüssig aber in dem zweiten Versuch kann ich keinen Fehler finden. Ich nehme an, Du hast überprüft, dass die Bilder auf imgur vorhanden sind? Falls möglich, poste doch die URL eines Bildes auf imgur, das nicht vertraulich ist, damit ich es selbst testen kann.

  • Ich habe dir einmal einen HTML-Code erstellt mit gültigen Links zu imgur.
    Da ich nicht weiß, welches Bild vorne ist und welches hinten mußt du vielleicht beide LINKS ev. tauschen, sonst siehst du nur das Hintergrund Wallpaper und nicht den Text der darüber sein sollte.

    Ich vermute es wird eher an der Art des HTML-Code liegen, also das die Website ihn nicht versteht, oder er zu komplex ist. Vielleicht sollte er wirklich wesentlich simpler ausfallen, so wie oben in meinem Beitrag erwähnt.


    Dein HTML-Code mit imgur Links:



    Mein HTML-Code (der geändert werden muß):


    Code
    <img rel="nofollow" src="" style="background-repeat: no-repeat;background-size: cover;background-position: 0em 0px;margin-left: -13em;margin-right: 0;margin-top: 0em;margin-bottom:0em;width:100vw;" target="_blank">
    <ul target="_blank" style="border:4px background-attachment:fixed;background-image: url(https://i.imgur.com/Bild1.png);background-attachment: fixed; background-repeat:no-repeat; background-size:100%;background-position:0em 0px;margin-left: -10em; margin-right: -10; margin-top:2em; " rel="nofollow"><br><p style="border: none; background:none; background-image:none; background-position:center top ;width: 100%; padding: 0px;border-radius: 3px; margin-top:2em;  ;margin-right: auto; margin-right:auto;  text-align: center; text-shadow: 0 0 2px#ffffff, 0 0 5px#ffffff, 0 0 20px #ffffff; font-size:20px; line-height: 20px;  font-family:Poster;" target="_blank" rel="nofollow"><br target="_blank" rel="nofollow"><br><img border="0" src="https://i.imgur.com/Bild2.png"  target="_blank" rel="nofollow">
  • Fehler gefunden, es lag am "background-size: cover;" dadurch fiel die Schrift aus dem Browserfenster hinaus.

    Versuche jetzt dieses HTML, ob es das macht, was Du vorhast. Beim Scrollen wandert die Schrift nach oben.

    Anschließend versuchen wir dann, es mit den HTML-Elementen zu machen, die in deiner Box möglich sind.

  • Grüß dich hallo und vielen Dank für den geänderten Code.
    Wenn ich den so einfüge mit meinen 2 Bildern, dann habe ich keine Hintergrund mehr.
    Es ist komisch zu erklären ...

    Wenn ich den "Hintergrund" über mein Bild lege (nicht sinnvoll), dann kann ich den "Hintergrund" sehen, aber wenn ich den "Hintergrund" nach unten lege, so wie es sein sollte, dann ist er verschwunden, aber mein Bild ist sichtbar.

    Ich habe 2 Ebenen => 1x Hintergrund und 1x Grafik+Text (in 1 Bild)

    Beispiel 1:
    Hintergrund oben (verdeckt alles andere)
    Grafik+Text drunter

    Ergebnis => Hintergrund sichtbar


    Beispiel 2:
    Grafik+Text oben
    Hintergrund drunter

    Ergebnis => Hintergrund verschwunden

    Das heißt irgendwas stimmt da immer noch nicht, denn so habe ich als Ergebnis entweder keinen "Hintergrund" ,oder der Hintergrund liegt ÜBER allem und verdeckt den Rest (sinnfrei).

    Ich will damit sagen, das ich die beiden Stellen im Code ausprobiert und mehrfach getauscht habe, aber der Hintergrund ist entweder verschwunden, oder überdeckt alles

    Code
    background-image: url(https://i.imgur.com/kYaSmEg.png)
    <img src="https://i.imgur.com/Jt0KdZi.png">
  • Hast Du zunächst das komplette HTML, das ich gepostet hatte, getestet?
    Dies hier:

    Code
            img {
                width: 80%;
            }

    sorgt dafür, dass seitlich freier Raum entsteht, wo der Hintergrund sichtbar wird. Allerdings muss das Bild dann noch zentriert werden, was das CSS mit Flex in meinem Code erledigt.

  • Also aktuell habe ich den Code von dir so eingetragen schau bitte einmal rein, ob das so stimmt.


    Dort sehe ich den Hintergrund nicht, oder nur den Text. Ich habe beide Links auch mal getauscht und entweder verdeckt der Hintergrund den Vordergrund, oder er ist nicht sichtbar.

    Vordergrund das hier => https://i.imgur.com/Jt0KdZi.png
    Hintergrund sollte das sein => https://i.imgur.com/kYaSmEg.png


    2023.04.25 Bild 06.png

  • Ja genau, das ist das kleine Fenster, wo ich meinen Code einfügen darf.

    Die Demo von deinem Link ist genau was ich möchte.
    Der "Hintergrund" ist diese Lederoptik und im "Vordergrund" soll der Text "hallo ich bin ein Text" stehen. Wenn man auf der Seite nach unten scrollt, dann sollte sich nur der "Vordergrund" bewegen und der Hintergrund starr bleiben.

    Wenn ich allerdings den folgenden Code von dir verwende, dann passiert es, das der Hintergrund entweder gar nicht zusehen, sondern nur "hallo ich bin ein Text" und wenn ich die Links tausche im Code, dann sehe ich den "Hintergrund" fälschlicherweise als "Vordergrund" und den Text "hallo ich bin ein Text" nicht mehr.

  • Zitat

    Die Demo von deinem Link ist genau was ich möchte.

    OK, dann wissen wir jetzt immerhin wo wir hin wollen.


    Den Code von mir in deinem letzten Posting kannst Du nicht unverändert übernehmen, er sollte lediglich zur Klärung dienen, was Du erreichen willst.


    Leider kann ich jetzt nicht testen, was ich dir vorschlage. Versuche dies in dein Fenster einzutragen:

  • Vielen lieben Dank für den geänderten Code !
    Ja jetzt funktioniert er richtig, schau ...

    2023.04.27 Bild 40.png


    Das Problem ist nun allerdings, das der Abstand links "NEBEN" dem eingetragenen Code größer ist, als rechts.
    Ich habe mal ein paar Linien "reingemalt" um zu verdeutlichen was ich damit meine ... schau

    2023.04.27 Bild 40.png

    Es war super, wenn links genauso "wenig" Abstand ist, wie rechts im Bild, damit ich viel mehr Platz haben für mein Design innerhalb des Codes "auf" dem "Hintergrund".

  • Dann sind wir ja einen ganzen Schritt weiter. In meiner Testdatei ist der Abstand links und rechts jedoch genau gleich. Auf deinem Screenshot sehe ich, dass diese Abstände, die Du markiert hast, keinen Hintergrund haben. Es muss irgend wie an dem Umfeld des HTML liegen. Ich dachte daran, dass Du einen Screenshot des HTML-Inspektors postest, bin aber skeptisch ob wir damit zum Ziel kommen. Kannst Du die URL einer solchen Seite posten?

  • Vielen lieben Dank für deine ganze Mühe bisher !
    Ich hoffe, das wir es gemeinsam schaffen können den Code so umzuschreiben, das die dumme Website ihn auch akzeptiert 😅.

    Wenn ich dir irgendwie hier eine PN senden könnte, dann würde ich dir auch gerne mehr dazu sagen, denn es gibt Dinge, die kann ich hier nicht öffentlich reinschreiben (privat).

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!