Animation skalierbar?

  • Hallo!


    Auf folgender Startseite einer HTML-Seite, die demnächst abgeschlossen und aufgeschaltet werden soll, ist eine Animation (drehendes Schneckenhaus) platziert:

    http://www.abcoaching.ch/html


    Ist es möglich, die Animation skalierbar zu platzieren, damit sie, wenn das Browserfenster verkleinert wird, mitskaliert und nicht rechts über den Rand ragt?

    Ausserdem hat es oberhalb der Animation (zwischen Animation und grünem Strich) einen kleinen weissen Strich, den ich gerne entfernen würde, jedoch einfach nicht herausfinde, wo ich das tun kann. Vielleicht weiss da auch noch jemand Rat.


    Vielen Dank im Voraus.


    Gruss, Monika

  • wenn ich das richtig sehe ist der strich im bild

    Hallo basti1012!


    Nein, ich meine den Strich unterhalb des JPG's, also zwischen JPG und Animation (wahrscheinlich etwa 1px). Die Animation soll gleich ans JPG anschliessen, ohne Zwischenraum.

    Gruss, Monika

  • 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?

    Code
    1. /* Universalselektoren setzten, um alle Browser auf "Null" zu setzten*/
    2. * {
    3. margin: 0;
    4. padding: 0;
    5. }

    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

  • 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!


    Danke für eure Beiträge. Die Linie habe ich nun entfernen können mit einem negativen Pixelwert.


    Das mit der Drehfigur auf 100% setzen hat leider nicht funktioniert. Nun bekommt sie bei Verkleinerung des Browserfenster vorerst einen Scrollbalken und springt dann wieder unter die Navigation.

  • 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.

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Sempervivum ()

  • 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

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von olkostbe ()

  • 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


    Code
    1. .spinning{
    2. width:250%;
    3. height:300%;
    4. }

    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.