Fragen zu JavaScript-Einblendung

  • Guten Abend zusammen,


    ich habe das Navigationsmenü angepasst. Beim Scrollen wird im Menü ab einem bestimmten Punkt ein Bild eingeblendet. Dies funktioniert auch grundsätzlich so weit.


    Nun habe ich dazu allerdings 2 Probleme bzw. Fragen.


    1. Wenn ich die Seite neu lade, ist das Bild automatisch eingeblendet. Dies soll allerdings erst beim Scrollen passieren und nicht bereits davor. Wie kann ich das beheben?

    2. Die JavaScript-Animation soll nur am PC bzw. Tablet (screen-md-up) erfolgen und nicht am Handy. Wie kann ich das verwirklichen?


    Ja, ich bin ein Anfänger. Nach unzähligen Versuchen habe ich einfach keine Lösungsansätze mehr und bitte daher hier um Hilfe.


    Vielen Dank im Voraus.


    Liebe Grüße

    Jonathan


    Mein Code:


    PHP
    <div class="logocool" id = "upperlogo">
    
              <img src="https://teamforum.eu/ws/images/styleLogo-e38c8ee46e8cf41b83497ce240d4503b1dc86a7e.png" alt="" height="55px" width="55px">
    
    </div>
  • Gib dem Bildelement einfach ein style="display: none;"-Attribut noch mit.


    Zudem seien mir folgende Hinweise gestattet:

    HTMLElement.hidden sollte vermutlich nicht verwendet werden, da es dazu führt, dass das Bild nicht barrierefrei ist (siehe https://developer.mozilla.org/…eb/API/HTMLElement/hidden). Vermutlich wäre da ein HTMLElement.style.display = 'none' besser.
    Außerdem sind height- und width-Attribute innerhalb des HTMLs immer bereits standardmäßig als Pixelwerte zu verstehen. Daher ist eine Angabe der Einheit hier nicht notwendig. Zudem sind diese Attribute als veraltet markiert (außer für <div>). Das sollte normal über CSS gelöst werden.

  • Danke schon einmal für deine Antwort.


    Gib dem Bildelement einfach ein style="display: none;"-Attribut noch mit.

    Das habe ich gemacht, allerdings wird das Bild dann gar nicht mehr, also auch nicht beim Scrollen angezeigt. Das Hauptproblem, dass beim Neuladen der Seite die Animation bereits ausgeführt wird, besteht dadurch immer noch.

    Hast du da vielleicht noch eine andere Idee? :)

    Hast du vielleicht auch noch eine Idee, wie ich das mit der Bildschirmgröße verwirklichen kann?


    Vermutlich wäre da ein HTMLElement.style.display = 'none' besser.
    Außerdem sind height- und width-Attribute innerhalb des HTMLs immer bereits standardmäßig als Pixelwerte zu verstehen. Daher ist eine Angabe der Einheit hier nicht notwendig. Zudem sind diese Attribute als veraltet markiert (außer für <div>). Das sollte normal über CSS gelöst werden.

    Das habe ich so weit erledigt.


    Hier nochmal mein neuer Code:



    Vielen Dank im Voraus und Frohe Ostern.


    Liebe Grüße

    Jonathan C.

  • Hast du da vielleicht noch eine andere Idee?

    Kann man sich das irgendwo live ansehen? Normal sollte die Änderung auf HTMLElement.style.display sowie dem style-Attribut ausreichend sein.

    Hast du vielleicht auch noch eine Idee, wie ich das mit der Bildschirmgröße verwirklichen kann?

    window.matchMedia('(min-width: 769px)').matches:

    https://developer.mozilla.org/…Web/API/Window/matchMedia

  • Vielen vielen Dank, es funktioniert nun einwandfrei! :)


    Jetzt möchte ich noch einen kleinen Effekt einbauen.

    Ich habe mir gedacht, dass wenn die Animation eintritt, dass dann das Bild kurz größer und dann wieder normal wird.


    Das habe ich über CSS versucht mit:

    transition: all 0.3s; bzw. testweise auch mit transition: all 0.3s ease-in-out;


    Doch funktionieren tut das nicht.


    Ich bin ja Anfänger, muss ich das noch irgendwie im JavaScript-Code angeben?

  • Für eine transition brauchst du immer auch einen Anhaltspunkt, wann das passieren soll. Bzw. du musst eine Zustandsänderung herbeirufen. Dabei kann nicht jeder Zustand per CSS animiert werden – wie beispielsweise auch display.


    Da müsstest du dann vermutlich eher mit opacity arbeiten und per JavaScript dann erst nach .3s das Element auf display = 'none'; setzen.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!