Mr. Webmaster Blog Menu
  • Home
  • Cerca
  • Argomenti del Blog
    • A
    • Apple
    • B
    • Browser
    • C
    • CMS
    • D
    • Database
    • E
    • Eventi & WorkShop
    • F
    • Freelance
    • G
    • Grafica
    • H
    • Hosting
    • I
    • IoT
    • L
    • Linux
    • M
    • Makers
    • Mobile
    • Mr. Webmaster
    • O
    • Online Apps
    • Open Source
    • P
    • Programmazione
    • R
    • Reti
    • S
    • Scripting
    • Senza Rete
    • Sicurezza
    • Social Network
    • Software e App
    • W
    • Web Design
    • Web e Diritto
    • Web e Lavoro
    • Web Marketing
    • Web Server
    • Web Writing
    • Windows
  • Network
  • Corsi on-line
Mr.Webmaster Blog→Scripting→DOMmy.js: animazioni CSS3 e controlli DOM via Javascript
  • 15
    OTT
    2018

DOMmy.js: animazioni CSS3 e controlli DOM via Javascript

DOMmy.js: animazioni CSS3 e controlli DOM via Javascript
Scritto da Riccardo Degni | Scripting

DOMmy.js è una leggera libreria Javascript, priva di dipendenze esterne, che assiste principalmente lo sviluppatore nella produzione di animazioni CSS3 attraverso controlli Javascript, grazie al motore di selezione e navigazione del DOM compreso nella stessa libreria.
DOMmy.js pesa meno di 4kb nella versione “compressa” (adatta, dunque, ad essere utilizzata in produzione) e possiede una curva d’apprendimento molto bassa, la cui facilità di utilizzo diminuisce ulteriormente se lo sviluppatore ha già avuto dimestichezza con altri framework Javascript che permettono di lavorare con le animazioni DOM, come ad esempio jQuery.
A differenza di quest’ultimo però, DOMmy.js non è un framework full-featured, ne presenta un motore di selezione proprietario. Al contrario. DOMmy.js è una struttura minimale che si focalizza sulla produzione di animazioni, eventi e controlli DOM utilizzando i moderni strumenti offerti dalle straordinarie proprietà CSS3.

Ad esempio, il seguente codice andrà a selezionare gli elementi aventi come attributo ID “myFirstElement” e “mySecondElement” applicando due animazioni concatenate (tramite il metodo FX applicabile agli elementi seleionati) sia sulle proprietà “font-size” sia sulle proprietà “color”, con una durata di 1 secondo ciascuna:

$$('#myFirstElement, #mySecondElement')
.fx({'font-size': '40px', 'color': 'yellow'}, 1)
.fx({'font-size': '10px', 'color': 'red'}, 1);

Tra le funzionalità realizzabili attraverso DOMmy.js troviamo:

  • la navigazione nel DOM della pagina;
  • la creazione di potenti animazioni sfruttando il motore di CSS3 attraverso il Javascript;
  • la selezione di elementi e di collezioni di elementi;
  • l’aggiunta di singoli o molteplici eventi, proprietà CSS, attributi HTML e dati storage agli elementi o alle collezioni di elementi;
  • una struttura this coerente;
  • un evento DOMReady per lavorare con la pagina senza dover attendere il caricamento di risorse quali immagini o video.

DOMmy.js è progetto Javascript orientato alla modernità ed ai nuovi standard e, per questo motivo, risulta essere totalmente cross-browser e compatibile con le versioni più recenti dei maggiori browser, ma non lo è altrettanto completamente con le versioni datate che non supportano funzionalità ormai standard come le nuove proprietà/valori CSS, come le animazioni, ed altri controlli Javascript. Tuttavia questo non colloca DOMmy.js nella schiera di framework Javascript che utilizzano un “DOM virtuale” o l’utilizzo di attributi HTML customizzati per generare strutture MVC di controllo del flusso. DOMmy.js è una libreria Javascript più simile a quelle della generazione precedente, con le differenze sopra elencate.

Con DOMmy.js possiamo, come abbiamo detto, utilizzare l’evento DOMReady, che ci permette di lavorare con il DOM senza dover aspettare il caricamento di altre risorse, e con il getting/setting di eventi ed attributi:

$$$( function() {
  $('myel').css({'display': 'block', 'color': 'white'});
  $('myel').on('click', function() {
    log('Hey!');
  });
  var title = $('myel').attr('title');
});

Naviga tra i post del Blog

← I 6 strumenti Javascript del momento
→ Creare un effetto “bouncing ball” con i CSS3

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
  • Facebook
  • Twitter
  • Google+
  • YouTube
  • Feed RSS
I post più letti del mese
  • Loading in attesa del caricamento della paginaLoading in attesa del caricamento della pagina22/03/2010
  • Scusi, mi sa dire il timestamp?Scusi, mi sa dire il timestamp?01/04/2010
  • Esecuzione di codice PHP da JavaScriptEsecuzione di codice PHP da JavaScript06/10/2015
  • Temporizzare il redirect con PHPTemporizzare il redirect con PHP15/06/2010
  • Redirect con jQueryRedirect con jQuery09/07/2010
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2019 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: condizioni d'uso / privacy / cookie