Image zwischen 2 Punkten bewegen

  • Wenn ich ein Produkt in einen Warenkorb lege, möchte ich eine Animation, wo ein kleines Image sich von der Position des Mausclicks zur Position des Warenkorbs bewegt. Ich hab das schon mal in irgendeinem Shop gesehen. Weiß jemand, wie man das verwirklichen könnte?

  • Hallo legraf.


    Also wenn ich mal davon ausgehe, dass der Wahrenkorb eine absolute Positionierung auf der Der Seite besitzt, und der anzuklickende Artikel sich auf einem Scrollbaren Bereich mit variabler Höhe befindet würde ich das so angehen:


    1. Zuerst würde ich eine CSS-Klasse vorbereiten, die eine transition zum Warenkorb initialisiert.

    Indem sie das Bild, absolut über dem Warenkorb

    positioniert.


    2. Ich würde die Position des angeklickten Artikels relativ zum Fenster (nicht relativ zu der Seite!) berechnen.


    3. An dieser Stelle das gewünschte Blid mit position: absolute und den gleichen Eigenschaften wie die CSS Klasse der Endposition (s1.) zB top und left einfügen.


    4. Nach einem Renderframe (zB mit requestAnimatinFrame) würde ich die CSS Klasse aus 1. Setzen und die zuvor gesetzten inline Eigenschaften wieder löschen.


    Dadurch fliegt dann das Bild an den gewünschten Platz.


    Wenn das Bild einem Bogen beschreiben soll, kann man das nicht mit transition machen, aber sonst wäre es der selbe Ablauf.


    Ich hoffe das hilft dir ein wenig.



    Grüße

    Andreas

  • Ich habe das erst falsch verstanden. In dem fall, bringt drop und drag nicht viel.

    Falls du jQuery nutzt könntest du animate() benutzen , dann brauchst du eigentlich nur noch das Ziel auslesen und schon gehts

    (Deadlink entfernt von Moderation)

    2 Mal editiert, zuletzt von Felix () aus folgendem Grund: Link auf nicht mehr existierende Seite - Error404

  • Hallo legraf,


    ich habe mal einen Pen erstellt wie ich mir das vorstelle:

    Die Umsetzung ist mit Vanilla JS erfolgt, warscheinlich kann man mit JQuery ein wenig Zeilen sparen, aber eigentlich kann Vanilla mittlerweile viele Dinge, für die man früher JQuery brauchte.

    https://codepen.io/Mr_Beer/pen/yLaJKpG


    ich habe es genauso umgesetzt, wie ich es es oben beschrieben hatte, nur habe ich mich bei der position für fixed anstatt für absolute entschieden.

    Wenn du Fragen zum Code hast, frag' einfach :)


    Ich danke dir für die Frage. Es war eine nette kleine Aufgabe.



    Grüße

    Andreas

  • Hallo legraf,

    mir würde es interessieren, ob es für dich geklappt hat. Meiner Meinung nach wäre es interessant, eine Antwort zu sehen, damit kann weiß ich für die Zukunft, wenn ich so ein ähnliches Problem habe, was ich dagegen machen kann. Ich hoffe ihr habt außerdem schöne Feiertage.

    Liebe Grüße

    Alex

  • Hallo Leute,

    danke für eure Antworten, besonderen Dank an AndreasB! Ich hab mir das Beispiel kurz angesehen und muß sagen, dass es genau das ist, was ich mir vorgestellt hatte! Ich war nur die 2 Tage etwas gestresst, sodaß ich nicht in die Usergroup kam, werde das Beispiel übers Wochenende versuchen in meine Page einzubauen.


    Frage an AndreasB: Ich kenne Vanilla JS nicht, verwende aber jQuery 3.x auf der gleichen Seite. Gibt es Probleme wenn beide verwendet werden, oder sollte man es mit jQuery lösen?


    LG

  • Ich kenne Vanilla JS nicht, verwende aber jQuery 3.x auf der gleichen Seite. Gibt es Probleme wenn beide verwendet werden, oder sollte man es mit jQuery lösen?

    Was heißt den du verwendest 3 x Jquery ?

    Optimal wäre es wenn man Jquery 1 mal einbinden und es sollte alles laufen.Wenn du Jquery 3 mal eingebunden hast solltest du versuchen ob du die 2 davon löschen kannst ( Versions abhängig ).


    Das Script von AndreasB könnte man in Jquery schreiben , ist aber unnötig.

    Vanilla Javascript läuft eigentlich in jeden Browser.

  • Ich kenne Vanilla JS nicht, […]

    Dann informier dich was das ist. Tipp: das ist ganz einfach normales Javascript ohne irgendein Framework - womit sich auch die Frage erübrigt ob Vanilla JS und jQuery zusammen eingesetzt werden können.

    Was heißt den du verwendest 3 x Jquery ?

    Das heißt dass du den entscheidenden Punkt übersehen hast: zwischen »3« und »x« steht ist noch ein Punkt - womit nicht jQuery dreimal eingesetzt wird sondern eine 3er-Version davon …

  • AndreasB eine Frage hätte ich noch:

    Wie würde eine Funktion "animateItemFromCart" in deinem Code aussehen, bei der sich das Bild aus dem Warenkorb größer werdend wieder zurückbewegt, wenn ich einen Schalter habe, mit dem er das Produkt wieder aus dem Warenkorb entfernen kann?


    Ich habe dem Bild namlich zusätzlich ein Font Awesome Icon spendiert, welches ich mit jedem Click zwischen fa-plus-circle und fa-minus-circle wechsle. Wird beim Status Plus geclickt, landet das Produkt im Warenkorb, wird bei Minus geklickt, kommt es aus dem Warenkorb wieder heraus. Den Warenkorb verwalte ich per Ajax serverseitig in PHP.

  • Hallo lagraf.

    Wie würde eine Funktion "animateItemFromCart" in deinem Code aussehen [...]?

    Im Gunde genau wie die animateItemToCart. In diesem Fall hat allerdings das Ziel eine dynamische Position und nicht der Startpunkt.

    Ich würde das so in etwa umsetzen:


    1. Einen neuen Click-Listener registrieren, für den "Minus" Button. (Ich weiß, dass du für Plus und Minus den selben Button geplat hast, da würde ich dir aber raten, das doch mit zwei verschiedenen Buttons zu machen.)


    2. Wenn der "Minus" Button geklickt wird, würde ich dynamisch an der Stelle des Einkaufkorbes ein neues Element erzeugen (da der Einkaufskorb eine statische Position hat, kannst du das auch super mit der store-item--in-cart Klasse positionieren.)


    3. Sobald das Element das erste Mal gerendert wurde (dafür musst du den Mutation Observer anpassen) würde ich, wie vorher ein par ms warten.


    4. Zum Schluss würde ich dynamisch die Position und Größe des angeklickten Item-Bildes berechnen (Der Code dafür existiert im Grunde schon) und das Element dann zu dieser Position bewegen. Da die Klasse store-item schon ein transition hat, sollte das ganz automatisch gehen

    Hier gibt es einen Unterschied zu der hin-Animation: Da hier zuerst eine Klasse und dann der inline-Style gesetzt wird, ist es nicht nötig, wie vorher den alten Style zu löschen. (Der Spezifität sei Dank)


    5. Sobald, die Transition beendet ist, können wir das erzeuge Item wieder löschen.



    Grüße

    Andreas

  • Hallo Andreas,

    ich verwende 2 Icons, die ich in der linken oberen Ecke im Bild nach jedem Click immer mittels JS austausche. Welcher Button geklickt wurde (oder auch das ganze Bild), ergibt sich daraus, welches Icon grad "aktiv" ist. Im Grunde ist das + bzw. - Icon mehr dazu da, um den User zu informieren, was er schon in den Warenkorb gelegt hat.


    Ich bin kein JS Programmierer, verwende normalerweise Windows Entwicklungsumgebungen und PHP fürs www. Bin gespannt, ob ich das hinbekomme!:)

  • Hallo lagraf,

    ich verwende 2 Icons, die ich in der linken oberen Ecke im Bild nach jedem Click immer mittels JS austausche

    Ich verstehe.

    Wenn das so ist würde ich dir empfehlen, den Status des Items (ob das Item im Einkaufskorb ist oder nicht) im Element selber zu speichern. zB als data Attribute wie data-is-in-cart="true", das Attribut beim Click auf das Item abzufragen und danach zu entscheiden, ob das Item zum Einkaufskorb oder wieder hinaus animiert werden soll.


    Ich wünsche dir viel Spaß beim Basteln.


    Übrigens: Wenn du es dir etwas leichter machen möchtest, könntest du auch den Mutation Observer weglassen, die Timeout-Zeit ein wenig erhöhen und den Timeout direkt nach dem Erzeugen des Elementes starten.
    Dabei könnte es jedoch passieren, dass auf langsamen Systemen das Element noch nicht da ist, wenn die Animation gestartet wird und das Element dann gleich im Einkaufskorb landet ohne Transition.



    Grüße

    Andreas

  • Über eine Verzweigung in onItemClick erscheint bei Status - inzwischen des kleine Bild beim Cart, allerdings sind Größe und Koordinaten hardcode und nicht aus storeItemInCart.


    In MutationObserver habe ich am Ende eine Verzweigung abhängig vom Status des Icons: animateItemToCart oder animateItemFromCart.


    Wie starte ich aber in animateItemFromCart die rückwärts laufende Animation?

  • Ich hätte angenommen, dass ich dem Clone dieses Ziel durch


    item.classList.add(CSS_CLASSES.itemImage);


    mitgebe, aber das bewirkt nichts, die Animation wird nicht gestartet und kommt daher auch zu keinem Ende.

  • Die Klasse item__image hat gar keinen CSS Selector, und daher auch keine Regeln, die auf ein Element mit dieser Klasse angewandt werden können.


    Wie ich in Punkt 4 geschrieben habe, musst du die Zielwerte dynamisch auslesen (Das machen wir schonmal bei der in-cart-animation) und über JS auf das erstelle Element setzen. Dann beginnt die Transition.

  • in animateItemFromCart fehlt mir aber der Event vom Mausclick, daher kann ich mit


    const currentItem = evt.currentTarget;

    const currentImage = currentItem.querySelector(SELECTORS.itemImage);


    das Image nicht ermitteln. Wie komme ich zu dem Image und damit zu den Koordinaten?

  • Ich habe mir das Image in onItemClick in einer globalen Variable gespeichert und lade in animateItemFromCart die Style damit. Jetzt fährt die Animation wieder zurück!


    Schönheitsfehler: Ich lade die Koordinaten für clone.style.left/top/width/height hardcoded, wie kann ich sie aus der CSS Klasse .store-item--in-cart befüllen?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!