MISTERWEBBY - WORDPRESS - CSS - JQUERY - TUTORIAL PHOTOSHOP - FREEBIES

jQuery Slider – Collection

in Collection, jquery by microtag il 2-09-11 - No Comments


jquery-slider-collection

Gli slider jQuery sono ottimi quando dobbiamo visualizzare contenuti web in modo accattivante. Di seguito una raccolta di tutorial, effetti e tecniche dei migliori script jQuery Slider.


  • Menu scorrimento effetto easing in stile Mac

    In questa tutorial verrà spiegato l'utilizzo di un semplice plugin jQuery (provvisto di demo e download), ideato per realizzare la presentazione delle categorie del vostro sito attraverso immagini. In questo modo potrete ottenere un magnifico menù di navigazione fruibile, che offre lo stesso effetto a scorrimento del sito della mac.

    DEMO    VAI AL SITO

  • Semplice e leggero Responsive Slideshow plugin

    ResponsiveSlides.js è un minuscolo plug-in jQuery in grado si creare un reattivo slideshow usando immagini dentro . Lavora con una vasta gamma di browser, incluse tutte le versioni IE a partire da IE6 e a seguire. Inoltre esso aggiunge il supporto css max-width per IE6, e per gli altri browser che originariamente non lo supportano. L'unico requisito è jQuery (dalla versione 1.4 in poi) e che tutte le immagini siano della stessa dimensione.

    VAI AL SITO

  • Slider news compatto ed elegante realizzato con jQuery

    Visualizzatore di notizie che permette di mostrare gli ultimi articoli pubblicati. La differenza fra altri slider di news è la dimensione ridotta che lo rende molto compatto. Lo slider scrolla in verticale, visualizzando sul lato destro le anteprime e lasciando sul lato sinistro la lista delle notizie.

    DEMO    VAI AL SITO


  • Slider jQuery effetto fisarmonica orizzontale

    Questo tutorial vi spiegherà come applicare una fisarmonica orizzontale al vostro sito web per creare una serie di slide. Le slide saranno cliccabili sulla fisarmonica. Va ricordato che il plugin lavora correttamente su Internet Explorer 8 e 9.

    DEMO    VAI AL SITO

  • jSiderNews, mostrare immagini con jQuery

    Basato sul Framework jQuery e sul plugin Easing, il plugin per gallerie jSiderNews consente di mostrare immagini o diversi tipi di contenuti e supporta anche la navigazione all'elemento precedente e successivo.

    DEMO    VAI AL SITO

  • Caratterizza i tuoi prodotti con jQuery

    Vi sarà capitato spesso di chiedervi, dovendo inserire qualche prodotto sul vostro sito web, come poter fare per dare una bella visuale di questi prodotti. Lo script di questo tutorial vi aiuterà fornendo un utile modo di presentazione dei vostri prodotti. Tramite un click il prodotto selezionato verrà ingrandito e affiancato da una didascalia; cliccando su un altro prodotto il primo tornerà in secondo piano e l'altro verrà ingrandito e così via.

    DEMO    VAI AL SITO

  • AyaSlider, un plugin jQuery con animazioni In-Slide

    AyaSlider è un plugin jQuery flessibile per menu slides dal semplice utilizzo e dalla facile impostazione. Lo slider può visualizzare un numero illimitato di item, ed ogni elemento HTML può esser usato nel menu. Ha solo un paio di opzioni da definire, come i valori easeIn/easeOut, la transizione tra le slides e il selettore prima/dopo. Ad ogni modo, ciascuna delle slide può comportarsi diversamente, e ciò con l'aiuto delle "opzioni per slide", le quali includono il punto iniziale di ogni animazione, l'opacità, la transizione, l'accelerazione e la durata da applicare. AyaSlider non introduce necessariamente alcuno stile, la visualizzazione ed il comportamento può esser personalizzato con CSS e le opzioni previste.

    VAI AL SITO

  • HTML5 SlideShow con Canvas e jQuery

    Il tutorial che vi presentiamo oggi vi guiderà nella creazione di una galleria di immagini utilizzando Canvas e jQuery. Per chi non lo sapesse Canvas e un nuovo elemento messo a disposizione da HTML5. Uno sguardo al tutorial è fortemente consigliato anche se il risultato finale non interessa in quanto fa comunque uso di uno nuova funzionalità di HTML5 che può sempre tornare utile.

    DEMO    VAI AL SITO

  • Menu ad icone e testo animato con jQuery

    Ancora una volta vogliamo proporvi un tutorial per JQuery che vi insegnerà a creare dei menù a scorrimento che reagiranno al passaggio del cursore con una semplice animazione ed un cambio di colore, che torneranno poi allo stato originale spostando nuovamente il mouse.

    DEMO    VAI AL SITO

  • Creare un slideshow panoramico con jQuery

    Se vi è qualcosa che sembra non andare mai fuori moda, è un buon slideshow con jQuery. I siti a forte impatto visuale si basano sull'abilità nel mostrare immagini automaticamente. Che sia il sito di un fotografo professionista o di uno zoo, gli slideshow compaiono così frequentemente sulla rete semplicemente perchè sono efficaci. Nel tutorial di oggi viene spiegato come trasformare uno slideshow classico grazie all'uso di un diverso tipo di transizioni animate tra le immagini.

    DEMO    VAI AL SITO

  • Creare un menu orizzontale tramite jQuery e Photoshop

    Tutorial per creare un menu orizzontale che al passaggio del mouse genera un effetto slide, facendo scendere una linguetta sul testo selezionato. Si parte con le istruzioni in pohotoshop per realizzare la parte grafica, per poi passare al codice jQuery per la realizzazione dell’animazione.

    DEMO    VAI AL SITO

  • Responsive Slideshow – RefineSlide

    RefineSlide è un semplicissimo plugin jQuery per visualizzare contenuti (con animazioni luminose) efficienti ed image-based. Le transizioni CSS sono utilizzate il più possibile, il che permette varie performance per i browser e le piattaforme. Al momento è probabilmente il meglio che si può avere su Safari, e diventerà molto più scorrevole anche per gli altri browser man mano che questi inizieranno a liberarsi delle transizioni CSS in favore della GPU.

    VAI AL SITO

  • jQuery Carousel plugin

    Rallegrate le vostre gallerie con questo carousel infinito che usa un attraente effetto per far rientrare le immagini. Questo plugin non solo è facile da implementare, ma sfrutta un comodo metodo chiamato .fakeFloat(), che dispone gli elementi basandosi sulla loro posizione all'interno dell'oggetto jQuery stesso. Usando questo metodo, il semplice processo di array si occupa dell'effetto carousel.

    DEMO    VAI AL SITO

  • Aggiungere la funzione Start/Stop ad uno Slider

    Il tutorial proposto vi spiegherà come applicare la funzione Start/Stop al vostro slider: una delle più richieste. Il tutorial non è per principianti ma rimane comunque un lavoro piuttosto semplice da svolgere. Vi verranno forniti il Markup dell'HTML, il codice CSS e quello Javascript jQuery. Infine verrà posta attenzione sulla funzione Auto-play e vi verrà spiegato come aggiungere un ulteriore panel al vostro slide

    DEMO    VAI AL SITO

  • Creare un jQuery Menu Slider

    Non serve che mi dilunghi sull'utilità di un menù ben realizzato e facilmente fruibile, quindi, vi rinvio direttamente al tutorial che segue, utile guida nella realizzazione di un menù a scorrimento facendo uso di JQuery.

    VAI AL SITO

  • Parallasse Slider con jQuery

    Ecco un tutorial per un brillante slider di immagini. Useremo il principio di parallasse (fenomeno per cui un oggetto sembra spostarsi rispetto allo sfondo se si cambia il punto di osservazione) per muovere diversi sfondi quando si scorre su una immagine così da creare una piacevole prospettiva. Questo darà una stupenda sensazione di profondità all'intero slider quando è in azione.

    DEMO    VAI AL SITO

  • Slideshow di immagini con effetto rotazione

    Come sfruttare jQuery e CSS3, in concomitanza con il plugin di rotazione jQuery, per creare una bellissima galleria slideshow. Potrete usarla per ravvivare le vostre pagine web, il catalogo dei vostri prodotti e altri progetti con l'ausilio di un po' di magia CSS3.

    DEMO    VAI AL SITO

  • Chop Slider Transitions Library

    Chop Slider è fornito con 152 effetti di transizione predefiniti e pronti subito all'uso. La Transitions library si compone di: 105 2D transitions (i più comuni, che lavorano perfettamente su tutti i ibrowser ad eccezione di IE), 37 3D transitions (in esclusiva per i browser più moderni. Attualmente lavorano bene solo su Chrome e Safari), 5 "no CSS" transitions (per i browser che non supportano CSS3 come IE9) e 5 "mobile" transitions (pensati per i broswer mobile).

    DEMO    VAI AL SITO

  • Scrolling sugli elementi con Sly, un jQuery plugin

    Sly è un plugin jQuery che offre scrolling sugli elementi (come immagini e gallerie di contenuti) con molte ed interessanti funzioni. All'interno di un predefinito contenitore di elementi, gli item possono essere sfogliati con l'aiuto di uno scroller o con le funzioni date in dotazione come “prossimo”, “prossima pagina”, “vai all'inizio”, “vai alla fine”, “prime 5 pagine” ecc. Sly supporta diverse modalità di navigazione che permettono di autoposizionare l'item successivo o di mantenerlo attivo sempre al centro. Ci sono supporti per un'infinità di scrolling e funziona sia orizzontalmente che verticalmente.

    VAI AL SITO


  • Slideshow fullscreen con HTML5 Audio e jQuery

    In questo tutorial apprenderete come creare uno slideshow a tutto schermo per una serie di foto di New York. Con HTML5 implementerete poi una canzone per ricreare l'ambiente newyorkese. Vi verranno forniti i codici HTML e i CSS e le librerie JavaScript.

    DEMO    VAI AL SITO

  • Creare un box-menu con effetto scorrimento in jQuery e CSS3

    In questo tutorial viene spiegata la creazione di un metodo di navigazione unico, usando riquadri scorrevoli. L'idea è quella di far scivolare una casella con gli elementi del menù e allo stesso tempo far comparire una piccola immagine. Verrà inoltre incluso un sottomenù con ulteriori link ad altri elementi di navigazione. Questo riquadro scivolerà a destra o sinistra, secondo quale elemento del menù si troverà sotto il puntatore del mouse.

    DEMO    VAI AL SITO

  • Galleria di immagini con jQuery

    JQuery permette di creare moltissimi effetti particolari con le proprie foto: basta un po' di dimestichezza per creare degli slideshow navigabili e molte altre particolarità, tra queste è molto interessante quella che permette la realizzazione di un “collage” in fotografia. Si tratta in parole semplici della possibilità di creare un set di foto navigabili liberamente con l'effetto collage applicato ad una foto in grande; una volta, infatti, cliccato sulla foto scelta questa apparirà nel box in grande ma le sue parti saranno le icone dove prima vi erano le altre foto; il plugin crea automaticamente questo effetto e nel giro di pochi secondi le icone andranno ad unirsi per formare l'immagine scelta al centro dello schermo. Un effetto davvero molto particolare ottenibile tra l'altro senza troppi sforzi data la semplicità del plugin.

    DEMO    VAI AL SITO

  • Galleria di immagini effetto slideshow a tutto schermo come sfondo tramite jQuery

    Come creare una galleria di immagini in slideshow a tutto schermo come sfondo, utilizzando la libreria jQuery tramite Supersizied, l'applicazione JavaScript di Build Internet. Il programma è sotto licenza GPL ed è scaricabile gratuitamente da internet, anche se gradita sarebbe una donazione. L'applicazione permette diversi tipi di transizione tra le immagini e si ha la possibilità di scegliere i tempi per il cambiamento dell'immagine e della velocità della transizione. Ultima delle funzionalità e novità dell'ultima versione è il supporto per Flickr.

    DEMO    VAI AL SITO

  • Slideshow di contenuti con jQuery

    Tutorial, basato su tecnologia JQuery, che permette di far ruotare i vostri contenuti con o senza funzione auto play. Uno slider semplice e ben fatto, per mostrare i vostri contenuti, dalle notizie ai post di un blog. Le immagini contengono anche il titolo e il sotto-titolo, e le miniature in basso permetteranno una migliore navigazione.

    DEMO    VAI AL SITO

  • Slideshow jquery iper-configurabile

    Volete rendere il vostro sito elegante inserendo un photoslide di tipo professionale? Grazie al seguente tutorial riuscirete a realizzare un accurato photoslide, completamente configurabile e personalizzabile. Potrete infatti deciderne la grandezza, l'ordine delle foto (che può avvenire per numero o tramite le thumbnails sotto lo slide), la velocità di animazione e l'intervallo tra le transizioni. Il codice per il loading è disponibile sia in html che in Xml.

    DEMO    VAI AL SITO

  • Flux Slider – Animazioni CSS3 basate sulle transizioni delle immagini

    Flux Slider, lavorando in coppia con il plugin jQuery Nivo Slider (composto solo da Javascript e CSS), produrrà delle transizioni di immagini senza dover ricorrere al classico timer Javascript. Questo è possibile dal momento che Flux Slider sfrutta le potenzialità e la semplicità maggiori delle animazioni CSS3. Flux Slider è compatibile con ogni tipo di browser che supporti le caratteristiche di transizione CSS3.

    DEMO    VAI AL SITO


  • Navigazione delle immagini del portfolio con jQuery

    Questo tutorial vi spiegherà come creare un template per la navigazione delle immagini del portfolio realizzato con jQuery. L'idea di base è di raggruppare alcuni oggetti portfolio e di navigare attraverso questi in 2D (orizzontalmente o verticalmente). Verranno forniti come di consueto il codice HTML, CSS e le librerie Javascript necessari a realizzare il template.

    DEMO    VAI AL SITO

  • Diapo Slideshow

    Di seguito è proposto un progetto open source realizzato con Jquery che permette di inserire in un sito web uno slideshow; lo stesso può contenere non solo delle semplici immagini ma anche dei video.

    DEMO    VAI AL SITO

  • Responsive FractionSlider, jQuery plugin per animare testo ed immagini.

    FractionSlider è un plugin jQuery per la creazione di slide di immagini e testi. Esso vi permette di animare più elementi in ogni slide: potete infatti impostare diversi metodi di animazione come la dissolvenza o la transizione che parte da una determinata direzione. Inoltre esistono specifiche opzioni per il ritardo o la cancellazione degli elementi. Attraverso HTML e CSS avrete un completo layout e controllo del design (ogni elemento html può essere animato). (every html-element can be animated).

    DEMO    VAI AL SITO

  • Slideshow circolare con jQuery

    Questo template mostrerà una discografia o alcuni album musicali con uno stile circolare che ruoterà l'album o la discografia quando si cliccherà su precedente o successivo. Cliccando invece sull'album si apriranno i dettagli dell'album che comprenderanno un lettore musicale (jPlayer) e una playlist delle canzoni. Ci sarà anche una descrizione che potrà essere fatta scorrere. Per creare il template avremo bisogno di jQuery Easign Plugin, jScrollPane, jQuery 2D Trasformation Plugin e jPlayer.

    DEMO    VAI AL SITO

  • Menu con immagine background a scorrimento

    Se vi piacciono i menù animati, che reagiscono dinamicamente al passaggio del cursore del mouse sugli elementi, allora questo tutorial fa sicuramente per voi. Utilizzando jQuery è infatti possibile realizzare dei menù il cui sfondo varia a seconda dell'elemento selezionato con un pregevole effetto di comparsa a scorrimento.

    DEMO    VAI AL SITO

  • Galleria di immagini jQuery effetto Polaroid

    In questo tutorial viene spiegato come creare una galleria di immagini in stile Polaroid. Avremo album che si espandono in set di anteprime a ventaglio che si apriranno al passaggio del mouse. L'immagine intera scivolerà dal basso verso l'alto quando una delle anteprime verrà cliccata. Nella visuale a immagine intera, l'utente potrà navigare tra le foto o semplicemente scegliere un'altra anteprima da visualizzare in primo piano. Per questa galleria, viene usato il plugin 2D Transform per implementare le animazioni.

    DEMO    VAI AL SITO

  • Creare un form multi-step con effetto slideshow

    Elegante, bello e funzionale modulo di inserimento dati a scorrimento che dà informazioni di validità all'utente dopo ogni step. Questo form fa risparmiare molto spazio ed è di facile accesso; funziona praticamente come uno slideshow, ma la differenza è che mostra i campi di un form da riempire invece di immagini.

    DEMO    VAI AL SITO

  • Gestire slide, gallery e slideshow con Minimit gallery

    Minimit Gallery è un plugin estremamente personalizzabile che permetterà di gestire slide, gallerie, slideshow e tutto ciò che ha più step al suo interno. La dinamica e l'ideazione dell'interfaccia sono interamente gestite dal plugin che si rivela adatto solo a programmatori esperti poiché necessita la codificazione di tutte le animazioni e dei CSS della galleria. Prima di utilizzare il plugin accertatevi di controllare la compatibilità col browser.

    DEMO    VAI AL SITO

  • Galleria immagini jQuery con effetto slider

    Questo tutorial tratterà della creazione di una geniale galleria con uno slider delle anteprime. L'idea è quella di avere un'area di anteprima espandibile che si apre quando viene scelto un particolare album. L'anteprima scivolerà verso la fine e tornerà alla prima immagine. L'utente potrà scorrere le anteprime usando i controlli dello slider. Quando una di queste verrà cliccata, si sposterà al centro e si aprirà l'immagine a dimensione intera. Navigare tra le foto le farà scivolare ai lati dello schermo, muovendo il contenitore di anteprime sottostante. Quando infine l'immagine verrà chiusa, essa sfumerà nuovamente nella sua anteprima.

    DEMO    VAI AL SITO

  • jQuery Foto Slider

    Quello che vi presento è un metodo davvero originale per inserire una fotogallery nel vostro sito. Il team di programmazione e design di WebDesignShock hanno usato PHP e Jquery per creare questo simpatico photo slider e il tutorial che segue (rivolto in particolare alla parte di programmazione) vi mostrerà come adattarlo alle vostre esigenze.

    DEMO    VAI AL SITO

  • 20 ottimi slider jQuery per creare gallerie di immagini

    Gli slider jQuery per creare gallerie fotografiche sono sempre più utilizzati. Nel sito trovate una ventina d’esempi da scaricare e riutilizzare, ma se non bastasse, viene anche spiegato come sono stati realizzati, per poterli ricreare o personalizzare in base alle proprie esigenze.

    VAI AL SITO

  • Portfolio animato in jQuery

    Questo tutorial guida l'utente nella realizzazione di un portfolio animato facendo uso di jQuery (mettendo anche a disposizione una collezione di oltre 30 template). Grazie a questa guida sarete infatti in grado di realizzare thumbnails animati i cui elementi reagiscono dinamicamente ai click dell'utente, ingrandendo l'immagine selezionata e mostrandone i dettagli.

    DEMO    VAI AL SITO

  • Creare un sito web Slick MobileApp con jQuery & CSS

    Ancora una volta vi proponiamo un tutorial che vi mostrerà come utilizzare jQuery e CSS per creare un sito web completo per una "finta" applicazione mobile. Molto interessante è il modo in cui viene proposto il tutorial che pone l'accento sull'importanza della veste grafica dei siti web.

    DEMO    VAI AL SITO


  • 40+ utili Tutorial jQuery & Ajax per creare Slider

    Gli slider jQuery servono a esporre i vostri contenuti in una maniera accattivante. Avrete forse notato in molti siti che gli articoli in evidenza vengono mostrati usando effetti di slittamento ottenuti con gli jQuery sliders. L'uso degli Sliders è infatti uno dei metodi piu' comuni per mostrare contenuti in modo unico e piacevole. Inoltre è il modo piu' efficiente di far vedere ai vostri lettori ciò che potete fare. Di seguito script, plugin e tutorial per creare slider.

    VAI AL SITO

  • Creare uno slideshow accessibile con jQuery

    In questo approfondito tutorial sullo sviluppo web, imparerete a creare un widget slideshow fruibile e adatto ai canoni della rete, usando HTML, CSS e JavaScript (jQuery). Durante la procedura, vedrete realizzarsi il concetto di Progressive Enhancement.

    DEMO    VAI AL SITO

  • Creare un portfolio con effetto Zoom e scorrimento tramite slider

    In questo tutorial si andranno a creare diversi effetti visivi per un portfolio o un progetto simile usando jQuery. Si darà vita a un piccolo slider integrato con il fantastico plugin Cloud Zoom e l'elegante Fancybox. L'idea è quella di dare all'utente l'opzione di vedere attraverso lo zoom i dettagli di un portfolio quando il cursone vi passa sopra e di premettere una visualizzazione a pieno schermo, qualora vi si cliccasse.

    DEMO    VAI AL SITO

  • Sequence, slider plugin jQuery dagli stili infiniti

    Sequence è uno slider plug-in jQuery dagli stili infiniti. Esso provvede ad ogni funzionalità per lo slider del sito web senza costringerti ad utilizzare un tema predefinito. Infatti Sequence non ha un tema precostituito, il che lascia all'utente il completo controllo per creare un originale slider usando solamente CSS3. E non è richiesta nemmeno la conoscenza di jQuery!

    DEMO    VAI AL SITO

  • FlexSlider – jQuery slider plugin

    Flexslider è un nuovo plugin per Jquery che genera una sidegallery da inserire nei vostri siti web. La forza di flexslider sta nel fatto che è semplice, permette di risparmiare codice ed è supportato praticamente da tutti i browser.

    DEMO    VAI AL SITO

  • Visualizzare articoli correlati in Slide Out Boxes

    La fruibilità di un sito web è una componente importantissima dello sviluppo, molto spesso pagine troppo piene di contenuti rendono difficile la navigazione, ma questo tutorial vi propone una soluzione davvero elegante che, utilizzando JQuery e CSS3, vi mostrerà come implementare una sorta di widget a comparsa che potrete usare ad esempio per mettere a disposizione degli utenti i contenuti correlati alla pagina visualizzata.

    DEMO    VAI AL SITO


  • Toggle (mostra / nascondi) in jQuery e CSS

    Il seguente tutorial è rivolto a chi cerca un metodo semplice ma efficace per imparare ad utilizzare il cosidetto “toggle effect”, ossia il classico effetto che espande le descrizioni delle voci dei menù tramite i tasti + e -

    DEMO    VAI AL SITO

  • Galleria immagini con jQuery che mostra un thumbnail di ciascuna immagine

    Questo tutorial ci aiuterà a produrre una galleria immagini con jQuery in cui l'anteprima è costituita da una minifoto. L'idea è di far comparire la minifoto nell'area di anteprima passando con il mouse sui punti dello slider. Quando si clicca su questi punti poi, l'immagine intera scorrerà dalla sinistra o dalla destra, a seconda della foto correntemente aperta.

    DEMO    VAI AL SITO


  • Slides: una galleria immagini con jQuery

    Slides è un plugin di slideshow per jQuery assurdamente semplice, con caratteristiche come la ripetizione continua, l'auto-play, gli effetti di transizione in dissolvenza o scorrimento, la dissolvenza incrociata, il pre-caricamento delle immagini e l'impaginazione auto generata. Con Slides non vedrete mai diverse foto contemporaneamente, Slides, infatti, fa elegantemente scivolare una foto sull'altra.

    DEMO    VAI AL SITO


  • 15 Responsive jQuery Slider Plugins

    Gli efficienti plug-in di slider JQuery sono i migliori per aggiungere effetti slide ai website e template interattivi. Come potete notare nella raccolta presentata, a vostra disposizione ci sono delle opzioni veramente valide. Negli ultimi tempi il web design efficiente è divenuto uno degli argomenti maggiormente discussi, ed è facile capirne il perchè: la grande esplosione di device mobili che permettono il collegamento alla rete internet ha fatto aumentare la richiesta di versioni di siti web per dispositivi portatili. In questa collezione troverete alcuni dei più efficienti scripts di slider disponibili al momento.


ricerca

Usa il motore di ricerca interno per trovare le migliori risorse per web designer.

Social trend
i post piu' menzionati nei social network

Sito mobile: il tuo è compatibile?

Menu in CSS – Collection

Tutorial Photoshop per modificare il colore degli occhi – Collection

jQuery Slider – Collection

jQuery Form Plugins – Collection

Tutorial Natalizi Photoshop – Collection

featured
i post consigliati

Pulsanti CSS3 – Collection

Tutorial Natalizi Photoshop – Collection

Azioni Photoshop – Collection

Temi per WordPress – Collection

jQuery Slider – Collection

jQuery Form Plugins – Collection