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) : 31655

    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
    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.


    FémininAge : 26Message(s) : 59
    Carcajou
    le Mer 6 Jan 2016 - 5:07
    Joli et très pratique. Beaucoup d'infos en un minimum d'espace ! Merci !
    MasculinAge : 19Message(s) : 32
    AlexTasie
    le Ven 8 Jan 2016 - 11:08
    Mercii :p
    FémininAge : 25Message(s) : 48

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    noksye
    le Ven 8 Jan 2016 - 17:55
    Merci beaucoup !
    FémininAge : 28Message(s) : 130
    mon-etoile
    le Lun 18 Jan 2016 - 11:26
    Merci
    MasculinAge : 22Message(s) : 40
    blastrall
    le Sam 6 Fév 2016 - 8:44
    merci pour la PA
    MasculinAge : 23Message(s) : 60
    jey38830
    le Mar 9 Fév 2016 - 3:20
    J'aime beaucoup, merci !
    FémininAge : 22Message(s) : 49
    witm
    le Mar 16 Fév 2016 - 13:59
    merci :popcorn:
    FémininAge : 36Message(s) : 69
    Kilda
    le Mar 23 Fév 2016 - 15:02
    merci
    MasculinAge : 48Message(s) : 146
    Coco-Lapin02
    le Sam 19 Mar 2016 - 9:08
    Super Page d'accueil !
    MasculinAge : 22Message(s) : 23
    BloodyMonster
    le Mer 30 Mar 2016 - 3:30
    Merci !


    FémininAge : 30Message(s) : 26
    Lilypops
    le Ven 8 Avr 2016 - 15:15
    Merci!!! :love:


    :euh:
    FémininAge : 58Message(s) : 83
    marie-noelle
    le Mar 26 Avr 2016 - 18:57
    merci Very Happy
    FémininAge : 25Message(s) : 22
    Kiona_Spencer
    le Ven 29 Avr 2016 - 14:06
    Merci beaucoup, c’est vraiment superbe Very Happy
    FémininAge : 22Message(s) : 33
    RPG Maker
    le Mer 11 Mai 2016 - 6:05
    Elle est chouette, merci. ^^
    MasculinAge : 22Message(s) : 273
    Stronger
    le Mer 11 Mai 2016 - 19:15
    merci !


    FémininAge : 23Message(s) : 40
    Evalla
    le Jeu 12 Mai 2016 - 16:20
    Merci
    FémininAge : 26Message(s) : 160
    Orochimaru
    le Ven 13 Mai 2016 - 9:33
    J'adore Very Happy Beau travail Very Happy Merci du partage Very Happy


    Orochimaru

    " Les proies doivent toujours faire preuve de la plus grande vigilance, lorsqu'elles tentent d'échapper à leur prédateur. Tout ce qu'une proie peut espérer de son prédateur, c'est qu'il daigne la laisser tranquille après avoir eu ce qu'il voulait."
    FémininAge : 30Message(s) : 4
    Lilinne
    le Sam 21 Mai 2016 - 11:31
    Merci pour ce magnifique PA Very Happy
    FémininAge : 20Message(s) : 46
    Little--Angel
    le Lun 23 Mai 2016 - 13:39
    J'aime beaucoup :)
    FémininAge : 24Message(s) : 41
    Idril Palanén
    le Mer 25 Mai 2016 - 4:48
    Merci pour ce LS que je trouve super ! Je vais surement l'utiliser pour mon forum ! Wink
    FémininAge : 26Message(s) : 741

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Chocolakato
    le Jeu 26 Mai 2016 - 8:07
    Merci


    FémininAge : 25Message(s) : 472

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Dydy
    le Jeu 26 Mai 2016 - 12:08
    merci du partage ♥


    FémininAge : 27Message(s) : 21
    Dragonia
    le Lun 6 Juin 2016 - 15:47
    merci ^^
    FémininAge : 24Message(s) : 72
    MeowLowDee
    le Mer 15 Juin 2016 - 3:44
    Je vais tester ça ! Merci :3
    MasculinAge : 17Message(s) : 71
    Applauze
    le Ven 17 Juin 2016 - 13:09
    Merci beaucoup !
    Contenu sponsorisé
    Aujourd'hui à 0:54

      La date/heure actuelle est Ven 30 Sep 2016 - 0:54