Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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
    MasculinAge : 31Message(s) : 31657

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Ven 1 Nov 2013 - 8:59
    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.


    FémininAge : 28Message(s) : 108
    damon w salvatore
    le Ven 1 Nov 2013 - 9:28
    merci j'aime beaucoup.
    FémininAge : 16Message(s) : 695

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    3/10  (3/10)
    Whitemoon
    le Ven 1 Nov 2013 - 10:01
    Super Page d'accueil ! T'es génial Sparrow ^^


    MasculinAge : 27Message(s) : 30
    Necro Seth
    le Ven 1 Nov 2013 - 11:58
    Merci !
    FémininAge : 23Message(s) : 135
    Seven
    le Ven 1 Nov 2013 - 14:31
    C'est une super PA ! Merci beaucoup Sparrow !
    FémininAge : 26Message(s) : 144
    Natsuya Gaïaguard
    le Ven 1 Nov 2013 - 18:31
    Tu te surpasses à chaque fois *0*


    MasculinAge : 18Message(s) : 61
    Arthuragon
    le Sam 2 Nov 2013 - 4:20
    Génial
    MasculinAge : 26Message(s) : 113
    Araki
    le Sam 2 Nov 2013 - 5:42
    Merci!!!!
    FémininAge : 21Message(s) : 11
    She's nothing.
    le Sam 2 Nov 2013 - 20:26
    Merci beaucoup (j'adore tes tutos XD)
    FémininAge : 24Message(s) : 125
    SweetieBay
    le Sam 2 Nov 2013 - 21:02
    oh j'aime ! merci


    Spoiler:
    FémininAge : 24Message(s) : 30
    Tinker•Bell
    le Lun 4 Nov 2013 - 18:16
    Merci **
    FémininAge : 21Message(s) : 229
    Kimmie
    le Lun 4 Nov 2013 - 18:40
    merci ^^
    FémininAge : 27Message(s) : 86
    Shiwaii
    le Mar 5 Nov 2013 - 12:00
    merciii
    FémininAge : 27Message(s) : 82
    Jay-89
    le Mar 5 Nov 2013 - 14:09
    Merci =)
    FémininAge : 17Message(s) : 9
    Ombre Félïnsse
    le Mar 5 Nov 2013 - 22:30
    merci !
    FémininAge : 25Message(s) : 18
    gaellecathleen
    le Mer 6 Nov 2013 - 13:07
    c'est vraiment super merci :)
    FémininAge : 30Message(s) : 239
    Euterpe
    le Jeu 7 Nov 2013 - 3:15
    waw c'est super joli *-*
    FémininAge : 21Message(s) : 43
    Sophia
    le Jeu 7 Nov 2013 - 5:11
    super original, merci beaucoup!
    MasculinAge : 22Message(s) : 139
    Reishi
    le Jeu 7 Nov 2013 - 16:50
    merci ! Very Happy
    FémininAge : 22Message(s) : 127
    ryry0013
    le Ven 8 Nov 2013 - 23:07
    Oh trop super merci beaucoup!
    MasculinAge : 23Message(s) : 287
    Apokalip'z
    le Dim 10 Nov 2013 - 11:21
    vraiment tu cartonnes Captain Very Happy


    FémininAge : 25Message(s) : 296

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Depp
    le Dim 10 Nov 2013 - 11:40
    Mercii beaucouuuupp Very Happy


    FémininAge : 18Message(s) : 114
    Fartiny
    le Dim 10 Nov 2013 - 15:05
    Merci, elle est super !
    MasculinAge : 26Message(s) : 10
    Will
    le Dim 10 Nov 2013 - 15:56
    Merci
    FémininAge : 26Message(s) : 6
    luminyah
    le Dim 10 Nov 2013 - 22:57
    Merci c'est vraiment super *o*
    Contenu sponsorisé
    Aujourd'hui à 12:51

      La date/heure actuelle est Ven 30 Sep 2016 - 12:51