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.



    En ligne
    katia06
    FémininAge : 47Messages : 192

    le Ven 3 Jan 2014 - 14:17

    c'est super sympa
    merci



    Lexi
    FémininAge : 18Messages : 38

    le Ven 3 Jan 2014 - 14:54

    Superbe. *o*
    Kaleb32
    MasculinAge : 35Messages : 33

    le Sam 4 Jan 2014 - 5:47

    Super l'effet ! Merci, je vais essayer ^^
    Misaho Kiha
    FémininAge : 25Messages : 55

    le Sam 4 Jan 2014 - 13:09

    Merci du partage! c'est magnifique!
    Chiboshi
    FémininAge : 15Messages : 5

    le Dim 5 Jan 2014 - 0:18

    Merci !
    Mangockie
    FémininAge : 18Messages : 38

    le Dim 5 Jan 2014 - 14:32

    Ce code est magique ** Merci !
    Zuiichi
    MasculinAge : 23Messages : 106

    le Dim 5 Jan 2014 - 15:24

    Mortel *O* Merci !



    Siid
    MasculinAge : 25Messages : 122

    le Dim 5 Jan 2014 - 23:14

    Celle ci aussi je vais m'amuser à la torturer pour en extraire des connaissances ! Muhahahahahhaa

    Merci Sparrow
    shibari
    MasculinAge : 21Messages : 253

    le Lun 6 Jan 2014 - 23:18

    oh merci **





    Merci Dakota pour ce kit.
    DixieM.
    FémininAge : 25Messages : 49

    le Mar 7 Jan 2014 - 13:11

    Elle est juste MAGIQUE *-*  :bave: 
    Merci du partage  :bisou: 
    Ishyyn
    FémininAge : 21Messages : 90

    le Mar 7 Jan 2014 - 21:10

    Merci  :hug: 
    Abberline
    MasculinAge : 17Messages : 6

    le Mar 7 Jan 2014 - 23:51

    Super travail, merci !
    Noizy.
    MasculinAge : 18Messages : 43

    le Mer 8 Jan 2014 - 19:39

    Merci.
    lly*
    FémininAge : 19Messages : 24

    le Mer 8 Jan 2014 - 20:08

    Oh que c'est beau ! <3 Merci !
    Everdeen
    FémininAge : 23Messages : 34

    le Jeu 9 Jan 2014 - 21:02

    J'aime beaucoup, merci beaucoup :)



    JEG Elo
    FémininAge : 25Messages : 42

    le Jeu 9 Jan 2014 - 22:15

    Merci beaucoup, c'est vraiment un PA magnifique =)
    Lilie
    FémininAge : 33Messages : 151

    le Ven 10 Jan 2014 - 18:00

    J'adore !
    Merci beaucoup
    Rhay
    FémininAge : 21Messages : 14

    le Ven 10 Jan 2014 - 19:47

    Thanks!!
    Livia666
    FémininAge : 29Messages : 48

    le Ven 10 Jan 2014 - 20:48

    Très joli code très pratique merci !
    Nephylys
    MasculinAge : 20Messages : 23

    le Sam 11 Jan 2014 - 12:35

    Merci o/
    JasLo
    FémininAge : 14Messages : 76

    le Dim 12 Jan 2014 - 16:34

    Merci!
    Ascalia
    FémininAge : 27Messages : 13

    le Lun 13 Jan 2014 - 0:22

    Oh! Merci moi qui cherchait ce type de PA. J'ai enfin trouver pour apprendre à les faire *.*
    Venise
    FémininAge : 33Messages : 270

    le Mar 14 Jan 2014 - 10:29

    merci
    Babiroussa
    MasculinAge : 26Messages : 33

    le Mar 14 Jan 2014 - 14:17

    Waouh ! Super. Merci pour ce partage.
    Likilou
    MasculinAge : 23Messages : 262

    le Ven 17 Jan 2014 - 14:46

    Super merci :)



    Contenu sponsorisé

    Aujourd'hui à 0:05


      La date/heure actuelle est Sam 10 Déc 2016 - 0:05