Voi Usate Il jParallax???

diagram

Il jParallax trasforma nodi in strati posizionati in modo assoluto che si muovono in risposta al mouse. A seconda delle loro dimensioni questi livelli si muovono a velocità diverse, in una sorta di modo parallelo.

Con un po’ di CSS è possibile creare finestre per vedere attraverso questi strati, oppure lasciarli liberi di vagare in giro per la pagina HTML.

 

Questo plugin esiste già da un paio di anni solo adesso sta venendo fuori dalle pagine internet.

Si può ipotizzare che questo sia dovuto allo sviluppo dei browser web che solo negli ultimi tempi si sono aggiornati in maniera davvero esponenziale andando a superare ogni aspettativa.

 

Ciò ha fatto si che anche il web design si evolvesse in qualcosa di spettacolare che impressiona anche il singolo utente di passaggio sul vostro sito.

 

Ecco un semplice esempio di jParallax http://www.ristorantemartella.it/

Zoom sulle Immagini: Cloud Zoom. jQuery Plugin

Cloud Zoom è un leggerissimo plugin in jQuery che mostra le immagini ingrandite attraverso alcuni effetti particolari.

Effettua lo zoom in base alla posizione del mouse sull’anteprima (thumbnail), mostrando l’immagine ingrandita accanto, oppure direttamente  in essa.

Possono essere create gallerie di immagini: questa feature è utilissima per la costruzione di siti e-commerce, dove è opportuno mostrare agli utenti delle immagini, sia in anteprima, sia in dettaglio dei prodotti di una categoria.

La trasparenza, lo zoom e tutti gli altri effetti possono essere personalizzati semplicemente attraverso i fogli di stile CSS.

Demo

Font Api di Google: Utilizza un Font Caricato nella Nuova Font Directory

Google ha appena annunciato una nuova risorsa messa a disposizione dei web designers: Font API.

Attraverso una Font Directory, ogni utente è in grado di accedere al database contenente i font, ed essi, una volta che sono stati allegati nelle nostre pagine web, potranno essere visualizzati da tutti essendo una funzione cross-browser.

È davvero semplice utilizzare l’API, infatti, basta allegare il file di stile (hostato sui server di Google) e sarai pronto ad utilizzarlo per formattare i contenuti!

La Font Directory è raggiungibile a questo indirizzo. Dopo aver scelto il font nella lista, selezionarlo, e premere sulla scheda “Get the code”.

Un esempio lo trovate nei titoli di questa pagina: spettacolare!

Widget in Javascript per i Social Network: OpenLike

OpenLike è un widget scritto in Javascript in grado di riportare funzionalità di sharing dei contenuti di un sito web, in uno dei più famosi Social Network: Facebook (Mi Piace), StumbleUpon, Reddit, Digg, Buzz, Twitter ecc…

È un sistema molto più semplice dei servizi professionali AddThis e ShareThis: infatti, basta inserire solo poco codice in un file js.

Le varie stringhe e immaginette di condivisione possono essere personalizzate attraverso il file CSS contenuto nel pacchetto.

HTML 5: Video Player Open Source in Javascript

Projekktor è un video player realizzato in Javascript, che utilizza la funzionalità di video embedding del nuovo standard HTML5. Nel caso in cui, il browser dell’utente non fosse compatibile (allo standard H.264), il plugin avvia un player in flash.

Supporta le playlists e può essere attivata la modalità schermo intero, inoltre, il pannello dei controlli, è configurabile via CSS.

C’è da dire che non è ancora perfetto e possiede qualche bug, ma data la forte diffusione di questa nuova tipologia di formato, i programmatori sono ben intenti a rilasciare nuove versioni sistemandone i problemi.

Vi rimando al sito per ulteriori dettagli.

slideGallery: Carosello di Immagini con Effetto Slide Orizzontale e Verticale – Mootools Framwork

slideGallery è un plugin realizzato con MooTools per creare gallerie di immagini a scorrimento in maniera semplice e veloce. Converte qualsiasi unordered list in uno slider (verticale o orizzontale), il cui aspetto, può essere configurato attraverso il CSS.

La galleria può essere configurata attraverso molte istanze: auto-play, pulsanti di avanzamento, durata della transizione, direzione della transizione, modallità della transizione ecc.

È addirittura compatibile con IE6…

AJAX-enabled Sticky Notes With PHP & jQuery – Note Post-It Sulle Pagine Web

Quello che vi propongo oggi è un sistema di gestione dei post-it. Esso fornisce all’utente la possibilità di creare delle note e di vederle in anteprima sulla pagina. Dopodiché possiamo spostarle sullo schermo in qualsiasi posizione.

Questo componente è completamente scritto in AJAX e PHP, con la versione 1.4 di jQuery. Inoltre, utilizza il plugin FancyBox per la creazione delle nuove note. Insomma, è davvero un mix di tecnologia,programmazione e grafica ad alti livelli.

Potete vedere un esempio a questa pagina, oppure, cliccate qui per il download.

Menu Inspirations: layout Navigatori per Header – Navigation Menu HTML & CSS

Oggi vi propongo dei menu navigator in HTML con il layout già prestabilito e installabile “al volo” su un una vostra pagina. Le anteprime le potete osservare nell’immagine in alto e, come avrete notato, vanno dallo stile stravagante con pattern (in alto) a quello semplice ed elegante (quelli più in basso).

Le immagini di base di questi navigator sono fornite nelle cartelle compresse in basso; inoltre, all’interno di questo file, troverete anche la pagina HTML con il navigatore funzionante e il file CSS per la gestione del mouse positioning.

Questo materiale, prelevato dal sito www.psdgraphics.com, è freeware anche a scopo commerciale.

Green stars CSS navigation
Purple CSS navigation
Orange halftone CSS navigation
Blue waves CSS navigation
Rainbow colors CSS navigation
Gray grunge CSS navigation
Yellow abstract CSS navigation
Blue abstract CSS navigation

Un framework CSS: MarkerCSS. Come Realizzare Pagine Web in Pochissimi Clicks

MarkerCss è un framework contenente codice open source per poter realizzare siti web con i templates offerti. Esso è composto da una serie semplicissima di fogli di stile CSS che caratterizzano gli elementi del contenuto delle pagine: bordi, sfondi, links, testi, colori e tabelle.

Esso include una serie di references prestabilite, come la classe w10 (che può essere definita da 10 a 1000) che determinerà la larghezza di un elemento in 10px (o altro), o per esempio la classe p5 (definita da 5 a 50) che aggiungerà un padding di 5px all’elemento a cui si riferisce.

C’è una lista di esempi fornita dal sito che lascia intuire meglio tutte le funzionalità di questo interessante, funzionale e pratico framework.

Plugin Per E-Commerce: Gestire Prodotti e Acquisti in un Carrello Virtuale della Spesa

Utilissimo plugin in Ajax per gestire gli articoli in vendita su un sito e-commerce. Questo add-on utilizza un database MySql per catalogare gli articoli, dopodiché, attraverso un’interfaccia user-friendly, è possibile trascinare i prodotti in un’area dedicata agli acquisti (Drag&Drop).

Successivamente verrà calcolato il totale (numero prodotti per il prezzo unitario) e verrete reindirizzati alla pagina di stampa dell’ordine, da gestire e programmare a piacere in base alle necessità.

Completamente scritto in PHP, CSS, HTML e AJAX.

Qui la demo e il download del plugin Ajax.