Animation skalierbar?

wenn ich das richtig sehe ist der strich im bild

http://www.abcoaching.ch/html/images/breadcrumbs_home.jpg

meintest du den?

vieleicht kannst du das bild dann einfach kleiner machen mit height="200" oder so..so würde ich es erst mal probieren

Hallo Monika,

ich bin nicht der große Experte, also eher auch noch auf der Fragesteller-Seite. Folgendes ist mir allerdings aufgefallen:

- Deine Seite reagiert meines Erachtens gar nicht responsive. Wenn der Bildschrim verkleinert wird springt die Schnecke einfach unter das Menü. Ist das so gewollt? Deiner Frage nach eher nicht. Auf der HTTML-Seminar Homepage findest Du zu Responsive Web Design einiges. Wenn Du allerdings Lösungsvorschläge von den hier anwesenden Profis möchtest, solltest Du auch den Code hier in das Forum legen.

- Bezüglich der Linie: Auch hier nur eine Vermutung:

Hast du die Generalselektoren im CSS gesetzt?

/* Universalselektoren setzten, um alle Browser auf "Null" zu setzten*/
* {
    margin: 0;
    padding: 0;
}

Aber auch das ist nur eine Vermutung, da der Code von Dir nicht hier drin ist.

Ansonsten gefällt mir die drehende Schnecke richtig gut!

Hoffentlich kannst Du mit meinen Kommentaren etwas anfangen.

Schönes Wochenende

habe die css auch schon durchsucht und nach margin gesucht oder vieleicht ein border in weiss oder sowas..vieleicht läst sich auch was mit position machen einfach 1px höher oderso...aber wie mein vorderman schon sagt poste doch mal den code von der schnecke und so

Redland hat die URL ihrer Seite gepostet, dort kann man alles einsehen, was das Herz begehrt, CSS, JS, HTML.

Moin. Das Objekt Drehfigur mal auf width: 100% setzen und nicht auf 820px? Und dort im style=" " lässt sich das auch mit margin-top, margin-left und negativen Pixelwerten nach oben, links... schieben. Solltest du es direkt im .css ändern wollen ( hatte jetzt nicht die Zeit da zu suchen) vielleicht das Bild und/oder die Animation mit margin: 0 !important; in die Spur bringen?

VLG

Hallo Redland,

ich habe versucht, die Animation mit CSS nachzubilden und responsiv zu machen. Dies ist soweit ganz gut gelungen:

https://jsfiddle.net/Sempervivum/s0xc3949/3/

Leider ist es mir nicht gelungen, dies in deine Seite einzubauen. Der Grund dafür ist, dass die umgebenden Container nicht der Größe des Browserfensters folgen. Deshalb ändert sich die Größe der Animation nicht, denn sie folgt mit einer Breitenangabe von 100% dem umgebenden Container.

Durch das HTML und CSS der Seite steige ich nicht auf Anhieb durch, so dass ich es auch nicht ändern konnte. Habe bisher einen Bogen um Bootstrap gemacht.

Guten Morgen,

versuche mal in deiner

animation_assets/drehfigur/Assets/drehfigur.html

deinen Style zu bearbeiten

<style>

.edgeLoad-EDGE-4332123, #Stage {

height: 100%;

min-height: 100%;

max-height: 100%;

width: 100%;

min-width: 100%;

max-width: 100%;

margin: 0;

margin-left: 10%;

}

</style>

Mfg

Nur so als Randnotiz:

Habe mir den Code von Sempervivum mal angeschaut: -> So einfach kann Webdesign sein! Sogar ich habe das Vorgehen verstanden.

Danke dafür. Habe wieder ein paar mehr Denkanstöße bekommen.

Schönes Wochenende

Das wird dir wahrscheinlich auch kein besseres Ergebnis bringen als mit der jetzigen Animation. Das Problem ist, dass die Seite, wo es eingebettet ist, nicht wirklich responsiv ist:

Zitat

dass die umgebenden Container nicht der Größe des Browserfensters folgen. Deshalb ändert sich die Größe der Animation nicht, denn sie folgt mit einer Breitenangabe von 100% dem umgebenden Container.

Ich würde das Bild so 20px nach Links verschieben,so das du mit den Headbereich einen gleichmässigen Abschluss hast.So steht das ja jetzt etwas über,was ich persönlich für die Optik ändern würde.

Aber das ist meine ansichtssache,das muss ja jeder selber wissen

Hallo beisammen,

jetzt möchte ich doch noch mal dieses Thema aufgreifen.

Ich habe einfach mal mit dem Drehbild von Sempervivum auf meiner Probewebseite rumgespielt. Wie oben gesagt, hat es mit Chrome super geklappt.

Auch auf meinem Smartphone (hier Samsung S5) klappt alles wie es soll -> Somit war ich "glücklich und zufrieden.

Ich habe einfach mal angenommen, dass das bei anderen Browsern auch klappen sollte:

Leider Fehlanzeige.

Ich habe dann mal aus einer Laune heraus Firefox und IE ausprobiert und da wird das Bild zwar gedreht auch in der Größe aber die Bildgröße schneidet sich im Rahmen ab.

Beispiel hier:

Meine Probewebseite bei der ich einfach so rumspiele

Kann das mir jemand erklären?

Danke

ich habe mal rum gespielt und eine fiddel erstellt.

da wahr das genau so opera gut firefox mist

habe auch gesehen das die bilder unterschiedlich gross angezeigt werden.

habe dann zu deiner css noch das zugegeben

.spinning{
    width:250%;
    height:300%;
    
    }

jetzt werden in beiden browsern das bild gleich gross angezeigt und der effekt ist weg.

Ich weiss zwar nicht ob das der richtige weg ist aber er funktioniert zumindest.

vieleicht solltestdu da mal selber kucken und testen.

https://jsfiddle.net/basti1012/s0xc3949/5/

jetzt läuft es in beiden browsern.zumindest in der fiddel

Hallo Basti1012,

Danke für den Hinweis. Getestet jetzt bei MS Edge, Chrome, Firefox von mir: funktioniert. Der IE macht schlapp und verzerrt das ganz sogar. Aber den IE nehme ich auch nicht mehr so ernst.

Danke schön für Deine Mühe. Es hat also nichts mit meinen "Anfänger"-Qualitäten zu tun, sondern ist ein Browser Problem.