Ankündigung

Einklappen
Keine Ankündigung bisher.

Background animieren mit JQuery

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Background animieren mit JQuery

    Hallo Zusammen,

    ich habe ein kleines Problem.
    Ich möchte mein Hintergrundbild "atmen" lassen, also langsam rein und raus zoomen lassen.

    Das funktioniert hiermit auch schon ganz gut:
    Code:
    $(document).ready(function(){
    function ani() {
    //$('.content').css("background-size", "100% 100%").animate({"background-size":"+=15%"}, 6000 ).animate({"background-size":"-=15%"}, 6000, ani);
    }
    ani();
    });
    Das Problem ist jedoch, dass der Hintergrund in Vollbild angezeigt wird.
    Dazu nutze ich die CSS Angabe background-size: cover; , sodass das Hintergrund-Bild immer in voller Größe angezeigt wird, egal welches Seitenverhältnis gerade der Browser hat.
    Wenn der Browser beispielsweise hochformatig ist, wird das Hintergrundbild mit 100% Höhe angezeigt und rechts und links abgeschnitten.
    Dies funktioniert jetzt jedoch nicht mehr mit der JQuery Animation, da dort der Hintergrund einfach auf 100% skaliert wird.

    Kennt da jemand eine Lösung für? Habe ich mein Problem richtig erklärt oder gibt es noch Fragen?


    Vielen Dank im Voraus!

    Milan



  • #2
    http://jsfiddle.net/5x8mwzed/1/
    Geht glaub ich nur im aktuellen Firefox/Chrome.
    I like cooking my family and my pets.
    Use commas. Don't be a psycho.
    [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

    Kommentar


    • #3
      Zitat von rudygotya Beitrag anzeigen
      http://jsfiddle.net/5x8mwzed/1/
      Geht glaub ich nur im aktuellen Firefox/Chrome.
      Läuft auch im Microsoft Edge.
      [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

      Kommentar

      Lädt...
      X