Effetto Zoom css3 con Vegas Background Plugin.
30 May

Effetto Zoom css3 con Vegas Background Plugin.

Ho trovato questo “trick” css tempo fa navigando a caso nel web.
In pratica con un solo copia/incolla andremo ad aggiungere un effetto Zoom-in
allo slideshow del famosissimo plugin Vegas Background.

Applicare lo Zoom Fx è molto semplice:
Scaricate il plugin Vegas Background (Link in fondo all’articolo).
Inizializzatelo come “Slideshow”, questo è il codice base:

$.vegas('slideshow', {
  backgrounds:[
    { src:'/img/bg1.jpg', fade:1000 },
    { src:'/img/bg2.jpg', fade:1000 },
    { src:'/img/bg3.jpg', fade:1000 }
  ]
})('overlay');

A questo punto aggiungete, nella vostra pagina html questo codice css:

.vegas-background {
	image-rendering: optimizeQuality;
	-ms-interpolation-mode: bicubic;
	z-index:-2 !important;
	max-width: none !important;
	-webkit-animation: animate-bg 10s linear infinite;
	animation: animate-bg 10s linear infinite;
}
@keyframes animate-bg {
    from {
       transform: scale(1);
    }
    to {
       transform: scale(1.2);
    }
}
@-webkit-keyframes animate-bg {
    from {
        -webkit-transform: scale(1);
    }
    to {
       -webkit-transform: scale(1.2);
    }
}
@-moz-keyframes animate-bg {
    from {
        -moz-transform: scale(1);
    }
    to {
       -moz-transform: scale(1.2);
    }
}
@-o-keyframes animate-bg {
    from {
        -o-transform: scale(1);
    }
    to {
       -o-transform: scale(1.2);
    }
}

Scarica: Vegas Background jQuery Plugin by JAY SALVAT

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>