Immagine dinamica.

di il
6 risposte

Immagine dinamica.

Ciao a tutti, sono nuovo del forum. Volevo chiedervi se sapevate come si realizzava un immagine dinamica come quella in fondo a questo sito "http://www.rock-im-park.co".
Grazie in anticipo per la collaborazione.

6 Risposte

  • Re: Immagine dinamica.

    Quello e' un'app fatto in flash, ma se usi jQuery lo puoi realizzare tranquillamente con un po di impegno
    visto come e' fatto basta che crei semplicemente delle div per le singole scritte, quelle che poi rimangono fisse nell'animazione dai la traslazione e cambio di trasparenza e ingrandimento a partire da un div di dimensioni 0.
    per quanto riguarda le scritte che scorrono dal basso verso l'alto invece usi una unica div con il suo contenuto che cambia ad ogni ciclo, magari associato a un'array, in questo caso l'animazione iniziale e' quasi uguale solo che le dimensioni sono decrescenti e quando arrivano al punto di stop si chiama la funzione di callback dell'animazione che settera un setTimeout di pochi millisecondi per richiamare nuovamente se stessa con la scritta cambiata.
    Per la musica javascript ha tutta una libreria dedicata che in questo caso e' semplicemente una piccola traccia che puo partire con un elemento audio con un unico pulsante visibile che sara' settato per il muto ma che potrebbe essere tranquillamente il stop o pausa.
  • Re: Immagine dinamica.

    Ho riguardato meglio, lo sfuocamento del testo e' piu difficile da ricreare e non saprei suggerirti.
  • Re: Immagine dinamica.

    Grazie mille per la risposta ma, io intendevo l'immagine del pubblico che si trova proprio alla fine della pagina (per capirci quella che varia se sposti il mouse da destra a sinistra o viceversa)
  • Re: Immagine dinamica.

    Scusa ma non ero andato fino in fondo, quella puo essere ricreata da delle div sovrapposte che cambiano di la loro posizione con l'ausilio dell'evento onMouseMove, ina lternativa sempre con lo stesso tipo di evento puoi semplicemente usare dei sfondi multipli che sono supportati e sposti sempre con l'evento onMouseMove la posizione di ciascuna immagine in modo appropriato
    http://www.w3schools.com/cssref/pr_background-position.asp
    http://www.webmasterpoint.org/programmazione/css/tutorial-css/css3-background-sfondi-multipli-piu-immagini.html
    ecco un mini tutorial.
    Per avere l'effetto di movimento dividi il contenitore principale per un numero per esempio 10, k=dim/10 e il numero che viene fuori sara' praticamente il range di movimento magari della prima immagine, quello dietro con un valore moltiplicativo che potrebbe essere 2, e quello dietro ancora 3.
    
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body
    { 
    background-image:url('smiley.gif'),url('smiley.gif'),url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:40px, 50px, 60px ;
    background-position:-5px bottom, 10px bottom, 15px bottom;
    }
    </style>
    </head>
    
    <body>
    <p><b>Note:</b> For this to work in Firefox and Opera, the background-attachment property must be set to "fixed".</p>
    </body>
    </html>
    

    Nel link sotto puoi provare manualmente senza l'ausilio degli eventi, cambi semplicemente i valori numerici e vedrai che si spostano, ho usato anche size per ricreare un effettoo piu' simile ed e' supportato du tutti i browser
    http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position
  • Re: Immagine dinamica.

    Grazie mille, la tua risposta mi è stata molto utile
  • Re: Immagine dinamica.

    Prego. Ciao.
Devi accedere o registrarti per scrivere nel forum
6 risposte