Das passt! Danke dir vielmals! 
Sorry, wenn ich anstrengend war, aber ich weiß leider nicht viel von diesen Animationen.
Beiträge von AlexHC
-
-
CSS
Alles anzeigen#device { /* Durch fixed kann das Element mit top, right, bottom und left absolut zum Bildschirmrand ausgerichtet werden. */ position: fixed; overflow: hidden; /* vw ist viewportWidth und somit wie %. Man kann jedoch zwischen vw und vh (viewportHeight) unterscheiden. */ right: 5vw; margin: 0 auto; /* Die SVG Datei hat ein ungefähres Verhältnis von 1:2, um dies zu wahren einfach die doppelte Viewport-Breite als Höhe verwenden. */ width: 20vw; height: 40vw; /* Mit diesem Wert kann nun gesteuert werden, wie viel vom Element am unteren Bildrand herausschaut, beim Überfahren mit der Maus wird dieser Wert auf 0 gesetzt und animiert. */ bottom: -32vw; /* Für die Animation zuständig. */ transition: bottom .5s linear; background: url(../img/iphone_white.svg) no-repeat 50% 0%; background-size: 100%; webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; } /* Wenn #device mit der Maus überfahren wird. */ #device:hover { /* Abstand zum unteren Rand festlegen. */ bottom: 0px; } .device { background: url(../img/iphone_white.svg) no-repeat bottom center; background-size: 25%; /* Wichtig um immer das gesamte Bild anzeigen zu lassen. */ height: 100% no-repeat; } -
Das passt, danke dir! Aber beim Bild, das wird nicht übers Smartphone gestreckt (markiert mit weißen Strichen). Wie kann man es anpassen?
Ich habe es bereits schon so gemacht, dass es sich nicht wiederholt.
HTMLheight: 100% no-repeat;[Blockierte Grafik: http://i.grab.la/0680a-6e84daa2-9f94-4d01-b346-4f2dcb405454.png]
-
https://mega.nz/#!ykhFiSjJ!48m…r6Biz3tgqoCFcTnbuF7oKpPKw | Hier sollte es implementiert sein, habe es nachgeprüft (auch bei vorherigen...) Das Smartphone sollte einfach nur über's hovern sich zu einem bestimmten Punkt bewegen. Mehr will ich gar nicht, ich verstehe das HTML und CSS Zeugs noch nicht so richtig, von daher brauche ich Rat und dachte ich wäre hier am besten aufgehoben.
-
Hier das ganze Projekt:
-
Okay. Danke. Also entnehme ich mal aus der Antwort das es nicht möglich ist, jedenfalls nicht mit meinem Code.
-
Okay (Sempervivum: Bei mir funktioniert es...)
Gibt es denn andere Vorgehensweisen? Es gibt so viele Möglichkeiten, aber genau diese fehlt oder gibt es andere Möglichkeiten sowas zu erreichen?
-
Mit dem Fiddle bekomme ich das nicht hin. Hier zip:
-
Danke, so hätten wir schon einmal gelöst, dass ich warten muss und erst herausfinden muss, dass man noch weitere Informationen benötigt.
[Link entfernt]
-
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? -
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