Wie kann ich einen besseren 3D-Lifting-Effekt eines Logos für eine Website erzielen?

Dies ist mein derzeitiger Ansatz, nur der Schatten bewegt sich. http://tinkerbin.com/uekpe227

Dies ist ein zweiter Ansatz, sowohl der Schatten als auch die Buchstaben bewegen sich. http://tinkerbin.com/LjiGDKa7

Und bei der letzten Annäherung bewegt sich der Schatten nicht. http://tinkerbin.com/ZDvUj6Pi

(Tipp: Bewegen Sie den Mauszeiger darüber, um den Effekt zu sehen, Sie benötigen einen modernen Browser.)

Eine CSS-Animation mag aufgrund der Neuheit cool erscheinen, aber für ein Logo wäre es wahrscheinlich besser, ein Grafikprogramm zu verwenden, um das Logo wirklich hervorzuheben. Es wird statisch sein, aber es wird auch besser aussehen und die ganze Zeit so aussehen, anstatt nur, wenn der Benutzer mit der Maus darüber fährt.
:/ Nun, das ist mir bewusst, das vorliegende Problem besteht weiterhin.

Antworten (1)

Die wirkliche Antwort auf diese Frage ergibt sich direkt aus der Frage: "Wie funktioniert es in der realen Welt?" Ein Effekt wie dieser erscheint künstlich und falsch, wenn er nicht nachahmt, was mit einem physischen Objekt passieren würde. Dies ist ein allgemeines Prinzip, das für alle Effekte gilt, die wir auf Websites, auf Papier oder in Filmen verwenden. Ein klassischer Fehler beim Photoshop-Compositing besteht darin, dass das Licht auf dem Hintergrund aus einer anderen Richtung kommt als das Licht auf dem Motiv. Es kann niemals echt aussehen, weil die reale Welt nicht so funktioniert. Sie haben hier ein ähnliches Problem, also versuchen Sie Folgendes:

Legen Sie einen flachen Gegenstand (eine Münze würde funktionieren) auf eine weiße Oberfläche, leuchten Sie mit einem Licht darauf und heben Sie ihn dann leicht an. Was passiert mit dem Objekt in Ihrem Blickfeld? Was macht der Schatten? Sie bewegen sich beide , aber sie bewegen sich gleichzeitig, nicht einzeln. Deshalb sieht keines Ihrer Beispiele richtig aus.

Jedes Mal, wenn Sie vor einer Herausforderung wie dieser stehen, bei der Sie möchten, dass etwas die Illusion eines Analogons aus der realen Welt vermittelt, müssen Sie dieses Analogon aus der realen Welt finden oder erstellen und es dann beobachten, bis Sie sicher sind, dass Sie wissen, was es ist sieht aus wie. Gehen Sie dann zurück zu Photoshop oder der Anwendung Ihrer Wahl und lassen Sie es dort genauso aussehen.

Eine großartige Antwort jedoch, wenn sich beide bewegen und es schließt, liegt es daran, dass es sich um den geringstmöglichen Schritt bewegt, ein Pixel. Deshalb habe ich beschlossen, nur den Schatten zu verschieben. Wenn ich jedoch das CSS optimiere, sieht es immer künstlich aus, wenn ich mit der Textposition herumspiele. Hier ist ein vierter Versuch: tinkerbin.com/CHC5BgJE Ty for your time!
Ich habe Ihr CSS so modifiziert, dass es meiner Meinung nach gut funktioniert. Viel kürzerer Übergang (0,05 statt 0,5), weniger Bewegung, deutlicherer Schatten.