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

Animazioni testuali e visualizzazione di oggetti a 360°

Pubblicato il 24 Febbraio 201323 Giugno 2020 Categoria:
  • Plugins

Sulla falsariga del precedente articolo, vediamo anche oggi alcuni plugins jQuery che permettono l’animazione di testo ed oggetti, sostituendo degnamente la tecnologia Flash all’interno dei nostri siti.

Cominciamo con Textillate.js che combina alcune librerie per fornire un plugin semplice e molto facile da utilizzare per l’applicazione di animazioni CSS3 a qualsiasi testo.

L’utilizzo di Textillate.js è effettivamente semplicissimo: basta includerlo, assieme a jQuery ed al potente Lettering.js (di cui abbiamo già parlato in questo articolo) per iniziare a creare effetti unici.

In realtà Textillate.js ha bisogno anche di Animate.css: un singolo file CSS che include varie regole per le animazioni come flash, bounce, shake…
Animate.css crea una classe per ogni animazione, classi che hanno l’accelerazione hardware nativa e lavorano quindi molto più agevolmente rispetto alle animazioni javascript.
Ma per i browser più vecchi c’è sempre bisogno del supporto javascript ed anche per questo (ma non solo per questo…) entra in gioco Textillate.js.

Abbiamo eseguito il plugin su tutti i maggiori browser attualmente disponibili (IE 9, Opera 12, Safari 5, Firefox 18 e Chrome) e, nonostante le animazioni siano sempre molto fluide, il plugin ha incontrato problemi su  Opera ed IE .

Sito autore e demo: http://jschr.github.com/textillate/

DOWNLOAD

Passiamo a parlare ora di tre plugin che permettono la visualizzazione di oggetti a 360°.

Il primo e più basilare si chiama ThreeSixty e consente la generazione di un’anteprima “trascinabile” a 360° da una sequenza di immagini. Il plugin supporta i comandi da tastiera (tasti freccia) ed il “touch and wipe” per i dispositivi mobile.

Threesixty

Inoltre i metodi nextFrame() e prevFrame() consentono di poter collegare controlli per un’interfaccia utente. Il plugin pesa solo 10 Kb.

Sito autore e demo: http://nick-jonas.github.com/threesixtyjs/

DOWNLOAD

Il secondo plugin si chiama ThreeSixty Image Slider. Questo plugin, un pò più complesso del precedente, presenta ed offre un certo numero di opzioni di personalizzazioni tra le quali segnaliamo:

  • il numero di frames totali per l’animazione
  • il frame iniziale e quello finale
  • il path e l’estensione delle immagini
  • definizione /scelta del preloader da utilizzare

360 Image Slider

Inoltre è possibile definire dei controlli personalizzati e l’autore fornisce anche un editor live dove poter impostare le opzioni e vederne il risultato. Il plugin funziona perfettamente in tutti i più recenti browser e pesa solo 5 Kb in formato compresso.

Sito autore e demo: http://creativeaura.github.com/threesixty-slider/

DOWNLOAD

L’ultimo ed il più versatile e complesso dei tre plugin per la visualizzazione di oggetti a 360° è Dopeless Rotate. Quest’ultimo infatti fornisce numerose funzionalità, tra le quali:

  • hotspot configurabili
  • funzione di zoom
  • supporto dei dispositivi touchscreen
  • possibilità di utilizzare più istanze del plugin su una sola pagina
  • possibilità di utilizzare un qualsiasi numero di immagini
  • caricamento delle immagini automatico o manuale tramite PHP senza script lato server
  • un preloader che mostra l’avanzamento del caricamento delle immagini
  • un preloader per il caricamento dell’immagine di zoom

Il plugin inoltre presenta un design moderno ed accattivante e pesa 19 Kb.

Dopeless Rotate

Dopeless Rotate è rilasciato sotto licenza Creative Commons Attribution-Noncommercial 3.0.
È quindi possibile utilizzarlo liberamente per progetti personali ma non commerciali, fornendo un collegamento visibile al sito dell’autore.
In caso si volesse utilizzare Dopeless Rotate per scopi commerciali è previsto il pagamento di una licenza d’uso.

Sito autore e demo: http://www.dopeless-design.de/dopeless-rotate-jquery-plugin-360-degrees-product-viewer.html

DOWNLOAD

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....