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
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    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.



    avatar
    Pelezinho
    MasculinAge : 18Messages : 76

    le Mar 21 Juin 2016 - 23:46

    Merci :)



    [MERCI D'INTRODUIRE SIGNATURE ORIGINALE ICI]
    avatar
    Chadot
    FémininAge : 29Messages : 175

    le Lun 27 Juin 2016 - 10:23

    Merci du partage



    avatar
    Camy
    FémininAge : 17Messages : 63

    le Mer 29 Juin 2016 - 18:47

    Je l'avais vue sur un forum celle-là ^^



    Le poro de service ^^
    avatar
    Nekrofyre
    MasculinAge : 17Messages : 33

    le Mar 5 Juil 2016 - 1:55

    beau boulot
    avatar
    dean winchester
    MasculinAge : 23Messages : 85

    le Dim 17 Juil 2016 - 23:37

    Merci.
    avatar
    Kâ Lys
    MasculinAge : 54Messages : 299

    le Lun 18 Juil 2016 - 15:06

    Merci!



    avatar
    .Lucifer.
    MasculinAge : 44Messages : 164

    le Jeu 21 Juil 2016 - 13:57

    Très belle PA, merci beaucoup ! ;



    avatar
    LKD
    FémininAge : 26Messages : 21

    le Ven 26 Aoû 2016 - 16:00

    c'est trés jolie
    avatar
    Ode 14
    FémininAge : 24Messages : 19

    le Ven 26 Aoû 2016 - 21:11

    Merci Wink.
    avatar
    Alexielios
    FémininAge : 26Messages : 62

    le Sam 27 Aoû 2016 - 17:15

    Thanks a lot










    "People live their lives bound by what they accept as correct and true. That's how they define reality.
    But what does it mean to be correct or true?"
    avatar
    Ziktaon
    MasculinAge : 24Messages : 843

    le Lun 29 Aoû 2016 - 19:09

    Merci :p






    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    avatar
    amy pond
    FémininAge : 18Messages : 56

    le Mer 31 Aoû 2016 - 14:45

    Merci !
    avatar
    Xyyny
    FémininAge : 26Messages : 59

    le Mer 31 Aoû 2016 - 14:52

    Marchi ♥
    avatar
    Pocki
    FémininAge : 23Messages : 20

    le Mer 31 Aoû 2016 - 19:06

    merchi jaime =o
    avatar
    Bryan1997
    MasculinAge : 20Messages : 51

    le Mer 26 Oct 2016 - 15:06

    merci
    avatar
    Nillium
    FémininAge : 18Messages : 16

    le Sam 29 Oct 2016 - 13:53

    Merci pour le code *^*
    avatar
    BlueAmethyst
    FémininAge : 26Messages : 12

    le Sam 29 Oct 2016 - 15:26

    Merci ^^
    avatar
    Nymeria.
    FémininAge : 22Messages : 297

    le Sam 19 Nov 2016 - 4:34

    Si tu savais comme ce code me sauve la vie cheers affraid :mdr:

    MERCI BEAUCOUP !!
    avatar
    Lorris
    MasculinAge : 19Messages : 32

    le Mar 13 Déc 2016 - 12:22

    Merci (:
    avatar
    Pauli
    FémininAge : 24Messages : 22

    le Mar 27 Déc 2016 - 17:54

    merci le rendu est magnifique
    avatar
    Burn'
    MasculinAge : 23Messages : 42

    le Lun 9 Jan 2017 - 21:38

    Je test, merci ! :aww:
    avatar
    ptite_perle
    FémininAge : 54Messages : 114

    le Lun 10 Avr 2017 - 20:19

    Merci



    avatar
    Lessien
    FémininAge : 35Messages : 159

    le Sam 22 Juil 2017 - 11:56

    Génial, comme système ! Merci !
    Contenu sponsorisé


      La date/heure actuelle est Lun 25 Sep 2017 - 18:53