AccueilDernières imagesRechercherS'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.


    (Onyx) Juste un effet de transition

    Kiki85
    Kiki85
    MasculinAge : 29Messages : 398

    Mar 14 Fév 2017 - 12:43

    Hello ! je ne sais pas si je devais poster ici ou dans "codage d'un élément du forum"... Embarassed

    Je voulais juste savoir comment fait-on la transition (vous savez souvent pour le hover des sous-forums) où l'image s'ouvre en deux là comme une porte (en gros elle est découpée en deux et la partie droite va vers la droite, la gauche vers la gauche).

    Je ne sais pas si c'est clair xD
    Je pense que c'est assez simple à faire (j'imagine) mais je ne sais pas comment x)

    Pouvez-vous m'aider ?
    Merci beaucoup :love:
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 16 Fév 2017 - 5:42

    Salut!

    Comme cela? :


    Ex his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum. quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos... statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare.

    Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo, levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine spiramento ullo ad usque praetorium traxere praefecti.

    Itaque tum Scaevola cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, paucis diebus post mortem Africani. Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur.



    • Revenir en haut
    Kiki85
    Kiki85
    MasculinAge : 29Messages : 398

    Ven 17 Fév 2017 - 22:24

    Hey ! EXACTEMENT ! Very Happy
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 17 Fév 2017 - 22:43

    Salut!

    Je suppose que tu parles de description de forum quand tu parles de sous-forums, alors voilà les codes :

    CSS :
    Code:
    /*Bloc de description de forum*/
    .ondesc {
      position: relative;
      width: 200px; /*Largeur*/
      height: 100px; /*Hauteur*/
      border: 3px solid #a3a3a3;
      overflow: hidden; /*Cache les images qui sortent du cadre*/
      margin: auto;
    }
    /*Les images de la description*/
    .ondesc_img {
      position: absolute;
      top: 0px;
      background-size: 200% 100%;
      width: 50%;
      height: 100%;
      z-index: 5;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }
    /*Partie de gauche de image de la description*/
    .ondesc_img1 {
      left: 0px;
      background-position: top left;
    }
    /*Partie de droite de image de la description*/
    .ondesc_img2 {
      right: 0px;
      background-position: top right;
    }
    /*Texte de la description*/
    .ondesc_text {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 190px;
      height: 90px;
      z-index: 3;
      overflow: auto;
      padding: 5px;
      background-color: #656565;
      color: #c4c4c4;
      font-size: 12px;
      font-family: 'Times New Roman';
    }

    /*Déplacement des images au survol*/
    .ondesc:hover .ondesc_img1 {
      left: -50%;
    }
    .ondesc:hover .ondesc_img2 {
      right: -50%;
    }

    Et le code à mettre dans la description de forum :
    Code:
    <div class="ondesc"><div class="ondesc_img ondesc_img1" style="background-image: url('https://2img.net/u/2915/57/91/98/avatars/17553-29.jpg');"></div><div class="ondesc_img ondesc_img2" style="background-image: url('https://2img.net/u/2915/57/91/98/avatars/17553-29.jpg');"></div><div class="ondesc_text">Ex his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo.</div></div>

    En bref, tu mets 2 fois la même image et le CSS s'occupera de les couper au bon endroit pour que chaque image montre juste la partie de gauche et juste la partie de droite de l'image. Ensuite, le mouvement au survol est le même type de mouvement à droite ou à gauche qu'à l'habituel. Dis-moi si ça fonctionne ~



    • Revenir en haut
    Kiki85
    Kiki85
    MasculinAge : 29Messages : 398

    Dim 19 Fév 2017 - 14:02

    Hello ! Non je parle du hover des sous forums, non pas des description.
    Genre j'ai une case avec une image style "les sous-forums" , tu passes devant ça donne cet effet pour pouvoir accéder aux liens des sous-fo des catégories (je sais pas si je suis clair).

    Je te passe le lien du fo: http://logovokolduna.forumactif.org/ (l'image des sous-fo n'a pas encore sa taille définitive mais c'est pas grave. C'est là où c'est écrit "révèle tous tes secrets"),
    ainsi que le morceau de template concerné:



    En espérant que ça t'aide à comprendre xD Je ne suis pas super clair
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 21 Fév 2017 - 7:16

    Oh...

    Ok, bah on va juste modifier les noms des classes pour que ça fonctionne avec les sous-forums et tout sera bon ^^

    Du coup, cela donne ceci pour le template :
    Code:
    <td><div class="bloc_sf"><div class="onsf_img onsf_img1" style="background-image: url('http://img11.hostingpics.net/pics/982909CcouvHovercleeef.jpg');"></div><div class="onsf_img onsf_img2" style="background-image: url('http://img11.hostingpics.net/pics/982909CcouvHovercleeef.jpg');"></div>
    <div class="onsf_links">
    <img src="http://img15.hostingpics.net/pics/744594TRANSP.png" alt="fond_sforum" class="fond_sforum" />
              <div class="s_forum" id="s_forum">
                <span class="LienDs_forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span><br/>
                <script type="text/javascript">jQuery('#s_forum').html(jQuery('#s_forum').html().replace(/, /g,'<br />')).removeAttr('id');</script>
        </div></div></div></td>

    Et ce CSS :
    Code:
    /*Bloc de description de forum*/
    .bloc_sf {
      position: relative;
      width: 200px; /*Largeur à modifier*/
      height: 100px; /*Hauteur à modifier*/
      overflow: hidden;
    }
    /*Les images*/
    .onsf_img {
      position: absolute;
      top: 0px;
      background-size: 200% 100%;
      width: 50%;
      height: 100%;
      z-index: 5;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }
    /*Partie de gauche de image*/
    .onsf_img1 {
      left: 0px;
      background-position: top left;
    }
    /*Partie de droite de image*/
    .onsf_img2 {
      right: 0px;
      background-position: top right;
    }
    /*Bloc qui contient juste les liens*/
    .onsf_links {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      z-index: 3;
    }

    /*Déplacement des images au survol*/
    .bloc_sf:hover .onsf_img1 {
      left: -50%;
    }
    .bloc_sf:hover .onsf_img2 {
      right: -50%;
    }



    • Revenir en haut
    Kiki85
    Kiki85
    MasculinAge : 29Messages : 398

    Mar 21 Fév 2017 - 11:07

    Ca marche parfaitement, je te remercie beaucoup !
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Jeu 2 Mar 2017 - 17:30

    Super ! Merci Onyx *-*, j'archive le sujet :)

    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Lun 25 Nov 2024 - 4:07