Slider automatico in dissolvenza

3 partecipanti

Risolto Slider automatico in dissolvenza

Messaggio Da JLK_perry2000_ Mer 20 Ago 2014 - 13:48

Ciao a tutti ragazzi, stavo pensando di mettere nel mio forum uno slider automatico in dissolvenza come questo:
Slider automatico in dissolvenza J10
Come posso fare? Grazie in anticipo :)


Ultima modifica di JLK_perry2000_ il Mar 26 Ago 2014 - 10:34 - modificato 1 volta.
JLK_perry2000_
JLK_perry2000_
**

Sesso : Maschio
Età : 23
Messaggi : 92
Località : Roma

http://www.oltreconsole.forumitaliano.com
JLK_perry2000_ è stato ringraziato dall'autore di questo topic.

Risolto Re: Slider automatico in dissolvenza

Messaggio Da Insane Mer 20 Ago 2014 - 16:36

Ciao basterà inserire il codice nel messaggio indice, oppure un iframe.

Saluti
Insane :good:
Insane
Insane
Veterano dello staff
Veterano dello staff

Sesso : Maschio
Età : 32
Messaggi : 4178
Località : Varese

https://aiuto.forumattivo.it/
Insane è stato ringraziato dall'autore di questo topic.

Risolto Re: Slider automatico in dissolvenza

Messaggio Da JLK_perry2000_ Mer 20 Ago 2014 - 16:50

Un iframe? Cos'è? Come posso inserirlo?
Dove trovo il codice, inoltre? Razz
Quello che ho trovato qui è per forumcommunity, no per forumattivo...
JLK_perry2000_
JLK_perry2000_
**

Sesso : Maschio
Età : 23
Messaggi : 92
Località : Roma

http://www.oltreconsole.forumitaliano.com
JLK_perry2000_ è stato ringraziato dall'autore di questo topic.

Risolto Re: Slider automatico in dissolvenza

Messaggio Da the crow Mer 20 Ago 2014 - 19:24

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

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
the crow
the crow
Veterano dello staff
Veterano dello staff

Sesso : Maschio
Età : 32
Messaggi : 8782
Località : Roma

https://aiuto.forumattivo.it/forum
the crow è stato ringraziato dall'autore di questo topic.

Risolto Re: Slider automatico in dissolvenza

Messaggio Da JLK_perry2000_ Mer 20 Ago 2014 - 19:26

Ciao, devo solo fare copia-incolla con il codice? :)
Scusa per il disturbo...
JLK_perry2000_
JLK_perry2000_
**

Sesso : Maschio
Età : 23
Messaggi : 92
Località : Roma

http://www.oltreconsole.forumitaliano.com
JLK_perry2000_ è stato ringraziato dall'autore di questo topic.

Risolto Re: Slider automatico in dissolvenza

Messaggio Da the crow Mer 20 Ago 2014 - 19:32

si..ti ho messo io il tag del css per il div non serve
the crow
the crow
Veterano dello staff
Veterano dello staff

Sesso : Maschio
Età : 32
Messaggi : 8782
Località : Roma

https://aiuto.forumattivo.it/forum
the crow è stato ringraziato dall'autore di questo topic.

Risolto Re: Slider automatico in dissolvenza

Messaggio Da JLK_perry2000_ Mer 20 Ago 2014 - 19:33

Ok grazie mille... sei stato gentilissimo, così come Insane Razz
Chiedo comunque di non chiudere il topic, così se c'è qualche intoppo scrivo qui Wink
JLK_perry2000_
JLK_perry2000_
**

Sesso : Maschio
Età : 23
Messaggi : 92
Località : Roma

http://www.oltreconsole.forumitaliano.com
JLK_perry2000_ è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.