2012-02-04 12 views
37

Recentemente mi sono imbattuto in questo sito Web http://www.ascensionlatorre.com/home e adoro il modo in cui funziona lo scorrimento della rotellina del mouse: l'andamento è molto scorrevole.Effetto di attenuazione scorrevole con rotellina del mouse

Ho cercato Google ma non riesco a trovare nulla di simile.

Qualcuno ha qualche suggerimento su come replicare questo effetto con jQuery?

+1

C'è un sacco di cose in corso con quello scorrimento, con la navigazione del menu in base allo scorrimento, sezioni che appaiono/scompaiono in tempi diversi ecc. Quindi penso che sia di gran lunga completo per una domanda SO.Fai un tentativo e torna per porre domande specifiche sulle cose su cui ti trovi bloccato lungo la strada. –

+7

Perché i pollici in giù? Ho fatto una domanda specifica, mi chiedevo come funziona l'azionamento della rotellina del mouse. Sono qui per imparare, non per rubare – idbranding

+0

Il downvote è perché penso che la domanda sia troppo ampia. Vi è una serie di componenti interessati a rendere scorrevole lo scorrimento, con contenuti sovrapposti che scivolano via mentre si scorre, barra di scorrimento personalizzata, transizione fluida e così via. Descrivere come fare tutto ciò con jQuery è completo per una singola domanda SO. –

risposta

6

Ok amico, proverò ad aiutare su una richiesta con del materiale. Ho trovato questo tutorial per me stesso, spero che sia utile anche per te. Ciò costituisce la base del sito a cui ti riferisci: http://johnpolacek.github.com/scrollorama/

http://johnpolacek.github.com/scrolldeck.js/

+0

Prima di tutto, grazie per la risposta. Già trovato questo sito, l'animazione dei div non è il problema. la cosa che amo è l'effetto rilassante usando la rotellina del mouse. Qualche suggerimento per quello? – idbranding

+0

sì, lo so che ad esempio a, non supporta _mousewheel easing_ – idbranding

+0

Sarebbe piacerebbe sapere se si fosse riusciti a trovare una soluzione? Anch'io sto cercando qualcosa di simile e sto avendo problemi a trovare soluzioni tramite Google. – DBUK

5

Ho la stessa domanda che hai chiesto. Visito il sito web che hai fornito e scopro la risposta!

Hanno usato jquery.mousewheel.js, ed è possibile utilizzare la console di Chrome per trovare lo script. Cerca semplicemente "rotellina del mouse" e puoi trovare una funzione chiamata "scorrimento". Il motivo dello scorrimento fluido è che non utilizzavano animazioni di jquery, ma l'uso di javascript setInternal per lo rende. Puoi imparare dal codice.

Credo che tu possa farcela.

23

Recentemente mi sono imbattuto in questo problema e non ho trovato molto supporto per questo, quindi ho rapidamente dimenticato il problema. Alcuni mesi più tardi ho visto un esempio migliore dello scorrimento fluido, così sono entrato e ho scavato intorno ai file JavaScript che stavano usando e ho scoperto che stavano usando un file jQuery chiamato NiceScroll.

Credo che questo sia quello che entrambi stavamo cercando: semplice scorrimento fluido per div, iframe o altro, proprio come lo scorrimento iOS.

http://areaaperta.com/nicescroll/

+5

Sono solo 10 righe di codice, perché qualcuno include centinaia di righe di codice? qui è http://jsfiddle.net/7ZVb7/1383/ –

+2

@CameronA - il vostro esempio jsfiddle attualmente scorre solo verso il basso e non eseguire il backup. Inoltre sono sicuro che ci sono file js migliori là fuori che potrebbero gestire lo scorrimento piacevole con meno righe di codice, ma questo post ha oggi un anno. – Dylan

+0

il collegamento modificato da qualcuno e ha il problema è quello corretto;) http://jsfiddle.net/7ZVb7/1383/ –

8

http://areaaperta.com/nicescroll/

che sicuramente lo script per controllare. Sebbene aggiunga una barra di scorrimento personalizzata, è una buona idea che puoi modificare tramite css.

EDIT Avevo una demo funzionante ma da allora l'ho rimosso a causa di modifiche di hosting e dominio, mi dispiace.

+0

Il collegamento non funziona "Errore durante la creazione di una connessione al database" –

2

Non mi sono immerso nel codice, ma sospetto che stiano utilizzando le transizioni CSS3.

transition: all 1s 

Sul vostro elemento (fornitore prefisso ovviamente), sarà appianare le animazioni da effetti di parallasse.

Sembra che abbiano sovrascritto il comportamento scrollWheel e che ogni battito entri nella pagina di un determinato importo. È così che mi avvicinerei a questo almeno.

Problemi correlati