Come creare un pannello scorrevole verticale usando jQuery e CSS3

Di:
tramite: O2O
Difficoltà: media
15

Introduzione

Spesso è capitato di restare colpiti dalle animazioni grafiche di qualche notizia letta in rete o da una presentazione che ci è stata sottoposta e ci siamo chiesti quale particolare attitudine o conoscenza è richiesta per creare questi particolari effetti visivi. Nella seguente guida, passo dopo passo, vedremo proprio come fare per riuscire a creare un pannello scorrevole verticale usando jQuery e CSS3. Seguite pertanto attentamente i consigli e le spiegazioni indicate.

25

Informazioni generali

L'utilizzo contemporaneo di codice CSS e JQuery ci dà delle potenzialità di effetti di grafica praticamente infinite e che possono essere applicati a qualsiasi pagina web. Ma cos'è il codice CSS? Si tratta di un linguaggio che serve a stabilire colore, ombreggiatura, dimensioni ed altre caratteristiche visive delle pagine web rendendole più belle. Vengono definiti "fogli di stile". In ogni caso, in base al browser utilizzato per visualizzare la pagina in formato html, d'impatto avremo di fronte un puzzle perché è difficile standardizzare lo stile. Ecco perché si utilizza JQuery.

35

Procedimento

Ovviamente non intendiamo qui entrare nei dettagli di programmazione ma fornire semplicemente gli elementi utili a terminare il nostro progetto. Il consiglio utile è quello di scaricare un editor chiamato Scite. Potete usare anche notepad se preferite. Il passo successivo è quello di far confluire tutti i file in una cartella che potremmo denominare a nostro piacimento e usando Scite, si parte con il creare una pagina HTML di base che potrete chiamare Pannello. Html. A questo punto, creiamo nello stesso modo il secondo file nel quale inseriremo lo stile, che chiamerete style. Css; ed infine il terzo file, che ovviamente si chiamerà menu. Js.

Continua la lettura
45

Fase finale e risultato

Al fine di raggiungere l'effetto desiderato finale, bisogna fare attenzione ad inserire i collegamenti ai due file: menu. Js e style. Css nel punto giusto del codice. Questi link vanno sempre inseriti all'interno del tag. Per portare a termine il progetto non resta che scaricare la libreria Jquery usata, un file chiamato jquery-1.8.3. Js, ed inserire il link anche a questa, nel codice HTML affinché funzioni tutto. Fate attenzione ad inserire questo link sempre prima di quello al vostro file menu. Js. Se avete scritto correttamente il codice, vi basta aprire il file pannello. Html nel vostro browser preferito per vedere l'effetto ottenuto. Seguendo attentamente le indicazioni fornite, sarete così in grado di creare un pannello scorrevole.

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Software

Come realizzare animazioni in JQuery responsive

JQuery è una libreria javascript che consente ai programmatori e ai designer di produrre pagine e contenuti su internet attingendo alle più moderne funzioni interattive. Ma la principale caratteristica di JQuery è rappresentata dal suo linguaggio semplice,...
Software

Realizzare animazioni in JQuery: programmi OpenSource

Per tutti coloro che sono appassionati di informatica e tecnologia in generale, la creazione di programmi e applicazioni è sempre un argomento interessante. Creare qualcosa dal nulla, funzionante, magari anche apparentemente inutile, ma comunque creato...
Software

Accedere al pannello segreto di Google Chrome

Google Chrome è uno dei broswer più diffusi sui nostri computer. Attualmente è il più utilizzato al mondo, per la facilità d'uso, per la sua interfaccia davvero intuitiva, e per la velocità di navigazione. In più permette agli utenti di creare...
Software

Come creare un pattern con Illustrator

Riusciere a rendere le proprie illustrazioni o flyers più accattivanti ed elaborati è sicuramente possibile grazie all'utilizzo dei pattern. I pattern sono motivi geometrici ripetuti su un piano che costituiscono il riempimento di oggetti o tracce....
Software

Come realizzare un template per Wordpress con Dreamweaver

Il mondo del web è talmente intricato che è possibile accedervi soltanto conoscendo tutti gli strumenti più importanti. Attualmente si hanno diversi mezzi famosi per risultare visibili online, come Wordpress. Grazie a quest'ultimo possiamo creare uno...
Software

Come utilizzare Firebug

Qualsiasi sviluppatore di pagine web desidera possedere uno strumento che gli consenta di analizzare il rendering di esse sul browser (andando a selezionare un loro singolo elemento), effettuare il debug per gli scripts in JavaScript ed esaminare la struttura...
Software

Come ruotare una pagina di Word

Word è senza dubbio uno dei programmi maggiormente utilizzati per la scrittura tramite pc. È un software davvero molto utile, utilizzato per la scuola, il lavoro o per scrivere qualsiasi cosa: appunti, note, brevi testi. Permette di inserire immagini,...
Software

Guida al menu di Photoshop CS6

"Adobe Photoshop CS6" è una delle ultime versioni (prima del nuovo "Adobe Photoshop CC") del pratico editor di foto che molti graphic designer utilizzano per lavoro. Questo software ha apportato modifiche piuttosto funzionali a livello di interfaccia...
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer »”.