effetto movimento immagini jquery

Fabio90

Utente Attivo
29 Feb 2012
506
0
16
Buongiorno,
secondo voi come è stato realizzato l'effetto delle immagini di questo sito?

Potrebbe essere un qualcosa di questo tipo?

$("#nome_img").hover(function() {

//spostamento in alto 100px;
//opacità 0.5

}
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, dal sorgente si vede che hanno utilizzato i css3, prova questo esempio
HTML:
<style type="text/css">
    div.immagine {
        width: 400px;
        height: 600px;
        background: transparent url("img/immagine.jpg") top center;
        transition: all 0.7s ease-in-out 0s;
        opacity: 0.7;
    }

    div.immagine:hover{
        opacity: 1;
        background-position:center -50px;
    }
</style>
<div class="immagine"></div>
qui per vederlo in azione.
Ormai anche IE si è adeguato, le versioni più vecchie saranno escluse ma questo è un'altro discorso.
 

Fabio90

Utente Attivo
29 Feb 2012
506
0
16
Wao! grazie infinite criric! e riguardo al fatto che sono sempre adeguate alla grandezza dello schermo?

Dovrei realizzare 4 immagini allineate una sotto l'altra sempre adeguate alla grandezza dello schermo... Dici che sia possibile?
Ho buttato giù un esempio che puoi vedere in allegato

Immagine.jpg
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Dovrai usare le % al posto dei px, anche per il background se non ricordo male la sintassi è questa
Codice:
background-size:100% 100%;
 
Discussioni simili
Autore Titolo Forum Risposte Data
D [HTML] Sfondo-Background fisso ma non troppo con effetto in movimento HTML e CSS 4
T effetto movimento Javascript 4
E telecamera effetto nebbia IP Cam e Videosorveglianza 0
S [Photoshop] Nome di questo effetto (vedi foto) Photoshop 1
S [HTML] Effetto su testo da togliere HTML e CSS 0
F [Photoshop] Effetto "vetro" Photoshop 1
A [Photoshop] come poter realizzare il seguente "effetto" Photoshop 4
P [Photoshop CC] Come posso creare quest'effetto - cerchi concentrici Windows e Software 6
P [Photoshop] Effetto ombra Photoshop 1
R [HTML] Effetto carousel di testo su immagine fissa HTML e CSS 2
trattorino [Javascript] effetto carino sul click mi aiutate? Javascript 1
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
M [Photoshop] Come posso creare questo effetto ? Photoshop 2
T [Javascript] identico carousel con effetto fade: in una pagina va in un'altra no, mistero? Javascript 3
I Effetto glowing su immagine con GIMP Webdesign e Grafica 0
MimmoMandrillo [Photoshop] Che effetto è questo? Photoshop 3
R [Photoshop] Come creare questo effetto (v.immagine)?(sovrapposizione immagini in modo uniforme) Photoshop 2
D [Photoshop] Come arrivare a questo effetto? Photoshop 4
S [Photoshop] aiuto effetto glitch scanner (scanner art) Photoshop 1
A Effetto hue-rotate con javascript Javascript 2
elpirata Creare scritte flash effetto dinamico Flash 2
A [HTML] Menu con effetto slide down HTML e CSS 0
M [HTML] Slideshow immagini con effetto FADE HTML e CSS 2
F [HTML] Navbar interferisce con codice per effetto parallax HTML e CSS 2
D effetto con adobe muse Windows e Software 1
X [Photoshop] Cercasi strumento per ottenere un semplice effetto. Photoshop 6
F [HTML] Effetto fade su ogni immagine contenute in uno slider HTML e CSS 16
S [HTML] Effetto hover in un div HTML e CSS 6
M [Photoshop] come realizzare un effetto speciale? Photoshop 1
R [HTML] Pulsante con effetto dissolvenza (fading) HTML e CSS 10
trattorino [Javascript] caricamento immagine con effetto fade Javascript 1
R Effetto sul testo Javascript 3
K Effetto psichedelico Flash 0
G Effetto mosso tipo calce. Photoshop 1
P Effetto spruzzo di profumo Photoshop 1
J Aggiunta di un effetto di transizione al plugin Quick Pager jQuery 0
L effetto galleria popup (immagini) jQuery 1
M effetto del testo css HTML e CSS 1
Z Effetto pennello con Flash Flash 0
P Visualizzare video mp4 con effetto lightbox jQuery 1
L Effetto fade a div Javascript 1
L Effetto hover con jquery jQuery 2
matteoraggi Come si fa a ricreare l'effetto dei pesciolini? WordPress 3
F Effetto comparsa header Javascript 2
F mappa jquery con effetto hover + fancybox Javascript 1
F Come si chiama questo effetto hover? Javascript 1
J effetto sliding dors come cover per entrare in un sito JQ Javascript 0
D Effetto foto come quella di Mika Photoshop 1
P Effetto lente su testo Javascript 1
V Applicare un effetto di transizione tra due activity Sviluppo app per Android 1

Discussioni simili