Hilfe bei Animationen

  • Hallo,
    ich bräuchte dringend Hilfe bei einer Animation. Ich möchte ein Smartphone, wenn darüber gehovert wird, nach oben bewegen. Aber nur zu einem bestimmten Punkt. Ich habe bereits folgenden Code, aber wenn ich darüber hovere, geht das Smartphone bis ganz nach oben, wo lege ich fest, wie weit das Smartphone sich nach oben bewegen darf?


    https://jsfiddle.net/myL5m47z/


    MfG,
    Alex

  • Da sind Scrollbars. Aber das Smartphone wird nicht richtig angezeigt, weil das Bild vom Smartphone natürlich nicht drinne sind. einfach nach rechts und nach unten scrollen.
    Wenn ich es viel zu undeutlich beschrieben habe, dann kann man es natürlich schreiben.
    Also, wenn ich über das Smartphone hovere, dann wird das Bild bis komplett nach oben geschoben, am oberen Rand der Webseite. Ich möchte es nur bis zu mitte haben, also eine Grenze, wie weit dieses Bild sich verschiebt. Ist es möglich, wenn ja, wie?

  • Keine Ahnung was du da vorhast, aber: Den Abstand zum unteren Rand beim Überfahren mit der Maus kannst du hier einstellen:


    demo.css

    CSS: 345
    1. #device div:hover {
    2. bottom: 0px;
    3. }


    Ich kann auch direkt deine nächste Frage beantworten.


    Es ist mit deiner Herangehensweise unmöglich das Objekt nur so weit herausscrollen zu lassen, dass es sich am unteren Bildrand befindet bzw. kannst du es so für genau eine Auflösung (in dem Fall offenbar 1920 x 1080px) einrichten, in allen anderen wird es anders aussehen.

  • Jetzt mal nur auf die .device Klasse bezogen. Du verwendest em als Größenangabe, das so zu lösen ist äußerst heikel. Em bezieht sich direkt auf die vom Browser eingestellte Schriftgröße. Das heißt im Klartext: Bei jedem Benutzer, in jedem Browser und auf jedem Gerät handelt es sich dabei um eine unterschiedliche Größe.


    Mit position: relative; reagiert die bottom-Eigenschaft auch anders, als du zu erwarten scheinst. Dein Code ist extrem schwer nachzuvollziehen, daher kann ich einfach nicht viel mehr dazu sagen.


    Du solltest für solche Positionierungen aber auf jeden Fall Prozentwerte nutzen.

  • Leider so nicht. Ist das dein vollständiger Code? Das ganze Element scheint auch irgendwie völlig deplatziert im HTML Code. Wenn du noch mehr hast kannst du mal deinen kompletten Code zeigen (HTML + CSS), dann können wir noch mal schauen ob es eine einfache Lösung gibt. Gerade fehlt da irgendwie der Kontext.

  • Ja, da war es nun drin. Ich habe mal den gesamten CSS Code, der zu dem Teil gehört, aus demo.css (Zeile 325 - 422) in eine neue Datei kopiert und komplett auskommentiert. Daran orientiert habe ich dann folgendes gemacht:



    Damit hast du ein Grundgerüst. Den inneren Teil überlasse ich dir, falls du dabei Hilfe brauchst kannst du dich natürlich noch mal melden. Aber erst selbst probieren :) Du musst alle Elemente anhand der Größe der Elternelemente skalieren.


    Das Smartphone skaliert jetzt mit der Bildschirmgröße, da müsste man für sehr schmale Anzeigen (Smartphone) natürlich noch eine Grenze einbauen (z. B. mit min-width und min-height und Media Queries) aber im Großen und Ganzen verdeutlicht es das Prinzip dahinter.


    Für die Positionierung habe ich fixed und vw benutzt, wofür das gut ist habe ich im Code kommentiert.