Verschieben eines Elements entlang einem gekrümmten Pfad als Benutzer scrollt

Ich versuche, etwas zu einer Seite, wo eine Rakete folgt einem vorgegebenen Weg, die Schlangen, bis die Seite (die Seite wird geladen unten) als der Benutzer scrollt.

Kann ich animieren, ein element entlang eines Pfades mit so etwas wie jQuery.Pfad und mit SVG ' s animateMotion, aber ich kann einfach nicht herausfinden, eine Lösung, wo das element bewegen würde, auf diesem Weg, wie der Benutzer scrollt.

jQuery Scroll Path ist nicht ganz das, was ich Suche, wie es sich bewegt, die Elemente in der Mitte der Seite.

Ich gesehen habe, auf der TEDxGUC website, die Sie bewegen Sie den Apfel entlang einem gekrümmten Pfad, wie Sie nach unten scrollen. Ich kann sehen, Sie sind mit Raphael.js und eine "animation entlang eines Pfades' Erweiterung, aber ich kann immer noch nicht meinem Kopf herum wie Sie haben es tatsächlich erreicht – ich bin mir nicht ganz JS-ninja nur noch.

Alle Zeiger in die richtige Richtung wäre wirklich dankbar!

BEARBEITEN

Für jemand immer noch daran interessiert, diese Art der Sache, stolperte ich über Skrollr Weg, die ziemlich genau das tut, was ich suchte: Beispiel

  • Jedes Wort auf der Skrollr-Pfad-plugin? Es gibt absolut keine Unterlagen oder Informationen jeglicher Art andere als die tatsächliche plugin und die demo-Seite zur Verfügung gestellt. Einfach Fragen, wenn du mehr Informationen über Sie, die Sie teilen könnten. Dank
  • Ich würde gerne sehen, wie jeder code, den Sie haben können, arbeiten mit Skrollr Weg. Es ist genau das, was ich brauche, aber ich habe eine wirklich harte Zeit mit diesem plugin.
  • Ich fürchte, ich habe nicht die Möglichkeit zu spielen, um mit ihm noch. Haben Sie überprüft, die wichtigsten Skrollr - Bibliothek? Wenn Sie die Dokumentation zu Lesen und dann schauen Sie sich die Quelle für das Skrollr Path-Beispiel, Sie könnten in der Lage sein, um die Grundlagen. Leider kann ich nicht mehr helfen!
  • Ich habe nicht zu viel Zeit, check it out, check ich in der Haupt-Bibliothek Skrollr. Danke. Aus welchem Grund auch immer, ich kann nicht alles richtig Rendern mit der Skrollr-Pfad-plugin, auch wenn ich kopieren Sie die demo-Quelle genau. Ich kann nicht herausfinden, was falsch läuft. Ich werde check it out. Danke!
InformationsquelleAutor Peter Larkin | 2013-02-14
  1. 10

    Ich bin der Entwickler des http://www.tedxguc.com website.

    Ich denke du bist schon auf dem richtigen Weg (Wortspiel beabsichtigt) mit Bezug auf wie ich die animation Arbeit mit dem scrollen. Ich habe einfach konzeptualisiert die animation als wenn die scroll-Leiste ist eine Suchleiste in einem video-player.

    Also habe ich die Höhe der Seite, um die Länge meiner animation, so dass jeder 1 pixel meinem element bewegt, entsprechen 1 ms in der animation, als wenn ich es war, der sich in einer timeline.

    Sehen Sie die animation mit set-up code am Ende der homepage.js Datei.

    In makeAnim() finden Sie eine Menge von code, der wie folgt aussieht

    setAnim(obj.apple,{0:{along:0}, 1000:{along:1}}, start+3200, 1000);

    Was diese im Grunde tut, ist: richten Sie den Apfel, so dass es bewegt sich von 0 (Beginn des Weges) bis 1 (Ende Weg) und es wird innerhalb von 1000px zu Blättern
    ausgehend von der "start" - animation + einem offset von 3200 Pixel.

    Mich betrogen und fixiert den code ein wenig, um es einfacher zu verstehen.

    Hier ein jsfiddle des früheren Konzept in Entwicklung und ich hoffe, mein Kommentar hat geholfen.

    • Vielen Dank – das ist wirklich nützlich. Ich habe noch keine Gelegenheit hatten, Einblicke in Ihre Geige, aber ich werde berichten, wenn ich es tun!
    • Der Umfang des Projekts an dem ich arbeite war leicht verändert und ich am Ende mit CSS Animationen zu replizieren, die Raketen-Bewegung (man kann unter hier). Aber du hast Antwort auf meine ursprüngliche Frage, damit habe ich markiert es als richtig – danke nochmal für Eure Hilfe!
    InformationsquelleAutor Amr Draz
  2. 0

    Erstellen Sie Ihre Formel, die dauert in der y-Wert und x berechnet, aber hier ist was ich kam mit...

    http://codepen.io/anon/pen/zCuEb

    HTML

    <div id="oh" style="background-color:red;height:100px;width:100px;position:fixed"></div>
<div style="height:25000px;width:20px;background-color:#000033">&nbsp;</div>

    JS

    var $w = $(window);
var $d = $('#oh');
$w.scroll(function(){
  $d.css('left',formula400())
});
function formula400(){
  return Math.sin($w.scrollTop()/100)*100
}
    • Danke, das ist wirklich cool! Wenn ich arbeiten kann, die richtige Formel, die ich brauche, könnte dies eine brauchbare Lösung.
    • Ich realisierte in meinen ursprünglichen Plänen, die Rakete tatsächlich waagerecht an Zeiten, als es fast ein Quadrat gewundene Pfad. Ich glaube nicht, dass dies möglich ist, mit Ihrer Methode, wie das vertikale scrollen würde im wesentlichen zu stoppen. Ich habe zusammen eine Lösung, die mit festen Positionierung für die Rakete und bewegen es Links und rechts an bestimmten Punkten, aber dieser ist nicht perfekt. Ich dachte an eine Möglichkeit, ich könnte in der Lage sein, es zu tun mit Skrollr.js – ich melde mich dann zurück!
    InformationsquelleAutor Shanimal
Schreibe einen Kommentar