Vai al contenuto
jQuery Italia
jQuery Italia

La community italiana di jQuery

  • IMPARA
    • Tutorials jQuery Italia
    • Tutorials dal web
    • Supporto ed Aiuto
  • CONTRIBUISCI
    • Nuovo Articolo
    • Nuovo Tutorial
  • SVILUPPA
    • Snippets
    • Tools
    • Download
    • Plugins
    • Links
  • FORUM
    • Reception
    • Supporto ed Aiuto
    • jQuery News
    • Non solo jQuery
  • NOTIZIE
    • jQuery
    • jQuery UI
    • Projects
  • CONTATTI
  • LOGIN

Flash? No, grazie: meglio jQuery!

Pubblicato il 27 Gennaio 201323 Giugno 2020 Categoria:
  • Plugins

Parliamo oggi di alcuni plugins che permettono l’animazione di testo e oggetti.

Per primo parliamo di Box2d, un semplice plugin jQuery che trasforma gli elementi del DOM in veri e propri oggetti fisici nel “mondo” bidimensionale del browser.
Creato da Franz Enzenhofer (che con Fullstackoptimization è stato Sponsor Ufficiale della jQuery Europe Conference 2012 di Vienna), il plugin utilizza l’ottimo motore fisico box2web.

Per inizializzare il nuovo “mondo” è sufficiente eseguire la seguente istruzione:

$("#some_element").box2d({'y-velocity':10});

Tutte le istruzioni successive a questa aggiungeranno solo elementi al “mondo”.

La chiamata .box2d() può essere impostata con le seguenti opzioni:

  • ‘y-velocity’: velocità di caduta verticale, default 0
  • ‘x-velocity’: velocità orizzontale, default 0
  • ‘debug’
  • ‘static’: oggetti fissi (true) o in movimento (false)
  • ‘density’: peso (in relazione alla dimensione). Valori tra 0 ed n, default 1.5
  • ‘restitution’: rimbalzo.Valori tra 0 ed 1, default 0.4
  • ‘friction’: attrito.Valori tra 0 ed 1, default 0.3
  • ‘shape’: forma. Valori “box” o “circle”, default box

Una cosa molto importante da prendere in considerazione quando si inizializzano gli elementi da utilizzare è che questi devono avere larghezza e lunghezza SEMPRE DEFINITE per evitare strani comportamenti: pensate ad esempio agli H1, che prendono di default l’intera larghezza della pagina.

E’ possibile definire forma, densità, rimbalzo ed attrito per ogni elemento del DOM:

<div box2d-static='true' style="widht:200px; height:200px;"> </div>
<div box2d-shape='circle' style="widht:200px; height:200px;"> </div>
<div box2d-density="1.5" box2d-restitution="0.4" box2d-friction="0.3" style="widht:200px; height:200px;"> </div>

Queste sono solo i valori di creazione degli oggetti, ed il cambiamento successivo di tali attributi (ad esempio tramite jQuery) non ha (al momento) alcun effetto.

Un semplice esempio dell’utilizzo del plugin lo trovate qui:
http://www.fullstackoptimization.com/box2d-jquery/

Il plugin è disponibile per il download su Github al seguente indirizzo:
https://github.com/franzenzenhofer/box2d-jquery.

Il secondo plugin jQuery di cui parliamo oggi è invece animateText.js di Justin Lucas, con il quale è possibile creare facilmente animazioni di testo, anche di un certo impatto visivo. Il plugin viene fornito con un paio di animazioni predefinite, che è comunque possibile personalizzare.

E’ sufficiente creare una lista non ordinata (<ul>) con almeno un elemento nella lista (<li>) contenente il testo e chiamare .animateText() su un selettore della lista non ordinata. Il primo parametro di .animateText () è sempre necessario e, nel caso di più elementi nella lista bisognerà passare una matrice di oggetti di testo che rappresentano le voci di elenco.

.animatedText() accetta 3 parametri: textObjects, options ed animations.
L’unico parametro obbligario è textObjects.

Ecco una breve panoramica delle parti che compongono textAnimate.js:

textObjects: rappresenta un singolo blocco di testo, contenuto all’interno di un <li>, che viene animato nel suo complesso. Ogni textObjects ha 3 parametri principali (animazione, offset, durata) che determinano l’animazione da utilizzare, quando questa deve iniziare e per quanto tempo dovrebbe durare. Una collezione di textObjects costituiscono una textGroup.

animations: una animazione contiene le istruzioni su come spostare e trasformare un textObjects. Queste istruzioni sono costituiti da uno o più “posizioni” che descrivono lo stato del textObjects.

positions: una posizione descrive lo stato cun cui  il textObjects sarà animato. Ogni animazione contiene uno o più posizioni. La prima posizione è il punto di partenza per il textObjects che inizierà immediatamente l’animazione verso lo stato descritto nella posizione successiva.

Esempi e download sono disponibili all’indirizzo
http://lukeas14.github.com/animateText.js/

0 Condivisioni
Share
Tweet
Share
Pin

Login

Accedi con Facebook
Accedi con Google
Accedi con Twitter
  • Registrati
  • Password dimenticata?

SOSTIENI jQuery Italia

Aiuta la Community di jQuery Italia a rimanere in vita per contribuire a diffondere le conoscenze di base ed avanzate di jQuery.

Download in evidenza

  • gmap104.html (3527 download)
  • jquery-1.4.1.min.js (3110 download)
  • tinytips11.html (3087 download)
  • jqueryformwizard-201.html (3072 download)
  • jquery-ui-1.8rc1.zip (2965 download)
  • jquerytools120.html (2890 download)
  • jquery-1.4.2.min.js (2884 download)
  • calendarPicker.html (2872 download)
  • 1.0.0.zip (2867 download)
  • move-background.html (2833 download)

jQuery Links

  • jQuery Howto
  • jQuery Official Site
  • jQuery UI Official Site
  • Learning jQuery
  • Use jQuery

SITO SEGNALATO SU

Sito segnalato da Freeonline.it - La guida alle risorse gratuite Mooseek.com - Web Directory, Download Software, Giochi Online, Video Tecnologici, Siti d'Affari

TAG

aggiornamento (3) ajax (5) Android (5) animazione (49) api (10) BlackBerry (4) calendario (3) canvas (4) css3 (9) form (12) framework (41) gallery (8) google (5) grafici (2) html5 (11) immagini (38) javascript (29) jQuery (160) jQuery UI (15) Linux Day (3) maps (3) menu (6) mobile (10) news (2) open source (4) overlay (3) plugin (93) Plugins (17) presentation cycle (4) projects (11) responsive (5) slider (7) slideshow (18) Smartphones (5) Tablets (4) template (5) testo (2) tooltip (6) tutorial (12) upload (3) utility (18) VELug (3) video (3) widget (3) zoom (3)
jQuery Italia

La community italiana di jQuery

  • Facebook
  • Twitter
  • Linkedin
  • Youtube
Tutti i loghi ed i marchi contenuti e citati in questo sito sono dei rispettivi propietari.
Privacy Policy
Cookies Policy
COPYRIGHT © 2010 - 2022 jQuery Italia
Designed By ZeeTheme
Posting....