AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Slideshow en CSS3

    Partagez
    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Mar 20 Juil 2010 - 10:18

    Bonjour à tous,


    J'ai réalisé il y a peu de temps une petite astuce pour combiner deux nouveautés de CSS3 afin de réaliser un Slideshow uniquement dans ce langage de style qu'est le CSS. Pas de javascript donc, ce sera une version prochainement normaliser (espérons-le).

    Le souci c'est qu'à l'heure actuelle cette technique n'est compatible qu'avec les Webkit (Google Chrome et Safari), et un peu avec Opera. Je dis un peu car il semble y avoir quelques bogues avec ce dernier navigateur.

    Firefox dans sa prochaine version 3.7 devrait prendre en charge ce système d'animation.

    Cette technique est abordée et expliquée en détail sur le site d'Alsacréations par mes soins :
    Réaliser un Slideshow en CSS3

    Je vous invite à poser vos questions directement ici si jamais vous en avez.

    Amusez-vous bien !

    PS : je n'ai encore jamais vu de gestion au clic sur les Slideshow sans passer par du javascript, profitez donc de l'exclusivité Wink




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Eve
    FémininAge : 28Messages : 37

    le Lun 4 Juil 2011 - 19:56

    Merci beaucoup pour ce partage.
    J'ai posé une question sur ce thème il y a peu.
    J'ignorais juste qu'on appelait ça un slideshow.
    Article Alsa' catapulté dans mes favoris.

    Thanx'.



    avatar
    Ge-gege08
    FémininAge : 27Messages : 43

    le Mar 12 Juil 2011 - 3:14

    Bonjour,
    j'ai essayé, mais j'ai pas réussit à le faire, la seule chose que j'ai réussit pour le moment c'est mettre un effet de zoom sur les boites.

    http://avalon-city.wowjdr.com/

    Voici ce que j'ai pour le moment dans ma PA et mon CSS :
    Code:
    .ex1 a:hover, .ex1 a:focus {
       -moz-transform: scale(1.2);
       -webkit-transform: scale(1.2);
       -o-transform: scale(1.2);
       -ms-transform: scale(1.2);
       transform: scale(1.2);
       -moz-box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 15px #b6a684;
       -webkit-box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 15px #b6a684;
       box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 15px #b6a684;
    }
        .animated { 
        transition: all 0.7s ease-out; 
        } 
     
     li { 
            display: inline; 
        } 
        li a { 
        display:block
            height: 85px; 
            width: 75px; 
            text-align: center; 
            background: white; 
            padding: 5px 10px; 
            margin: 0 20px; 
            color: #615334; 
            text-decoration: none; 
            line-height: 5.6em; 
            background: -moz-linear-gradient(center bottom , #DACDB1 11%, #F0E8D8 56%) repeat scroll 0 0 #F0E8D8; 
            background: -webkit-gradient(linear,left bottom,left top,color-stop(0.3, #DACDB1),color-stop(0.65, #F0E8D8)); 
            -moz-box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 3px #816F47; 
            -webkit-box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 3px #816F47; 
            box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 3px #816F47; 
            -moz-transition: all 0.3s ease-out; 
            -webkit-transition: all 0.3s ease-out; 
            transition: all 0.3s ease-out; 
        } 

    Code:
    <ul class="ex1"> 
            <li><a href="#">Block 1</a></li> 
            <li><a href="#">Block 2</a></li> 
            <li><a href="#">Block 3</a></li> 
        </ul> 

    Je ne suis pas sûr de comprendre la marche à suivre :S C'est quoi je dois rajouter pour avoir un slideshow horizontal, et comment je fais pour rajouter d'autres images, en mettre plus de 3?

    Merci d'avance de votre aide.
    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Dim 14 Aoû 2011 - 2:37

    Hello,

    Navré pour le délais de réponse, je n'ai pas vu ton message avant.
    As-tu bien suivi toutes les étapes du tuto ?

    Il semble manquer les étapes des pages qui suivent la première... :p

    Bon courage.




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Ge-gege08
    FémininAge : 27Messages : 43

    le Ven 25 Mai 2012 - 1:35

    Bonjour,
    je me suis relancer dans une slideshow,
    j'ai réussit, mais il y a un petit chose qui me dérange un peu, quand on va d'une image à l'autre la page descend.
    Comment faire pour empêcher cela?
    http://lost-hero.wowjdr.com/t9-tentative-pour-pvs
    Merci
    avatar
    Riku Asakura
    MasculinAge : 30Messages : 5736

    le Ven 14 Déc 2012 - 18:02

    Hello,

    Tu as toutes les informations sur ce bug à cette adresse :
    http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target

    Tu peux également suivre ce nouveau tutoriel plus complet :
    http://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition

    Bon courage, et bravo pour ta réussite jusque là :)




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    avatar
    Ireth
    FémininAge : 25Messages : 20

    le Sam 2 Mar 2013 - 0:07

    Alors là, merci.
    Sont présents dans ce tutos deux notions qui m'intéressent, à savoir @keyframes et la pseudo-classe target, c'est juste parfait.

    Juste une question pour le défilement automatique : que faire si on a un grand nombre d'éléments à faire défiler ?
    avatar
    Psychotic Bitch
    FémininAge : 31Messages : 38

    le Mar 17 Fév 2015 - 19:31

    Merci je cherchais à faire cela depuis un bon moment **
    avatar
    Be Shup's
    FémininAge : 19Messages : 33

    le Dim 18 Oct 2015 - 12:00

    merci à toi



    avatar
    Kelalin
    FémininAge : 25Messages : 1703

    le Dim 18 Oct 2015 - 23:20

    Merci pour le partage ! (’-’*)
    avatar
    Kimberlay *
    FémininAge : 27Messages : 160

    le Sam 28 Oct 2017 - 0:12

    Merci
    avatar
    o~°Passion HELL
    FémininAge : 29Messages : 211

    le Mer 1 Nov 2017 - 17:23

    merci :)



    ....
    Contenu sponsorisé


      La date/heure actuelle est Dim 19 Nov 2017 - 7:53