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.


    Dévoiler la feuille de personnage cachée, avec un effet déroulant.

    Partagez
    avatar
    Invité

    le Ven 23 Nov 2012 - 16:50

    Bonjour, bonsoir !

    Alors je m'essaye à mon premier tuto ! Je vais vous proposer quelque chose qui, il me semble, n'a pas encore été soumis, à savoir cacher votre feuille de personnage pour ensuite la dévoiler avec un effet de déroulement fluide au passage de la souris sur une image.

    Cette astuce peut bien sûr être utilisée pour cacher également tout le profil sous l'avatar et bien d'autres choses ! Mais comme on trouve assez souvent des feuilles de personnage cachées grâce à un bouton et qui s'affiche d'un coup en cliquant dessus, j'ai voulu quelque chose de plus progressif.

    Exemple (l'image est animée, elle peut mettre un peu de temps à charger) : http://img30.imageshack.us/img30/7453/5v8.gif


    Tout d'abord il faut que vous ayez un compte fondateur sur votre forum forumactif et accès aux templates.

    Rendez-vous ici : Panneau d'admin -> Affichage -> Templates -> Général -> viewtopic_body

    Chercher la variable :
    Code:
    {postrow.displayed.POSTER_RPG}
    Elle correspond à votre feuille de personnage dans les messages.

    Ensuite, remplacez-la par ce code :
    Code:
    <div class="montrerfeuilleperso"><img src="URL DE VOTRE IMAGE">{postrow.displayed.POSTER_RPG}</div>
    N'oubliez pas de mettre l'adresse de votre image là où c'est indiqué dans le code. Pour que la suite du code fonctionne sans couper l'image, préférez une hauteur de 50px.

    Maintenant, enregistrez votre template et publiez-la.

    Rendez-vous ensuite dans Affichage -> Couleurs -> Onglet "Feuille de style CSS" et placez-y ce code :
    Code:
    .montrerfeuilleperso
    { height: 55px;
      text-align: center;
      overflow: hidden;
      transition: 2s;
    }
    .montrerfeuilleperso:hover
    { height: 310px;
      transition: 1s;
    }
    Et validez. Allez vérifier dans un message si l'effet escompté se produit bien. Passez votre souris sur l'image que vous avez choisie et normalement votre feuille de personnage (si active) doit s'afficher progressivement avec un effet de déroulement vers le bas sous l'image.

    N.B. : Vous pouvez ajuster tout ça via le CSS, à savoir si vous voulez une image plus haute que 50px ou moins grande, il suffit de changer ceci dans le CSS :
    Code:
    height: 55px;
    Pour réduire ou agrandir la zone qui se découvre au passage de la souris (si votre feuille de perso est coupée ou que le déroulement va beaucoup trop loin), c'est cette ligne qu'il faut changer :
    Code:
    height: 310px;
    Et puis, pour changer le temps que met le déroulement à s'effectuer, jouez avec les valeurs des transitions, dans mon exemple il s'agit des 2s et 1s mais vous pouvez mettre plus ou moins comme 4s (ce qui rend le déroulement plus long), par exemple.

    Enfin, vous pouvez encadrer votre feuille de personnage, simplement en retournant dans votre template et en y ajouter une classe que vous personnaliserez via le CSS. Placez votre classe là où c'est indiqué dans le code suivant et nommez-la (exemple: "contourfeuille")
    Code:
    <div class="montrerfeuilleperso"><img src="URL DE VOTRE IMAGE"><div class="NOM DE LA CLASSE POUR ENCADRER VOTRE FEUILLE">{postrow.displayed.POSTER_RPG}</div></div>
    Puis dans votre CSS, mettez par exemple :
    Code:
    .NOM DE LA CLASSE
    {border: 2px solid #000000; /* taille, style et couleur de la bordure du cadre */
      background-color: #000010; /* Couleur du fond du cadre */
      border-radius: 10px; /* Pour arrondir les angles */
    }
    Et c'est terminé !

    Voilà, j'espère que cette astuce vous sera utile et vous plaira, si vous avez des questions ou des problèmes avec le code, n'hésitez pas !  :friends:
    N'oubliez pas de créditer Never-Utopia si vous utilisez ce codage, merci.


    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Sycophante le Lun 9 Fév 2015 - 22:17, édité 9 fois
    avatar
    Okhmhaka
    FémininAge : 33Messages : 31851

    le Ven 23 Nov 2012 - 17:01

    Salut !

    Merci pour le partage de ce tutoriel Very Happy. C'est dommage que tu n'aies pas mis d'image-exemple, les gens aiment bien visualiser ce que ça donne concrètement... J'ai moi-même du lire le code car je n'avais pas saisi quelle était l'image, si tu utilisais l'avatar pour masquer le profil ou si c'était autre chose.
    C'est une bonne idée en tout cas et c'est gentil de ta part de le mettre à disposition, je t'en remercie x).



    avatar
    Invité

    le Ven 23 Nov 2012 - 17:05

    Je vais rajouter un lien d'ici ce soir pour qu'on puisse mieux visualiser, j'ai fais des petites manip sur mon forum test qui ont rendu ce code assez instable xD Donc, une fois que j'aurais corrigé cela, je pourrai proposer un exemple concret. =)
    avatar
    Okhmhaka
    FémininAge : 33Messages : 31851

    le Ven 23 Nov 2012 - 17:09

    Parfait, je te remercie x).



    avatar
    Invité

    le Ven 23 Nov 2012 - 18:32

    Comme promis, j'ai édité le tuto pour y mettre un lien afin de mieux visualiser le résultat. Wink
    avatar
    Okhmhaka
    FémininAge : 33Messages : 31851

    le Sam 24 Nov 2012 - 0:24

    C'est nickel ! Je pense que les gens visualiseront mieux ainsi, c'est plus attrayant également. Merci beaucoup Very Happy



    avatar
    Invité

    le Sam 24 Nov 2012 - 2:31

    Ce n'est pas grand chose ^^ Après tout, si j'ai réussi à faire ça, c'est en partie grâce à ce que j'ai appris ici via les tutos des membres donc si je peux rendre un peu l'appareil, hein =)
    avatar
    Okhmhaka
    FémininAge : 33Messages : 31851

    le Sam 24 Nov 2012 - 12:25

    N'empêche que peu de personnes prennent la peine de le faire, donc les remerciements sont largement mérités, ça fait plaisir x)



    avatar
    Electro
    FémininAge : 22Messages : 30

    le Sam 24 Nov 2012 - 15:12

    merci
    avatar
    Suika
    FémininAge : 23Messages : 30

    le Mar 27 Nov 2012 - 20:48

    trop cool *-* je cherchais ce code depuis des jouuuuurs!

    Edit : c'est normal que ça ne marche pas du tout chez moi ? ^^' J'ai tout fait comme tu avais dit, et mon image (même si elle fait 50px de hauteur) est toute grande ? et on ne voit pas les infos de la feuille de personnage ^^''
    avatar
    Invité

    le Mar 27 Nov 2012 - 21:17

    Ah, ça me l'a fait aussi une fois pour l'image qui grossie, j'avais limité les images du profil à 200px de largeur et ça avait donc élargie l'image pour la feuille. Pour régler ça, j'ai tout simplement édité ma template, là où tu places ton image et j'ai ajusté la largeur, comme ceci :
    Code:
    <img src="URL DE VOTRE IMAGE" style="width: largeur de l'image en pixel;">

    Le pb était réglé. Pour t'aider pour le reste, j'ai besoin de plus d'infos, car je ne vois pas quel peut être le soucis =/ Normalement, en suivant bien les étapes du tuto, il n'y a aucun pb, je l'ai reproduis moi-même sur un forum tout neuf, qui est d'ailleurs en exemple =)
    avatar
    Spike
    MasculinAge : 23Messages : 64

    le Ven 30 Nov 2012 - 0:25

    Merci beaucoup ! Je cherchais cet effet depuis quand même pas mal de temps Very Happy
    avatar
    Ilmryn
    FémininAge : 21Messages : 36

    le Sam 1 Déc 2012 - 13:37

    Merci du partage, cela risque de m'être utile ^^



    avatar
    Eden.
    FémininAge : 25Messages : 201

    le Ven 7 Déc 2012 - 9:51

    Merci beaucoup (:
    avatar
    Kitsuki
    FémininAge : 18Messages : 22

    le Dim 9 Déc 2012 - 4:22

    Sa va .. Peut être me servir si un jour je comprends les feuilles de personnages xD Merci du partage !
    avatar
    Immortal
    FémininAge : 31Messages : 631

    le Dim 9 Déc 2012 - 20:09

    Formidableeeeee ** Merci d'avoir partagé ce code **




    Besoin d'avis pour un futur forum multi-univers.
    Promis je suis ouverte aux critiques comme aux solutions
    :love:
    CLICK
    avatar
    Invité

    le Dim 9 Déc 2012 - 21:49

    A vot' service. :)
    avatar
    Nayero
    MasculinAge : 22Messages : 38

    le Lun 10 Déc 2012 - 15:03

    merci



    avatar
    Rosedesvents
    FémininAge : 31Messages : 96

    le Mer 12 Déc 2012 - 11:35

    Merci beaucoup ! J'adore l'effet progressif comme celui là Very Happy
    avatar
    Natsuya Gaïaguard
    FémininAge : 27Messages : 144

    le Mer 12 Déc 2012 - 12:10

    j'adore je vais surement l'utiliser sur mon forum



    avatar
    Stanislava
    FémininAge : 22Messages : 102

    le Mer 12 Déc 2012 - 13:13

    Han, c'est super Ö, merci c:



    avatar
    Himmie
    MasculinAge : 21Messages : 128

    le Mer 12 Déc 2012 - 20:52

    merchiiiiiiiiiiiiiiiiiiiiiiiiiiii
    avatar
    Miss Ryuichi
    FémininAge : 26Messages : 34

    le Sam 15 Déc 2012 - 10:46

    Super ! arigato ♥
    avatar
    Akiki
    FémininAge : 19Messages : 24

    le Dim 23 Déc 2012 - 19:50

    Merci
    avatar
    Chucky'
    MasculinAge : 20Messages : 80

    le Dim 30 Déc 2012 - 17:44

    merci ^^



    Contenu sponsorisé


      La date/heure actuelle est Mer 20 Juin 2018 - 9:33