[CSS3 + HTML] Slider automatico con dissolvenza

« Older   Newer »
 
  Share  
.
  1. AngelNeo89
    view post Posted on 1/9/2013, 18:03 by: AngelNeo89
        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
     
    .
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