jQuery animiert die Schriftrolle

73

Ich bin mir nicht sicher, wie ich den Effekt aufrufen soll, aber kann mich jemand auf eine Bibliothek verweisen, die mir hilft, den gleichen Effekt wie diese Website zu erzielen?

http://www.makr.com

Grundsätzlich wird die Zeile mit einem Mausklick nach oben an den oberen Rand der Seite verschoben. Ein Code-Snippet, vorzugsweise jQuery, kann helfen, wenn es keine solche spezialisierte Effektbibliothek dafür gibt.

Ich bin mir nicht sicher, ob ich ein anderes Thema beginnen muss, aber kann mir jemand mit einem kleinen jQuery-Snippet helfen, um den gesamten Effekt der Makr-Benutzeroberfläche zu erzielen?

jquery user-interface scroll effects Marvzz
quelle
Ich bin mir nicht sicher, ob ich ein anderes Thema beginnen muss, aber kann mir jemand mit einem kleinen jQuery-Snippet helfen, um den gesamten Effekt der Makr-Benutzeroberfläche zu erzielen?
Marvzz
Ich habe dir zuerst etwas Gutes gegeben. Wenn Sie auf ein Element klicken, erhalten Sie den Versatz von diesem Element und scrollen Sie mit jQuery animieren zum Versatz.
Mathieu
1
Ja, ich habe sie bekommen, ich konnte sie nach oben scrollen, aber ich habe Probleme mit dem nächsten Teil der Animation von slideDown. Ich kann sie nicht ganz so steuern wie Makr.
Marvzz
Sie können immer die Verzögerungsfunktion: .delay (1000) verwenden, um die Funktion um 1 Sekunde zu verzögern. api.jquery.com/delay Oder setzen Sie den slideDown in der vollständigen Funktion
Mathieu

Antworten:

213

Sie können das Bildlauffeld der Seite mit jQuery animieren.

$('html, body').animate({
    scrollTop: $(".middle").offset().top
 }, 2000);

Siehe diese Site: http://papermashup.com/jquery-page-scrolling/

Mathieu
quelle
4
Ich brauchte nur zu verwenden #("body").animate(...);und es funktionierte für Firefox, Chrom und dh. Gibt es einen speziellen Fall, um die Animation auch an das htmlDOM-Objekt anzuhängen?
Daniel
2
Der '$ (". Middle"). Offset (). Top'-Teil dient zum Abrufen des Offsets dieses Objekts (Klasse, ID, ...), sodass die Seite weiß, zu welcher Höhe gescrollt werden muss. Wenn Sie zu einem bestimmten Div scrollen möchten, der sich auf halber Höhe der Seite befindet, kann dies nützlich sein.
Mathieu
18
$('html, body')ist für ie8 Kompatibilität.
Szymon Wygnański
2
$ ('html, body') ist auch für Safari
honk31
Wie genau erreicht jQuery einen reibungslosen Bildlauf?
Oldboy
5

Sie können diesem einfachen jQuery-Plugin ( AnimateScroll ) einen Strudel geben. Es ist recht einfach zu bedienen.

1. Scrollen Sie zum Anfang der Seite:

$('body').animatescroll();

2. Scrollen Sie zu einem Element mit der ID section-1:

$('#section-1').animatescroll({easing:'easeInOutBack'});

Haftungsausschluss: Ich bin der Autor dieses Plugins.

Ram Patra
quelle
1

Ich benutze nur:

$('body').animate({ 'scrollTop': '-=-'+<yourValueScroll>+'px' }, 2000);
Erweitern Sie das Snippet

Ngô Đức Tuấn
quelle
1
Kannst du erklären, was du mit dem '- = -' machen willst? Versuchen Sie, die Nummer oder etwas zu tippen?
user151496
@ user151496 Schauen Sie sich jQuerys Dokumentation api.jquery.com/animate unter dem Absatz an, der derzeit beginnt: "Animierte Eigenschaften können auch relativ sein." Genau wie in JS können Sie sagen myVar += 10, dass einem vorhandenen Wert zehn hinzugefügt werden sollen. Bei diesem Snippet wird im Wesentlichen die benutzerdefinierte Analyse von jQuery verwendet, um ein ähnliches Ziel zu erreichen : scrollTop -= -yourScrollValue. Ich kann nicht sicher sagen, warum das OP hier das einfachere gewählt hat {scrollTop: '+= '+value}.
Natevw
@ user151496 Das erste '-' ist der Abnahmewert und das zweite '-', wenn der Wert negativ ist, werden sie positiv und entgegengesetzt. :)
Ngô Đức Tuấn
Ich verstehe, was - = und - tut. Ich weiß nur nicht, warum er nicht stattdessen + = verwenden würde: S
user151496
@ user151496 wenn benutze + = vielleicht für den Fall, dass die Bildlauf nach unten statt nach oben geht, was er will. :)
Ngô Đức Tuấn
1 
var page_url = windws.location.href;
var page_id = page_url.substring(page_url.lastIndexOf("#") + 1);
if (page_id == "") {
    $("html, body").animate({
        scrollTop: $("#scroll-" + page_id).offset().top
    }, 2000)
} else if (page_id == "") {
    $("html, body").animate({
        scrollTop: $("#scroll-" + page_id).offset().top
    }, 2000)
}

});

Ragnarök
quelle
1
Nur-Code-Antworten werden nicht empfohlen. Bitte fügen Sie eine einfache Erklärung hinzu.
Jason
0

Hierfür gibt es ein JQuery-Plugin. Das Dokument wird zu einem bestimmten Element gescrollt, sodass es sich perfekt in der Mitte des Ansichtsfensters befindet. Es werden auch Animationserleichterungen unterstützt, sodass der Bildlaufeffekt sehr flüssig aussieht. Schauen Sie sich AnimatedScroll.js an .

Eugene Tiurin
quelle
4
Ich würde die Verwendung eines solchen Plugins vermeiden, wenn die eigentliche Antwort nativ unterstützt wird. $('html,body').animate({scrollTop:x},t);ist viel richtig, es ist nicht erforderlich, ein unnötiges Plugin zur Netzwerkregisterkarte Ihrer Seite hinzuzufügen.
ChaseMoskal
Sie haben absolut Recht, außer dass dieses Plugin zu jedem Dokumentelement scrollen kann, sodass es sich genau in der Mitte des Fensteransichtsfensters befindet.
Eugene Tiurin
1
Das Problem ist, dass das ohne Plugins immer noch sehr einfach ist. Es geht nur darum ($e.offset().top+($e.height()/2))-($(window).height()/2), zu oder auf Englisch zu scrollen "elementCenter minus halfViewportHeight". Richtig?
ChaseMoskal
Richtig, soweit es Ihnen nichts ausmacht, jedes Mal so viel Code zu schreiben, wenn Sie zu einem bestimmten Element scrollen müssen
Eugene Tiurin
1
@EugeneTiurin Sie können einfach eine benutzerdefinierte Funktion erstellen und das Element als Parameter verwenden.
Jarrod Mosen