Antworten auf deine Fragen:
Neues Thema erstellen

Javascript animierte Navigation

Philipp88

Nicht mehr ganz neu hier

Hallo :)

leider bin ich an einem Punkt wo ich nicht weiß wie man dieses schnell und einfach mit Jquery lösen kann:(

Für eine Webseite muss ich so eine Navigation wie hier http://www.maserati.de/, also den Hover.
Meine Idee wäre, den inaktiven Zustand als Hintergrund einzubinden und bei li:hover auszutauschen. Soweit kein Problem, nur weiß ich nicht wie ich mittels Jquery den Effekt hinbekomme:(

Kann mir jemand ein Denkanstoß geben?

Ich würde mich sehr freuen
Danke im Voraus
Philipp
 

Duddle

Posting-Frequenz: 14µHz

AW: Javascript animierte Navigation

Sollte es so sein und du bietest eine Leistung einem dritten an die du selbst nicht erbringen kannst ->
Das trifft wohl auf ein geschätztes Viertel aller Fragen in diesem Unterforum zu :p

Zur Frage selbst verweise ich mal ganz einfach auf folgende Artikel, die verschiedenste animierte Navigationen vorstellen:


Die dort verlinkten Ideen sind zwar schon recht alt aber die Ansätze kannst du dir ja abschauen. Ohne jetzt allen Links gefolgt zu sein kommt http://snook.ca/archives/javascript/jquery-bg-image-animations/ recht nah an die Maserati-Geschichte.


Duddle
 

leveler

00110100 00110010

AW: Javascript animierte Navigation

Für eine Webseite muss ich so eine Navigation wie hier http://www.maserati.de/, also den Hover.
Meine Idee wäre, den inaktiven Zustand als Hintergrund einzubinden und bei li:hover auszutauschen. Soweit kein Problem, nur weiß ich nicht wie ich mittels Jquery den Effekt hinbekomme
Firebug ist Dein Freund. Denn grundsätzlich hast Du die Lösung des Ganzen ja schon vorliegen.
 

Curanai

Aktives Mitglied

AW: Javascript animierte Navigation

...sieht für mich nach CSS-Sprites mit "animate()" (Beispiel in der originalen jQ-Doc) aus ... aber mein Auto hab ich da auch her - ist toll.
 

Curanai

Aktives Mitglied

AW: Javascript animierte Navigation

1. Du bei jsfiddle kein jQ verwenden, wenn links in der Auswahl "pure" genannt wird.

2. Ich hab's Dir mal umgestellt - da ich da jetzt kein Update von jsfiddle bekomme, um eine URL hier abzustellen - der Source:

EDIT: der FIDDLE

Code:
<div id="navigation">
    <ul>
        <li><a href="http://www.google.de">Aktuelles</a></li>
    </ul>
</div>
Code:
#navigation ul li  {
  display: inline-block;
}

#navigation ul li a  {
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  display: block;
  width: 116px;
  padding: 15px 0 11px 51px;
  background: url("https://www.google.de/logos/2013/ella_fitzgeralds_96th_birthday-1212009-hp.jpg");
}
Habe mir erlaubt das Hintergrundbild von GOOGLE (Bild des Tages) zu nehmen.


Code:
$(document).ready(function() {
  $("#navigation ul li a").mouseover(function(){
        $(this).animate({"background-position": "-=50px"}, "slow");
  }).mouseout(function(){
         $(this).animate({"background-position": "+=50px"}, "slow");
  });
});
Check bitte, ob Dein Bildverzeichnis wirklich "Images" heißt - allein das ist schon ein Klapps auf die Finger wert.

Fazit: Bei mir läuft's ...
 
Zuletzt bearbeitet:

Philipp88

Nicht mehr ganz neu hier

AW: Javascript animierte Navigation

Danke jetzt geht es :)
Aber wenn ich veranlassen will das er nur die y-achse verändern soll geht's wieder nicht :(
HTML:
$(document).ready(function() {
  $("#navigation ul li a").mouseover(function(){
        $(this).animate({"background-position": "-43px 0"}, "slow");
  }).mouseout(function(){
         $(this).animate({"background-position": "+43px 0"}, "slow");
  });
});
 

Duddle

Posting-Frequenz: 14µHz

AW: Javascript animierte Navigation

Du hast den Artikel nicht komplett gelesen:
jQuery is a great library for this type of task but out of the box, it can't animate background position properly because of the need to animate two values instead of just one (too bad not all browsers implemented the non-standard background-position-x and -y like Internet Explorer). You'll have to use the Background-Position plugin that is linked in the demo (the original plugin is no longer available on the jQuery site).
Dieses PlugIn (und die im Artikel genutzte jQuery-Version) ist aber schon relativ alt und funktioniert (zumindest in meinen Tests) nicht mehr mit dem aktuellen jQuery. Google spuckt mir aber diese Antwort auf die Frage aus, wie man gescheit den Hintergrund animieren kann.

Dieser "Hook" macht genau das was du dir wünschst, auch wenn es nicht ganz so komfortabel wie ein kleines PlugIn ist. http://jsfiddle.net/PkP9F/5/


Duddle
 

Philipp88

Nicht mehr ganz neu hier

AW: Javascript animierte Navigation

Vielen dank jetzt funktioniert es wie gewünscht :)
Muss jetzt noch nachvollziehen was das hook macht.
Vielen vielen dank nochmal :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.634
Beiträge
1.538.448
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben