🚀 Esplora Tutte le Funzionalità
Scopri le potenti funzionalità di StoryMapJS attraverso esempi interattivi e dimostrazioni pratiche. Ogni esempio mostra come utilizzare la libreria per creare narrazioni coinvolgenti e visualizzazioni di dati geospaziali.
📱 Tipi di Media Supportati
StoryMapJS supporta una vasta gamma di media per arricchire le tue storie con contenuti multimediali coinvolgenti.
🖼️ Immagini e Foto
📸
PNG, JPG, GIF, WebP
Supporta tutti i formati immagine comuni con ridimensionamento automatico e ottimizzazione per web. Ideale per foto storiche, mappe, diagrammi e infografiche.
media: {
url: "path/to/image.png",
caption: "Descrizione immagine"
}
🎥 Video Embedded
▶️
YouTube, Vimeo, MP4
Integrazione diretta con YouTube e Vimeo, supporto per video locali MP4. Controlli di riproduzione automatica e responsive design per tutti i dispositivi.
media: {
url: "https://youtube.com/watch?v=...",
caption: "Video documentario"
}
🎵 Audio e Podcast
🎵
MP3, WAV, SoundCloud
Incorpora file audio per narrazioni, interviste o ambientazioni sonore. Supporto per SoundCloud e file audio locali con controlli di riproduzione integrati.
📄 Documenti PDF
📄
PDF, Google Docs
Visualizza documenti PDF direttamente nella storia. Perfetto per report, articoli di giornale storici, documenti ufficiali e ricerche accademiche.
⚡ Funzionalità Interattive
Crea esperienze coinvolgenti con elementi interattivi che permettono agli utenti di esplorare attivamente i contenuti.
🎯 Hotspots Cliccabili
📍
💧
🏠
🌊
Aggiungi punti di interesse cliccabili sulla mappa che rivelano informazioni aggiuntive. Ideale per creare tour virtuali e esplorazioni guidate dei luoghi.
💬 Popup Informativi
📊 Informazioni Dettagliate
Dati, statistiche e approfondimenti
Finestre popup che appaiono al click o hover, contenenti informazioni contestuali, dati statistici o immagini aggiuntive per approfondire la narrazione.
🎛️ Controlli Timeline
2019
2021
2023
2025
Slider temporale interattivo che permette di navigare attraverso eventi cronologici, con controlli play/pause e velocità personalizzabile.
🔍 Zoom e Pan Dinamici
🔍
Controlli di navigazione mappa
+
-
Controlli di zoom fluidi e pan per esplorare mappe dettagliate. Transizioni animate tra diverse scale geografiche e focus automatico sui punti di interesse.
📊 Visualizzazioni e Grafici
Integra grafici e visualizzazioni di dati direttamente nelle tue storie per comunicare informazioni complesse in modo efficace.
📈 Grafici Chart.js
Grafici a barre, linee, torta e radar completamente personalizzabili. Animazioni fluide e responsive design per visualizzare trend, statistiche e confronti.
🗺️ Mappe Multi-Layer
Sovrapponi diversi layer informativi sulla stessa mappa. Toggle per attivare/disattivare layer specifici e creare visualizzazioni comparative complesse.
🌡️ Mappe di Calore
🔥
Intensità Dati
Visualizza la densità e intensità dei dati attraverso gradazioni di colore. Perfetto per mostrare concentrazioni di popolazione, rischi ambientali o fenomeni geografici.
📊 Dashboard Statistiche
187cm
Livello Max
6h
Durata
1,247
Edifici
€1.2M
Danni
Pannelli informativi con KPI e metriche chiave. Aggiornamento in tempo reale e animazioni per evidenziare cambiamenti e trend significativi.
✨ Animazioni ed Effetti
Arricchisci le tue storie con animazioni fluide e effetti visivi che catturano l'attenzione e migliorano l'esperienza utente.
🔄 Transizioni Slide
Transizioni fluide tra le slide con effetti fade, slide, zoom e dissolve. Timing personalizzabile e easing per creare il ritmo narrativo perfetto.
🌊 Effetti Parallax
Effetto parallax per creare profondità e movimento. Diversi layer si muovono a velocità differenti creando un senso di tridimensionalità coinvolgente.
💫 Animazioni CSS
Animazioni CSS personalizzate per elementi UI, icone e indicatori. Effetti hover, focus e animazioni di caricamento per feedback visivo immediato.
🎬 Controlli Riproduzione
⏮️
▶️
⏭️
Controlli di riproduzione completi con play, pause, avanti/indietro. Barra di progresso interattiva e controlli di velocità per narrazioni temporizzate.
🔬 Funzionalità Avanzate
Funzionalità sofisticate per progetti complessi che richiedono interazioni avanzate e personalizzazioni specifiche.
🎨 Temi Personalizzati
Tema Scuro
Tema Chiaro
Tema Ocean
CSS completamente personalizzabile per creare temi unici. Variabili CSS, preprocessori supportati e sistema di theming dinamico per brand consistency.
📱 Responsive Design
📱
💻
⌚
Adattamento automatico a tutti i dispositivi e dimensioni schermo. Layout fluidi, touch gestures per mobile e ottimizzazioni per performance su dispositivi meno potenti.
♿ Accessibilità
♿
🔊
Screen Reader
⌨️
Keyboard Nav
🎨
High Contrast
Supporto completo per screen reader, navigazione da tastiera, alto contrasto e ARIA labels. Conformità WCAG 2.1 per inclusività totale.
🔌 API e Integrazione
🔗
📡
⚙️
REST API • WebSockets • Plugins
API RESTful per integrazioni esterne, supporto WebSocket per aggiornamenti real-time, sistema di plugin per estendere funzionalità e connettori per database.