jQuery animate scroll

Non so come chiamare l'effetto, ma qualcuno può indicarmi una libreria che mi aiuti a fare lo stesso effetto di questo sito web?jQuery animate scroll

http://www.makr.com

Fondamentalmente, si muove lungo la fila alla parte superiore della pagina al clic del mouse. Un frammento di codice, preferibilmente jQuery, può essere d'aiuto, se non esiste una tale libreria di effetti specializzata per questo.

Non sono sicuro di dover iniziare un altro argomento, ma qualcuno può aiutarmi con un piccolo frammento jQuery per ottenere l'effetto dell'interfaccia utente di Makr?

fonte

2011-11-08 Marvzz

Im non sicuro se ho bisogno di iniziare un altro argomento, ma qualcuno mi può aiutare con un piccolo frammento di jQuery per ottenere l'effetto complessivo dell'interfaccia utente Makr ? – Marvzz

Ti ho dato qualcosa di buono per iniziare. Quando fai clic su un elemento, ottieni l'offset da quell'elemento e scorri fino all'offset con jQuery animato. – Mathieu

sì, li ho presi, sono riuscito a farli scorrere, ma ho problemi con la prossima parte dell'animazione di slideDown. non riesco a realizzarne il timing come fa Makr. – Marvzz

192

È possibile animare lo scrolltop della pagina con jQuery.

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

vedere questo sito: http://papermashup.com/jquery-page-scrolling/

fonte

2011-11-08 08:09:51 Mathieu

Ho solo bisogno di usare '# (" body "). animate (...);' e ha funzionato per firefox , cromato, e cioè. Esiste un caso specifico anche per il collegamento dell'animazione all'oggetto DOM 'html'? – Daniel

Il '$ (". Middle"). Offset(). Top'-part serve per ottenere l'offset di quell'oggetto (classe, id, ...), in modo che la pagina sappia a quale altezza scorrere. Se vuoi scorrere verso un certo div che si trova a metà della pagina, questo può essere utile. – Mathieu

+14

'$ ('html, body')' è per ie8 compatibilità. –

C'è un plugin jQuery per questo. Scorre documento ad un elemento specifico, in modo che sia perfettamente nel bel mezzo della vista. Supporta anche gli allarmi di animazione in modo che l'effetto di scorrimento risultasse estremamente fluido. Controlla AnimatedScroll.js.

fonte

2013-08-12 21:32:03

Eviterei di usare un plugin come questo, quando la risposta reale è supportata nativamente. '$ ('html, body'). animate ({scrollTop: x}, t);' è molto corretto, non è necessario aggiungere un plug-in non necessario alla scheda di rete della pagina. – ChaseMoskal

Hai perfettamente ragione, tranne che questo plugin è in grado di scorrere fino a qualsiasi elemento del documento, in modo che sia esattamente nel mezzo della finestra di visualizzazione. –

Il problema è che è ancora molto semplice senza plugin. Si tratta solo di scorrere verso '($ e.offset(). Top + ($ e.height()/2)) - ($ (finestra) .height()/2)', o in inglese, '" elementCenter meno mezzoViewportHeight "'. Destra? – ChaseMoskal

Si può anche provare un semplice plugin jquery (AnimateScroll) sviluppato da me che è stato molto apprezzato da molti!

fonte

2013-09-06 05:06:38

Plugin impressionante - non vedo l'ora di usarlo! –

mi basta usare:

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

fonte

2015-08-19 17:00:05

puoi spiegare cosa stai cercando di fare con '- = -'?stai provando a digitare il numero o qualcosa del genere? – user151496

@ user151496 Dai un'occhiata alla documentazione di jQuery http://api.jquery.com/animate/ sotto il paragrafo che attualmente inizia "Le proprietà animate possono anche essere relative." Proprio come in JS puoi dire 'myVar + = 10' per aggiungere dieci a un valore esistente, questo frammento utilizza fondamentalmente l'analisi personalizzata di jQuery per ottenere un obiettivo simile:' scrollTop - = -yourScrollValue'. Non posso dire con certezza perché l'OP qui abbia scelto quello più semplice '{scrollTop: '+ =' + value}'. – natevw

@ user151496 il primo '-' è il valore di diminuzione e il secondo '-' se si incontrano valori negativi diventano positivi e opposti. :) –

jQuery animate scroll

risposta

Problemi correlati