Slider automatico in dissolvenza
3 partecipanti
Forum dei Forum: Aiuto per Forumattivo :: Assistenza a problemi e richieste :: Problemi con uno script o codici :: I problemi risolti con i codici :: Argomenti chiusi con i codici
Pagina 1 di 1 • Condividi
Slider automatico in dissolvenza
Ciao a tutti ragazzi, stavo pensando di mettere nel mio forum uno slider automatico in dissolvenza come questo:
![Slider automatico in dissolvenza J10](https://i.servimg.com/u/f39/18/44/19/42/j10.png)
Come posso fare? Grazie in anticipo :)
![Slider automatico in dissolvenza J10](https://i.servimg.com/u/f39/18/44/19/42/j10.png)
Come posso fare? Grazie in anticipo :)
Ultima modifica di JLK_perry2000_ il Mar 26 Ago 2014 - 10:34 - modificato 1 volta.
Re: Slider automatico in dissolvenza
Ciao basterà inserire il codice nel messaggio indice, oppure un iframe.
Saluti
Insane![:good:](/users/3112/53/90/27/smiles/648633.gif)
Saluti
Insane
![:good:](/users/3112/53/90/27/smiles/648633.gif)
Re: Slider automatico in dissolvenza
Un iframe? Cos'è? Come posso inserirlo?
Dove trovo il codice, inoltre?![Razz](https://2img.net/i/fa/i/smiles/icon_razz.gif)
Quello che ho trovato qui è per forumcommunity, no per forumattivo...
Dove trovo il codice, inoltre?
![Razz](https://2img.net/i/fa/i/smiles/icon_razz.gif)
Quello che ho trovato qui è per forumcommunity, no per forumattivo...
Re: Slider automatico in dissolvenza
mettilo dove lo vuoi vedere..di solito si mette sulla home del forum
il codice va bene quello ti ho messo i tag giusti fai copia/incolla
tieni in considerazione questo
NOTA: Le immagini devono avere dimensioni 600x150px altrimenti l'effetto non sarà visibile
il codice va bene quello ti ho messo i tag giusti fai copia/incolla
- Codice:
<style>#slider {width: 600px;
height: 150px;
margin: 1px auto 0;
overflow:visible;
background-color: rgba(255, 255, 255, .15);
border: 5px solid rgba(255, 255, 255, .15);
-moz-transition:all 150ms ease-in;
-webkit-transition:all 150ms ease-in;
-o-transition:all 150ms ease-in;
position:relative;
box-shadow: 0 1px 2px #AAA}
#mask {width: 600px;
height: 150px;
overflow:hidden}
#slider:hover {background-color: rgba(255, 255, 255, .8);
border: 5px solid rgba(255, 255, 255, .8)}
#slider:hover #pause {opacity: 1}
#slider:hover ul, #slider:hover #overlay {-moz-animation-play-state:paused;
-webkit-animation-play-state:paused}
#overlay {width: 600px;
height: 150px;
position:absolute;
top: 0;
background-image:url(http://www.pikky.net/uploads/b0b030b3ef7fb61477ca57e7a181a2193d4dc0cb.png);
background-position:center;
background-repeat:no-repeat;
pointer-events:none;
-moz-transition:all 150ms ease-in;
-webkit-transition:all 150ms ease-in;
-o-transition:all 150ms ease-in;
opacity: 0.3;
-moz-animation:overlay-fade 18s infinite;
-webkit-animation:overlay-fade 18s infinite}
#slider ul {width: 600px;
height: 750px;
list-style:none;
padding: 0;
margin: 0;
-webkit-animation:slide 25s infinite linear;
-moz-animation:slide 25s infinite linear;
-ms-animation:slide 25s infinite linear;
-o-animation:slide 25s infinite linear;
animation:slide 25s infinite linear
position:relative;
left: 0}
#slider li {display:inline;
width: 600px;
height: 150px;
margin: 0;
padding: 0;
float:left;
position:relative;
background-image:none;
background-position: 50% 50%;
background-repeat:no-repeat}
#slider li:last-of-type {background-color: #C3C3C3}
#slider li a {display:block;
text-decoration:none}
#slider li span {display:block;
width: 600px;
padding: 8px;
position:absolute;
bottom: 0;
left: 0;
background-color:rgba(54, 54, 54, 0.4);
border-top: 1px solid rgba(0, 0, 0, .2);
text-shadow: 1px 1px 1px #362C30;
pointer-events:none;
text-align:left;
font-family: ubuntu, tahoma, geneva, sans-serif}
#slider ul li span h2 {font-size: 14px;
line-height: 23px;
color: #FFF;
font-weight:normal;
text-align: center}
/*Animazione*/
@-webkit-keyframes slide {/*FOTO 1*/
0% {opacity: 0; -webkit-transform:translatey(0px)}
1% {opacity: 1; -webkit-transform:translatey(0px)}
15% {opacity: 1; -webkit-transform:translatey(0px)}
19% {opacity: 1; -webkit-transform:translatey(0px)}
20% {opacity: 0; -webkit-transform:translatey(0px)}
/*FINE FOTO 1*/
/*FOTO 2*/
21% {opacity: 0; -webkit-transform:translatey(-150px)}
22% {opacity: 1; -webkit-transform:translatey(-150px)}
35% {opacity: 1; -webkit-transform:translatey(-150px)}
39% {opacity: 1; -webkit-transform:translatey(-150px)}
40% {opacity: 0; -webkit-transform:translatey(-150px)}
/*FINE FOTO 2*/
/*FOTO 3*/
41% {opacity: 0; -webkit-transform:translatey(-300px)}
42% {opacity: 1; -webkit-transform:translatey(-300px)}
55% {opacity: 1; -webkit-transform:translatey(-300px)}
59% {opacity: 1; -webkit-transform:translatey(-300px)}
60% {opacity: 0; -webkit-transform:translatey(-300px)}
/*FINE FOTO 3*/
/*FOTO 4*/
61% {opacity: 0; -webkit-transform:translatey(-450px)}
62% {opacity: 1; -webkit-transform:translatey(-450px)}
75% {opacity: 1; -webkit-transform:translatey(-450px)}
79% {opacity: 1; -webkit-transform:translatey(-450px)}
80% {opacity: 0; -webkit-transform:translatey(-450px)}
/*FINE FOTO 4*/
/*FOTO 5*/
81% {opacity: 0; -webkit-transform:translatey(-600px)}
82% {opacity: 1; -webkit-transform:translatey(-600px)}
95% {opacity: 1; -webkit-transform:translatey(-600px)}
99% {opacity: 1; -webkit-transform:translatey(-600px)}
100% {opacity: 0; -webkit-transform:translatey(-600px)}}
@-moz-keyframes slide {/*FOTO 1*/
0% {opacity: 0; -moz-transform:translatey(0px)}
1% {opacity: 1; -moz-transform:translatey(0px)}
15% {opacity: 1; -moz-transform:translatey(0px)}
19% {opacity: 1; -moz-transform:translatey(0px)}
20% {opacity: 0; -moz-transform:translatey(0px)}
/*FINE FOTO 1*/
/*FOTO 2*/
21% {opacity: 0; -moz-transform:translatey(-150px)}
22% {opacity: 1; -moz-transform:translatey(-150px)}
35% {opacity: 1; -moz-transform:translatey(-150px)}
39% {opacity: 1; -moz-transform:translatey(-150px)}
40% {opacity: 0; -moz-transform:translatey(-150px)}
/*FINE FOTO 2*/
/*FOTO 3*/
41% {opacity: 0; -moz-transform:translatey(-300px)}
42% {opacity: 1; -moz-transform:translatey(-300px)}
55% {opacity: 1; -moz-transform:translatey(-300px)}
59% {opacity: 1; -moz-transform:translatey(-300px)}
60% {opacity: 0; -moz-transform:translatey(-300px)}
/*FINE FOTO 3*/
/*FOTO 4*/
61% {opacity: 0; -moz-transform:translatey(-450px)}
62% {opacity: 1; -moz-transform:translatey(-450px)}
75% {opacity: 1; -moz-transform:translatey(-450px)}
79% {opacity: 1; -moz-transform:translatey(-450px)}
80% {opacity: 0; -moz-transform:translatey(-450px)}
/*FINE FOTO 4*/
/*FOTO 5*/
81% {opacity: 0; -moz-transform:translatey(-600px)}
82% {opacity: 1; -moz-transform:translatey(-600px)}
95% {opacity: 1; -moz-transform:translatey(-600px)}
99% {opacity: 1; -moz-transform:translatey(-600px)}
100% {opacity: 0; -moz-transform:translatey(-600px)}}
@-ms-keyframes slide {/*FOTO 1*/
0% {opacity: 0; -ms-transform:translatey(0px)}
1% {opacity: 1; -ms-transform:translatey(0px)}
15% {opacity: 1; -ms-transform:translatey(0px)}
19% {opacity: 1; -ms-transform:translatey(0px)}
20% {opacity: 0; -ms-transform:translatey(0px)}
/*FINE FOTO 1*/
/*FOTO 2*/
21% {opacity: 0; -ms-transform:translatey(-150px)}
22% {opacity: 1; -ms-transform:translatey(-150px)}
35% {opacity: 1; -ms-transform:translatey(-150px)}
39% {opacity: 1; -ms-transform:translatey(-150px)}
40% {opacity: 0; -ms-transform:translatey(-150px)}
/*FINE FOTO 2*/
/*FOTO 3*/
41% {opacity: 0; -ms-transform:translatey(-300px)}
42% {opacity: 1; -ms-transform:translatey(-300px)}
55% {opacity: 1; -ms-transform:translatey(-300px)}
59% {opacity: 1; -ms-transform:translatey(-300px)}
60% {opacity: 0; -ms-transform:translatey(-300px)}
/*FINE FOTO 3*/
/*FOTO 4*/
61% {opacity: 0; -ms-transform:translatey(-450px)}
62% {opacity: 1; -ms-transform:translatey(-450px)}
75% {opacity: 1; -ms-transform:translatey(-450px)}
79% {opacity: 1; -ms-transform:translatey(-450px)}
80% {opacity: 0; -ms-transform:translatey(-450px)}
/*FINE FOTO 4*/
/*FOTO 5*/
81% {opacity: 0; -ms-transform:translatey(-600px)}
82% {opacity: 1; -ms-transform:translatey(-600px)}
95% {opacity: 1; -ms-transform:translatey(-600px)}
99% {opacity: 1; -ms-transform:translatey(-600px)}
100% {opacity: 0; -ms-transform:translatey(-600px)}}
@-o-keyframes slide {/*FOTO 1*/
0% {opacity: 0; -o-transform:translatey(0px)}
1% {opacity: 1; -o-transform:translatey(0px)}
15% {opacity: 1; -o-transform:translatey(0px)}
19% {opacity: 1; -o-transform:translatey(0px)}
20% {opacity: 0; -o-transform:translatey(0px)}
/*FINE FOTO 1*/
/*FOTO 2*/
21% {opacity: 0; -o-transform:translatey(-150px)}
22% {opacity: 1; -o-transform:translatey(-150px)}
35% {opacity: 1; -o-transform:translatey(-150px)}
39% {opacity: 1; -o-transform:translatey(-150px)}
40% {opacity: 0; -o-transform:translatey(-150px)}
/*FINE FOTO 2*/
/*FOTO 3*/
41% {opacity: 0; -o-transform:translatey(-300px)}
42% {opacity: 1; -o-transform:translatey(-300px)}
55% {opacity: 1; -o-transform:translatey(-300px)}
59% {opacity: 1; -o-transform:translatey(-300px)}
60% {opacity: 0; -o-transform:translatey(-300px)}
/*FINE FOTO 3*/
/*FOTO 4*/
61% {opacity: 0; -o-transform:translatey(-450px)}
62% {opacity: 1; -o-transform:translatey(-450px)}
75% {opacity: 1; -o-transform:translatey(-450px)}
79% {opacity: 1; -o-transform:translatey(-450px)}
80% {opacity: 0; -o-transform:translatey(-450px)}
/*FINE FOTO 4*/
/*FOTO 5*/
81% {opacity: 0; -o-transform:translatey(-600px)}
82% {opacity: 1; -o-transform:translatey(-600px)}
95% {opacity: 1; -o-transform:translatey(-600px)}
99% {opacity: 1; -o-transform:translatey(-600px)}
100% {opacity: 0; -o-transform:translatey(-600px)}}
@keyframes slide {/*FOTO 1*/
0% {opacity: 0; transform:translatey(0px)}
1% {opacity: 1; transform:translatey(0px)}
15% {opacity: 1; transform:translatey(0px)}
19% {opacity: 1; transform:translatey(0px)}
20% {opacity: 0; transform:translatey(0px)}
/*FINE FOTO 1*/
/*FOTO 2*/
21% {opacity: 0; transform:translatey(-150px)}
22% {opacity: 1; transform:translatey(-150px)}
35% {opacity: 1; transform:translatey(-150px)}
39% {opacity: 1; transform:translatey(-150px)}
40% {opacity: 0; transform:translatey(-150px)}
/*FINE FOTO 2*/
/*FOTO 3*/
41% {opacity: 0; transform:translatey(-300px)}
42% {opacity: 1; transform:translatey(-300px)}
55% {opacity: 1; transform:translatey(-300px)}
59% {opacity: 1; transform:translatey(-300px)}
60% {opacity: 0; transform:translatey(-300px)}
/*FINE FOTO 3*/
/*FOTO 4*/
61% {opacity: 0; transform:translatey(-450px)}
62% {opacity: 1; transform:translatey(-450px)}
75% {opacity: 1; transform:translatey(-450px)}
79% {opacity: 1; transform:translatey(-450px)}
80% {opacity: 0; transform:translatey(-450px)}
/*FINE FOTO 4*/
/*FOTO 5*/
81% {opacity: 0; transform:translatey(-600px)}
82% {opacity: 1; transform:translatey(-600px)}
95% {opacity: 1; transform:translatey(-600px)}
99% {opacity: 1; transform:translatey(-600px)}
100% {opacity: 0; transform:translatey(-600px)}}
#creditiangelneo {float: right; font-size: 10px; font-style: italic; margin-right: 200px}
</style><div id="slider-shadow">
<div id="slider">
<div id="mask">
<ul>
<li>
<a href="http://jackforum.forumcommunity.net/?t=52604607" title="La formula segreta per aumentare la propria memoria"><img src="http://www.pikky.net/uploads/08c1a5ac94b5b7ae00ed736d65702204890a3a02.png" /></a>
<span><h2>La formula segreta per aumentare la propria memoria</h2></span>
</li>
<li>
<a href="http://jackforum.forumcommunity.net/?t=52018310" title="FIFA 13 - Con il Kinect saremo davvero sul campo? Ecco come!"><img src="http://www.pikky.net/uploads/1daa71d1ff82314439ad988cdcee0a4f567b088f.png" /></a>
<span><h2>FIFA 13 - Con il Kinect saremo davvero sul campo? Ecco come!</h2></span>
</li>
<li> <a href="http://jackforum.forumcommunity.net/?t=52269212" title="I 7 Tipi di Intelligenza"><img src="http://www.pikky.net/uploads/aa0cfba571753819d968058dcea41533cb54e2ae.png" /></a>
<span><h2>I 7 Tipi di Intelligenza</h2></span>
</li>
<li>
<a href="http://jackforum.forumcommunity.net/?t=52551828" title="PES2013 - Creare una playlist con i propri mp3"><img src="http://www.pikky.net/uploads/fed57ac1883e1713b7030f622e0f6ef8e1e07115.png" /></a>
<span><h2>PES2013 - Creare una playlist con i propri mp3</h2></span>
</li>
<li>
<a href="http://jackforum.forumcommunity.net/?t=52310551" title="Il posto ideale per fare l'amore"><img src="http://www.pikky.net/uploads/65fa31a282f5b3a90a9579b11da070dccb07830c.png" /></a>
<span><h2>Il posto ideale per fare l'amore</h2></span>
</li>
</ul>
</div>
<div id="overlay">
</div>
</div>
<br>
<div id="creditiangelneo"><a href="http://jackforum.forumcommunity.net/?t=52988244">Slider automatico con dissolvenza by AngelNeo89 </a></div>
tieni in considerazione questo
NOTA: Le immagini devono avere dimensioni 600x150px altrimenti l'effetto non sarà visibile
Re: Slider automatico in dissolvenza
Ciao, devo solo fare copia-incolla con il codice? :)
Scusa per il disturbo...
Scusa per il disturbo...
Re: Slider automatico in dissolvenza
Ok grazie mille... sei stato gentilissimo, così come Insane ![Razz](https://2img.net/i/fa/i/smiles/icon_razz.gif)
Chiedo comunque di non chiudere il topic, così se c'è qualche intoppo scrivo qui![Wink](https://2img.net/i/fa/i/smiles/icon_wink.gif)
![Razz](https://2img.net/i/fa/i/smiles/icon_razz.gif)
Chiedo comunque di non chiudere il topic, così se c'è qualche intoppo scrivo qui
![Wink](https://2img.net/i/fa/i/smiles/icon_wink.gif)
![-](https://2img.net/i/empty.gif)
» Slide in dissolvenza
» Effetto .fadeOut per le pagine del forum (Dissolvenza)
» Slider nel forum
» Slider sul portale
» Avere uno slider per le immagini (NivoSlider)
» Effetto .fadeOut per le pagine del forum (Dissolvenza)
» Slider nel forum
» Slider sul portale
» Avere uno slider per le immagini (NivoSlider)
Forum dei Forum: Aiuto per Forumattivo :: Assistenza a problemi e richieste :: Problemi con uno script o codici :: I problemi risolti con i codici :: Argomenti chiusi con i codici
Pagina 1 di 1
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.