jQuery animate scroll

Nie jestem pewien, jak wywołać ten efekt, ale czy ktoś może wskazać mi bibliotekę, która pomogłaby mi uzyskać ten sam efekt co ta strona?jQuery animate scroll

http://www.makr.com

Zasadniczo, to porusza się wiersz do góry strony na myszy. Fragment kodu, najlepiej jQuery, może pomóc, jeśli nie ma dla niego takiej specjalistycznej biblioteki efektów.

Nie jestem pewien, czy muszę rozpocząć inny temat, ale czy ktoś może mi pomóc z małym fragmentem jQuery, aby osiągnąć cały efekt interfejsu użytkownika Makr?

Źródło

2011-11-08 Marvzz

Nie jestem pewien, czy muszę rozpocząć kolejny wątek, ale może ktoś mi pomóc z małym jQuery fragmencie osiągnąć cały efekt UI Makr ? – Marvzz

Dałem ci coś dobrego na początek. Po kliknięciu na element, odsuń offset od tego elementu i przewiń do offsetu z animacją jQuery. – Mathieu

Tak, mam je, mogłem je przewijać, ale mam problemy z kolejną częścią animacji slideDown. nie mogę w pełni osiągnąć ich czasu tak jak Makr. – Marvzz

192

Możesz animować przewijanie strony za pomocą jQuery.

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

Zobacz na stronie: http://papermashup.com/jquery-page-scrolling/

Źródło

2011-11-08 08:09:51 Mathieu

Musiałem tylko użyć '# (" body "). animate (...);' i działało na firefox , chrome i np. Czy istnieje szczególny przypadek dołączania animacji do obiektu DOM 'html'? – Daniel

'$ (". Middle"). Offset(). Top'-part to uzyskanie przesunięcia tego obiektu (class, id, ...), aby strona znała jaką wysokość przewinąć. Jeśli chcesz przewinąć do określonego elementu div, który znajduje się w połowie strony, może to być przydatne. – Mathieu

+14

'$ (" html, body ') 'jest dla 8 kompatybilności. –

istnieje plugin jquery do tego. Przewija dokument do określonego elementu, dzięki czemu będzie idealnie widoczny w środku rzutni. Obsługuje także animacje, dzięki czemu efekt przewijania będzie wyglądał bardzo gładko. Sprawdź AnimatedScroll.js.

Źródło

2013-08-12 21:32:03

Unikałbym używania wtyczki takiej jak ta, kiedy prawdziwa odpowiedź jest natywnie obsługiwana. '$ ('html, body'). animate ({scrollTop: x}, t);' jest w porządku, nie ma potrzeby dodawania niepotrzebnej wtyczki do zakładki sieci twojej strony. – ChaseMoskal

Masz całkowitą rację, z wyjątkiem tego, że ta wtyczka może przewijać do dowolnego elementu dokumentu, tak aby znajdował się dokładnie w środku okna okna. –

Problem polega na tym, że nadal jest to naprawdę łatwe bez żadnych wtyczek. To tylko kwestia przewijania do '($ e.offset(). Top + ($ e.height()/2)) - ($ (window) .height()/2)', lub w języku angielskim, '" elementCenter minus halfViewportHeight "'. Dobrze? – ChaseMoskal

Możesz także wypróbować prostą wtyczkę jquery (AnimateScroll) opracowaną przeze mnie, która została doceniona przez wielu!

Źródło

2013-09-06 05:06:38

Niesamowita wtyczka - nie można się doczekać, aby z niej skorzystać! –

po prostu użyć:

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

Źródło

2015-08-19 17:00:05

czy możesz wyjaśnić, co próbujesz zrobić z "- = -"?czy próbujesz wpisać numer, czy coś? – user151496

@ user151496 Spójrz na dokumentację jQuery http://api.jquery.com/animate/ pod akapitem, który obecnie się zaczyna "Animowane właściwości mogą być względne." Podobnie jak w JS, możesz powiedzieć 'myVar + = 10', aby dodać dziesięć do istniejącej wartości, ten fragment w zasadzie wykorzystuje niestandardowe parsowanie jQuery do osiągnięcia podobnego celu:' scrollTop - = -yourScrollValue'. Nie mogę powiedzieć z całą pewnością, dlaczego OP wybrał to na prostsze '{scrollTop: '+ =' + value}". – natevw

@ user151496 pierwsze "-" to wartość malejąca, a drugie "-", jeśli wartość spotkania ujemna, stają się dodatnie i przeciwne. :) –

Odpowiedz

Powiązane problemy