✔ Icons aus Sprite flüssig zoomen

[kuhlmaehn]

Hi!
Ich habe mehrere Icons in einer JPG-Datei und will nun eine Socialsite-Leiste basteln. Es soll auf jedem Icon ein hover-Effekt liegen, der das Icon flüssig größer und wieder kleiner zoomen lässt.
Ich dachte zuerst an die jquery-Funtion animate und wollte damit die Bildgröße animieren. Da sich ja leider die Größe eines Hintergrundbildes eines divs (noch) nicht ändern lässt musste ich ein img-Element nehmen. Ich hab dieses in einem div mit einer festen Größe und overflow:hidden plaziert. Das img-Element kann ich nun so animieren, dass sich bei einem hover die Größe erhöht. Nun fangen allerdings die Probleme an:
Je weiter rechts ein Bild in der Sprite-Datei ist, desto weiter ist seine Position nach der Größenänderung weg (ich hab mal ein Beispielbild gemacht). Der grüne Punkt bleibt noch ungefähr auf der Stelle, der rote ist allerdings später viel weiter Weg. Ich muss also nicht nur die Größe animieren, sondern auch noch das img-Element verschieben. Ich habe das damit gelöst, dass ich den Margin des Elements paralle verkleinert habe (negativen Margin). Theoretisch funktioniert das auch, sieht aber total daneben aus.
Meine Frage ist nun eigentlich nur, ob es eine bessere Lösung für dieses Problem gibt? Kennt jemand vielleicht eine Seite, wo ein Sprite und ein Zoom-Effekt benutzt werden?
Danke!

 

[Sven Mintel]

Moin,

ich werfe mal lose die Wörtchen ZOOM und SCALE in den Raum und 2 Links dazu:

http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html
http://msdn.microsoft.com/en-us/library/ms531189(VS.85).aspx

Das sollte dich evtl. auf weniger nervenaufreibende Gedanken bringen

 

[kuhlmaehn]

Danke, das kannte ich noch nicht. Doch alle Browser (vorallem ältere Versionen) werd ich damit wohl nicht abdenken können oder?

 

[ZündsteinSchleifer]

alle Browser (vorallem ältere Versionen) werd ich damit wohl nicht abdenken können oder?

Abdenken ganz sicher nicht ;-)

 

[Sven Mintel]

Naja, zumindest den IE hast du da ab 5.5 dabei, bei den anderen kann ich dir nicht sagen, ab wann sie das unterstützen...ein paar Infos dazu stehen aber auf der verlinkten Seite

 

[SpiceLab]

ich habe das ganze über css mit einem jpg gelöst

die einzelnen elemente nimmst du mit dem offset aus dem grundbild mit allen statischen bildern und im hover springst du zu deinem zweiten element


das grundbild enthält damit alle bilder und muss nur einmal geladen werden

frag mal freund google unter "sexy-bookmarks-css"

<style type="text/css">
<!--
.sociallinks{
          overflow:hidden;
          margin:0;
          padding:0;
          list-style:none;
          text-align:center;
        }
        .sociallinks a{
          overflow:hidden;
          width:100px;
          height:30px;
          float:left;
          margin-right:5px;
          text-indent:-200px;
          background:url("social.jpg") no-repeat;
        }
        a.sh-myspace{background-position:-200px -50px;}
        a.sh-tweet{background-position:-100px -50px;}
        a.sh-face{background-position:0px -50px;}

        a.sh-tweet:hover{background-position:-100px 0px;}
        a.sh-myspace:hover{background-position:-200px 0px;}
        a.sh-face:hover{background-position:0px 0px;}

        #text{
          margin-top:3em;
          font-weight:bold;
          font-family:helvetica,arial,sans-serif;
        }
        #text a{
          text-indent:0;
          height:auto;
          text-align:center;
          font-size:11px;
          padding-top:48px;
          color:#999;
          text-decoration:none;
        }
-->
</style>

<ul class="sociallinks" id="text">
        <li><a class="sh-face" target=_new href="http://www.facebook.com/share.php?v=4&src=bm&u=http%3A%2F%2F">facebook</a></li>
        <li><a class="sh-tweet" target=_new href="http://twitter.com/home?status=Das+sollte+man+sich+mal+ansehen &source=12345">twitter</a></li>
        <li><a class="sh-myspace" target=_new href="http://www.myspace.com/Modules/PostTo/Pages/?u=http%3A%2F%2F">myspace</a></li>
</ul>

Und wo kommt hier das flüssige Zoomen zum Tragen, wie im Themenbetreff benannt?

Ich seh hier in deinem Code lediglich die altbekannte CSS-Sprites-Technik.

Desweiteren solltest du in deinen Beiträgen auf Groß- u. Kleinschreibung achten, wie in der Netiquette unter Punkt 15 erwünscht, der du mit deiner Registrierung zugestimmt hast.

 

[kuhlmaehn]

Ist der zitierte Beitrag bereits gelöscht?
Genau der Zoom-Effekt im Zusammenhang mit Sprites ist ja leider das Problem. Wenn auf eins verzichtet werden könnte wäre es sehr viel einfacher
Aber auch trotzdem danke für diesen Post
Ich werde mal schauen, in wiefern ich das mit Svens Links gelöst bekomme.
Danke!

 

[kuhlmaehn]

Ich hätt mal noch eine Frage zum Thema. Wie kann es sein, dass, wenn ich setInterval mit einer Milisekunde starte und bei jedem Mal die größe eines Bildes um ein Pixel vergrößere, die Animation immer noch zu langsam ist und nicht schön aussieht. Bei jQuery scheint es ja auch zu funktionieren. Die Animation z.B. bei den slides sind ja auch total schnell und flüssig. Wie machen die das denn?

 

[Sven Mintel]

Aus Erfahrung:
1ms ...da spielt eh kein Browser mit.

Wähle lieber einen etwas höheren Zeitraum wie bspw. 25ms und mache das mit setTimeout() ...die Performance bei setTimeout() soll besser sein(auch wenn ich das noch nicht getestet hab, wie die Unterschiede sich genau auswirken)

 

[kuhlmaehn]

Alles klar danke, setTimeout hat sich tatsächlich etwas flinker angefühlt.
Mir ist gerade klar geworden, dass bei der geringen Vergrößerung die ich haben will auch ein einfaches Überblenden ausreicht. Das sieht tatsächlich aus wie ein Zoom und reicht total.
Hätte ich auch früher drauf kommen können
Danke!