.

[CSS3 + HTML] Slider automatico con dissolvenza

« Older   Newer »
 
  Share  
.
  1. AngelNeo89
    view post Posted on 13/11/2012, 17:52
        +3   Top   Dislike
     
    .
    Avatar

    Senior Member

    Group
    Amministratori
    Posts
    20,495
    Stima
    +189

    Status
    Anonymous
    [CSS3 + HTML] Slider automatico con dissolvenza

    Demo - Live Preview



    Prima era un codice esclusivo del Jackforum ma oggi lo rendo noto a tutti! Eccovi il famoso "slider automatico con dissolvenza" che darà un tocco elegante al vostro forum. Questo codice infatti vi farà avere un bellissimo slider di immagini cliccabili con testo descrittivo ed il tutto contornato da un completamente editabile css!

    Come posso averlo sul mio forum?
    Per installarlo sul tuo forum devi inserire questo codice in Amministrazione -> Grafica -> Colori e Stili:
    CODICE
    /* Slider AngelNeo89 only for Jackforum */
    #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}


    Mentre in Amministrazione -> Grafica -> Codice HTML dovrete inserire questo codice:

    HTML
    <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>


    NOTA: Le immagini devono avere dimensioni 600x150px altrimenti l'effetto non sarà visibile

    E' molto facile intuire cosa andare a personalizzare, vi basterà perciò modificare quel che vedete nella preview per avere i contenuti inerenti il vostro forum. Potrete modificare il vostro nuovo "Slider" come più vi pare. Come sempre se avete problemi o volete semplicemente mostrarmi il vostro lavoro,fatelo rispondendo a questa discussione. Siete pregati di mettere i credits nella vostra skin come correttezza e riconoscimento ed anche per mostrare ai vostri utenti come possono averlo anche loro.


    Copyright Guida
    La guida è stata interamente creata da AngelNeo89 per il Jackforum. Se volete postarla sui vostri forum mandatemi un mp che sarò ben lieto di postarla anche sul vostro sito.
     


    Edited by AngelNeo89 - 10/6/2015, 10:49
    Web
     
    .
  2. eXander
    view post Posted on 9/12/2012, 18:22
        Top   Dislike
     
    .
    Avatar

    Where there's a user input, there's a vulnerability.

    Group
    Member
    Posts
    11,133
    Stima
    0

    Status
    Anonymous
    Bellissimo! Prendo, Grazie mille, +1 meritato!! :-)
    Contacts
     
    .
  3. AngelNeo89
    view post Posted on 10/12/2012, 14:28
        Top   Dislike
     
    .
    Avatar

    Senior Member

    Group
    Amministratori
    Posts
    20,495
    Stima
    +189

    Status
    Anonymous
    Grazie! :) Sperto ti sia utile. Dove l'hai usato?
    Web
     
    .
  4. eXander
    view post Posted on 10/12/2012, 14:30
        Top   Dislike
     
    .
    Avatar

    Where there's a user input, there's a vulnerability.

    Group
    Member
    Posts
    11,133
    Stima
    0

    Status
    Anonymous
    L'ho usato su un forum di prova, della futura skin di QUESTO FORUM =)
    Comunque si sarà sicuramente utilissimo! ^^
    Contacts
     
    .
  5. Ducitta©
    view post Posted on 6/4/2013, 12:44
        Top   Dislike
     
    .

    User deleted
    Ciao!!
    Innanzi tutto complimenti sei un geniaccio :D
    Inoltre, volevo chiederti un info in merito all'effetto slider automatico con dissolvenza.
    L'ho messo un attimo qui per prova:
    http://skinaag.forumfree.it/

    Ma come vedi è enorme, e dovrei rifarmi tutta la tabella.
    Dunque volevo chiederti se si può ridimensionare e fare piu' piccolo il riquadro?
    Se sì, come?
    E si può stabilire una forma particolare? Ho vistro in alcuni forum che hanno delle forme personalizzate!
    Inoltre, se funzionerà tutto ti mostrerò cosa mi è venuto fuori (perchè sto sperimentando! E non sono per niente brava con i Codici HTML) e oltre i Creditis ovviamente se ti va... volevo mettere le tue guide nel mio forum!!
    Grazie spero in tuo aiuto!!
     
    .
  6. AngelNeo89
    view post Posted on 6/4/2013, 13:06
        Top   Dislike
     
    .
    Avatar

    Senior Member

    Group
    Amministratori
    Posts
    20,495
    Stima
    +189

    Status
    Anonymous
    Ciao e benvenuta! Ti ringrazio per i complimenti :shifty:

    Gli effetti particolari sono fatti semplicemente tramite immagine.. in quel caso basta saper creare un'immagine tagliata in modo "particolare" (cioè lasciando le trasparenze).

    Per fare più piccolo lo slider devi modificare

    #slider {width: 600px;}
    #mask {width: 600px; }
    #overlay {width: 600px;}

    con il width (Larghezza) che vuoi tu. E logicamente usare immagini con uguale width! ;)

    Se hai problemi chiedi pure!
    Web
     
    .
  7. Ducitta©
    view post Posted on 6/4/2013, 15:53
        Top   Dislike
     
    .

    User deleted
    Altra domandina! Innanzi tutto grazie!!!
    Come posso aggiungere piu' slider? :D (quindi piu' immagini?)
     
    .
  8. @ntonio1991
    view post Posted on 1/9/2013, 16:02
        Top   Dislike
     
    .

    User deleted
    A me funziona, solo che vorrei applicarlo con immagini di dimensioni maggiori, è possibile?
    @ntonio91
     
    .
  9. AngelNeo89
    view post Posted on 1/9/2013, 18:03
        Top   Dislike
     
    .
    Avatar

    Senior Member

    Group
    Amministratori
    Posts
    20,495
    Stima
    +189

    Status
    Anonymous
    CITAZIONE (@ntonio1991 @ 1/9/2013, 17:02) 
    A me funziona, solo che vorrei applicarlo con immagini di dimensioni maggiori, è possibile?
    @ntonio91

    Per farlo funzionare con immagini più grandi devi tener conto delle "opzioni" denominate height e width nel codice css.

    Width lo puoi modificare tranquillamente in tutti quelli che vedi nel codice sopra facendolo uguale a quello delle tue immagini .

    Height (nonchè l'altezza) puoi modificarla ma devi considerare che l'animazione è basata proprio su questa. Se vuoi puoi modificarla ma devi modificare anche l'ultima parte del css (chiamata /* Animazione */ )
    SPOILER (clicca per visualizzare)
    CODICE
    /*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)}}


    La regola dice che dovrai modificare ogni valore in px con una distanza fatta proprio dall'altezza.

    ESEMPIO: Vuoi usare un'altezza di 100px. La FOTO 2 sarà perciò con valore -webkit-transform:translatey(-100px) invece che -webkit-transform:translatey(-150px) e via dicendo -200px invece che -300px,ecc...

    Non è complicato come processo ma è un pò lunghetto. Spero di esserti stato d'aiuto.
    Web
     
    .
  10. Ran_stellina85
    view post Posted on 6/3/2014, 21:34
        Top   Dislike
     
    .
    Avatar

    Ran_stellina85 ... La prima RAN del forum detectiveconan.tk ... ^^ Shinjitsu wa itsumo hitotsu!!!

    Group
    Member
    Posts
    2,014
    Stima
    0
    Location
    Brescia ^^

    Status
    Offline
    Grazie ... mi piace molto ... voglio subito provarla!!!
    Web
     
    .
  11. | M |
    view post Posted on 5/11/2014, 18:22
        +1   Top   Dislike
     
    .
    Avatar

    Member

    Group
    Member
    Posts
    718
    Stima
    +1
    Location
    Galassia Via Lattea>Sistema Solare>Terra>Europa>Italia>Veneto>Verona

    Status
    Anonymous
    Scusate sul mio forum da conflitto al popup div e quindi lo tolto, ma se a qualcuno altro desse conflitto, modifichi overlay nel css.
     
    .
  12. AngelNeo89
    view post Posted on 10/11/2014, 00:28
        Top   Dislike
     
    .
    Avatar

    Senior Member

    Group
    Amministratori
    Posts
    20,495
    Stima
    +189

    Status
    Anonymous
    Si hai perfettamente ragione! Purtroppo si c'è quel genere di conflitto!
    Web
     
    .
  13. Atheon93
    view post Posted on 1/4/2015, 19:39
        Top   Dislike
     
    .

    User deleted
    Salve, ho un piccolo problema, la slide finale, la quinta è già illuminata senza che io ci passi sopra con il mouse, cosa dovrei modificare? Grazie in anticipo!
     
    .
  14. AngelNeo89
    view post Posted on 10/6/2015, 09:49
        Top   Dislike
     
    .
    Avatar

    Senior Member

    Group
    Amministratori
    Posts
    20,495
    Stima
    +189

    Status
    Anonymous
    AGGIORNAMENTO
    Web
     
    .
  15. simø
    view post Posted on 15/4/2016, 17:12
        Top   Dislike
     
    .
    Avatar


    Group
    Member
    Posts
    16,865
    Stima
    0

    Status
    Offline
    Salve, volevo chiedere una cosa, è possibile inserire i pallini (sopra o sotto è indifferente) in modo tale da poter selezionare in modo manuale l'immagine col relativo link ? Grazie
     
    .
20 replies since 13/11/2012, 17:52   2916 views
  Share  
.
 
.
Codici, script e guide per il tuo Forum
Create your forum and your blog! · Top Forum · Categories · Help · Status · Contacts · Powered by ForumCommunity