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.


    PA Carousel (4 blocs) - css & html

    Partagez
    Okhmhaka
    FémininAge : 31Messages : 31721

    le Ven 1 Nov 2013 - 13:59

    Rappel du premier message :

    Page d'Accueil en "Carousel"


    Voici une page d'accueil en carousel, comportant donc 4 blocs de texte pouvant donner l'impression de "tourner" lorsque l'on clique sur le suivant. Il sera compliqué d'expliquer ça en détail avec du texte alors une démo sera nettement plus efficace, la voici :

    DEMO CAROUSEL

    Comme vous pouvez le voir, la PA comporte plusieurs blocs, dont un bloc rouge en avant et en grande taille, un bloc bleu et un bloc jaune de part et d'autre et d'une taille réduite. Un quatrième bloc se situe derrière et donc caché par le bloc rouge. Si vous cliquez sur le bloc jaune il prendra la place du bloc rouge qui lui même prendra la place du bloc bleu et vous verrez alors apparaitre ce quatrième bloc (violet) qui prendra l'ancienne place du bloc jaune. Bref, l'idée c'est qu'un clic sur l'un des deux blocs sur le côté le fait venir devant et donne l'impression que les 4 blocs tournent comme sur un plateau avec un effet de profondeur puisque leur taille diminue  s'ils vont derrière et augmente s'ils viennent en premier plan.

    Cette PA est déjà remplie pour vous faciliter la tâche mais vous pouvez facilement changer le contenu des blocs. Leur apparence peut également être modifiée, j'ai mis une couleur différente pour chaque afin que le visuel et le principe de cette PA soit compris plus facilement, mais les 4 blocs peuvent très bien avoir le même aspect.

    Passons à l'installation je vous parlerais de la personnalisation ensuite...

    Un petit "merci" en réponse à ce topic sera nécessaire pour voir le code de cette PA "carousel", et je rappelle que le CREDIT est à laisser dans la page, ou à mettre quoi qu'il en soit sur votre forum en cas d'utilisation de cette PA si vous décidez d'en modifier le contenu.



    Bonne utilisation / personnalisation !

    Un problème sur ce tuto' ?En cas de problème de compréhension, d'application ou de personnalisation de ce tutoriel, posez vos questions en ouvrant un sujet [url=http://www.never-utopia.com/f177-probleme-avec-mon-codedans cette section[/url].
    Ne postez pas vos questions à la suite car elles ne pourront pas être traitées correctement.



    Seth Ivanoff
    MasculinAge : 26Messages : 8

    le Dim 8 Déc 2013 - 0:50

    merci
    Magda Sully
    FémininAge : 19Messages : 143

    le Dim 8 Déc 2013 - 15:15

    Ouaah, super, ça faisait longtemps que je cherchais à faire ça Wink
    Bwarfi!



    Zhulan
    FémininAge : 18Messages : 25

    le Dim 8 Déc 2013 - 18:37

    Merci pour cette page d'accueil super originale! *-*
    matt
    MasculinAge : 21Messages : 25

    le Dim 8 Déc 2013 - 21:25

    Merci
    Ashem
    FémininAge : 31Messages : 250

    le Lun 9 Déc 2013 - 13:55

    merci
    Zibeline
    FémininAge : 31Messages : 76

    le Mar 10 Déc 2013 - 14:16

    c'est magnifique
    Kira DarK
    FémininAge : 19Messages : 14

    le Mar 10 Déc 2013 - 15:42

    C'est génial ! Merci ^^
    Drakylla
    MasculinAge : 25Messages : 26

    le Mar 10 Déc 2013 - 15:50

    Bravo à l'artiste et merci beaucoup, ça rend vraiment bien !
    Shanyme Thibolt
    FémininAge : 22Messages : 136

    le Mar 10 Déc 2013 - 18:53

    J'adore ! merci beaucoup.
    Roromiya
    FémininAge : 99Messages : 111

    le Mer 11 Déc 2013 - 9:53

    Merci.



    Melik
    MasculinAge : 23Messages : 74

    le Mer 11 Déc 2013 - 13:18

    Merci!
    Aquarius Camus
    FémininAge : 36Messages : 9

    le Jeu 12 Déc 2013 - 10:46

    J'aime beaucoup aussi ce style de présentation, merci beaucoup.
    Cortisalia
    FémininAge : 24Messages : 88

    le Ven 13 Déc 2013 - 11:34

    C'est très joli merci beaucoup Capitaine ! *^*



    Rozenbrez
    FémininAge : 25Messages : 1177

    le Sam 14 Déc 2013 - 10:37

    Comme d'habitude le codage est sublime Captain' Very Happy Et toujours aussi sympathique de faire partager ton talent <3



    P'tit Suisse
    MasculinAge : 15Messages : 86

    le Sam 14 Déc 2013 - 18:57

    WOW **



    tamanegeek
    MasculinAge : 17Messages : 167

    le Sam 14 Déc 2013 - 19:25

    Merchi ! :3
    Hoshina
    FémininAge : 25Messages : 24

    le Dim 15 Déc 2013 - 13:48

    Merci pour le partage, elle est vraiment magnifique !^^
    BloodyMoony
    FémininAge : 24Messages : 73

    le Dim 15 Déc 2013 - 15:45

    Tu as vraiment trouvé de très bons effets !!



    Archeos
    FémininAge : 20Messages : 60

    le Dim 15 Déc 2013 - 19:16

    Tks j'adore!!



    Aelita
    FémininAge : 23Messages : 277

    le Lun 16 Déc 2013 - 0:56

    Merci beaucoup ^^
    Célestine
    FémininAge : 18Messages : 51

    le Mar 17 Déc 2013 - 19:36

    Merci beaucoup ! Very Happy
    Patte Molle
    FémininAge : 22Messages : 137

    le Mer 18 Déc 2013 - 11:17

    C'est génial ! Merci beaucoup ! :)
    Wanted
    FémininAge : 21Messages : 112

    le Mer 18 Déc 2013 - 13:41

    Oh sympa' c'code ! **
    Merci beaucoup. o/
    Miss Volchok
    FémininAge : 29Messages : 139

    le Ven 20 Déc 2013 - 3:11

    C'est juste superbe, bravo et merci.
    Sweet Angel
    FémininAge : 33Messages : 125

    le Ven 20 Déc 2013 - 13:03

    Trop beau, merci
    Contenu sponsorisé

    Aujourd'hui à 9:50


      La date/heure actuelle est Sam 10 Déc 2016 - 9:50