Könnte jemand ein fein ausgearbeitetes Filmmaterial bereitstellen, wie nur ein Teil des Bildes animiert werden kann? Nehmen wir an, wir haben ein Bild mit 1366 x 500, das ein Gerätemodell zeigt, und wir möchten nur den Bildschirm dieses Geräts animieren, der etwa 80 x 30 Pixel groß wäre. Das Bild wird dann für einen Website-Hintergrund verwendet. Noch besser wäre es, einen Hyperlink mit diesem animierten Bildschirm hinzuzufügen. Irgendwelche Gedanken?
Wenn ich Sie richtig verstehe und das große Ganze nicht animiert und auf dem kleinen Bildschirm "ersetzt" wird: Es ist mit responsivem Webdesign möglich.
Auswahl-einer-Responsive-Image-Lösung
und ersetzen Sie einfach das große Bild durch Ihr animiertes GIF über Medienabfragen auf dem kleinen Bildschirm
Nun, die Idee hinter einem Animated GIFist, dass das gesamte Bild durch ein anderes ersetzt wird, wie bei einem Daumenkino. Das ist bei diesem Format also nicht möglich.
Klingt so, als würden Sie versuchen, einen UI-Bildschirm auf einem Gerät zu animieren, in dem Sie ein Programm wie After Effects verwenden müssten, um Ihren Bildschirm zu animieren, und es dann über einem Foto Ihres Geräts platzieren müssten. Danach exportieren Sie in GIF oder Flash oder was auch immer.
Schauen Sie sich die UI-Präsentationsvorlagen von einem Unternehmen wie Creative Dash an . Sie bieten Vorlagen für gängige Geräte und die meisten sind mit After Effects kompatibel.
Sie haben eine Vielzahl von Optionen: bereits erwähnt, und wahrscheinlich ist es am besten, Medienabfragen zu verwenden, um bestimmte Dinge auf bestimmten Bildschirmen anzuzeigen.
css3 bietet mehrere Hintergrundbilder, die Sie mit Medienabfragen anpassen können.
Wenn Sie ein tatsächliches Element in Ihrem Markup verwenden img /, vergessen Sie nicht, dass Sie per CSS Hintergrundbilder darauf anwenden können. Ich habe schon einmal eine coole Demo gesehen, bei der ein .jpg-Hintergrund für eine animierte .gif-Datei verwendet wurde ... obwohl ich nicht glaube, dass dies genau für Ihre Lösung funktioniert. aber trotzdem geil zu wissen. es war ungefähr so:
<img src="animated-pix.gif" class="pix-bg" alt="whatever" />
.pix-bg{
padding:100px 200px 7px 30px; /** these are random. use padding **/
background:url("animated-pix-ng.jpg") 0 0 no-repeat;