[CSS3 + HTML] Slider automatico con dissolvenza

« Older   Newer »
 
  Share  
.
  1. AngelNeo89
    view post Posted on 13/11/2012, 17:52 by: AngelNeo89
        +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
     
    .
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