A gentile richiesta di una nostra lettrice, vi proporrò uno slider con animazione SlideInLeft/SlideInRight per far comparire l’elemento successivo o precedente rispettivamente da destra verso sinistra o da sinistra verso destra.
Per continuare il nostro cammino con la OOP, ho deciso di mostrarvi un esempio pratico e di facile comprensione dell’ereditarietà delle classi. Riprenderò lo slider Nivo precedentemente realizzato sfruttando le classi per definire due tipologie di slider.
Per OOP, acronimo di Object Oriented Programming, si intende un metodo di programmazione che si differenzia dalla normale programmazione procedurale. Nell’OOP è possibile definire delle classi che verranno istanziate da elementi chiamati oggetti.
In questa puntata tratteremo la creazione di uno Slider Nivo, la cui principale caratteristica è quella di avere una transizione grafica, da una immagine alla seguente, con effetto di dissolvenza, giocando sull’opacità degli elementi.
jQuery, come altri framework javascript, ci dà la possibilità di realizzare strutture grafiche ad hoc. In questo intervento analizzeremo come creare un Thumbnail Slider, una struttura composta da un carousel di elementi, controllati da una navigazione a frecce.
Uno dei punti di forza di MooTools, rispetto ad altri framework javascript, è il suo avanzato paradigma ad oggetti.
MooTools permette infatti di creare nuove classi che ereditano da altre con Class.Extends, come abbiamo già visto in passato, e di utilizzare i cosìddetti Mixin con Class.Implements.
Nell’ultimo post ho avuto modo di giocare con le trasformazioni del canvas. Mi è venuto in mente che potesse essere utile avere una classe in mootools che prendesse un’immagine presente nella pagina e mi desse la possibilità di fare un flip orizzontale (o verticale della stessa) per ogni evenienza.
Come nelle precedenti vacanze estive dove ho giocato con l’elemento canvas per creare un effetto demo old-school, anche per questo periodo di feste che, ahimè, per il sottoscritto feste non sono affatto state, ho volute rifarmi con un secondo effetto grafico classico che visualizzi i mostri che la mia ragione ha creato dopo la 48 ore Natale-Santo Stefano a tavola.
Con l’articolo di oggi vado a unirmi ai miei colleghi che già in passato hanno scritto riguardo l’uso del tag canvas e vi presento questo piccolo esperimento.
In uno dei nostri ultimi siti, ci sarebbe stato comodo poter usare un’unica immagine, in varianti di colore diverse, senza però dover creare una copia dell’immagine per ciascuna tonalità.
Terminate ormai le vacanze ci accingiamo a tornare in modalità Autumn per riprendere tutte le attività ordinarie che ci accompagnano durante il nostro anno lavorativo. Così, per dare un po’ di colore alle giornate che cominciano a diventare grigie continuiamo ad analizzare la nostra gallery fotografica realizzata con Mootools e CSS3.
Nonostante l’indubbia importanza che le scrollbar hanno a livello di user experience, ultimamente mi è capitato di sentirmi frustrato a causa di alcune gallery fotografiche che offrono una scadente gestione dello scorrimento tra gli elementi. Chiaramente, considerare negativo l’utilizzo delle scrollbar sarebbe un errore madornale. Anzi, penso che le barre di scorrimento rimarranno sempre necessarie sul web. Ecco, dunque lo spunto di riflessione che ho considerato: perchè non affiancare alle scrollbar altri metodi di scorrimento per una lista di elementi?
Oggi vi voglio presentare un plugin che ho realizzato per un progetto interno e che potrà forse rivelarsi utile anche per qualcun’altro. Si tratta di un plugin per la realizzazione di una tabella con altezza fissa che mantenga sempre visibili le intestazioni.
A company of:
©2002-2024 | ARTERA è un marchio di DHH Switzerland SA – Via Motta 18, CH-6830 Chiasso – Switzerland
info@artera.net – +41 091 682 972 7 – +39 031 391500 –
IVA: CHE-227.758.591
Il tuo indirizzo IP è: …
