Animation bouton de naviguation.

4 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Animation bouton de naviguation.

Message par hugo0504 Ven 8 Juil 2016 - 14:46

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis "l'installation" du thème.
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,
J'ai décidé d'installer sur mon forum un thème qui ne contenait pas de fichier bbtheme (donc installer les images une à une grâce au PA).
J'ai pris les images sur ce site: http://demo.phpbb3styles.net/ultra_light
Mais voilà, je n'arrive pas à reproduire l'effet de transition sur la barre de naviguation.
Je suppose qu'il faut un code pour y parvenir.
(J'ai entendu parler de "background-position" mais je n'y connais pas grand chose donc...)
Quelqu'un aurait-il connaissance de celui-ci?

(Je tiens à préciser que les "2" boutons tiennent sur une seule image)

Merci d'avance pour votre aide.


Dernière édition par hugo0504 le Mar 12 Juil 2016 - 13:03, édité 1 fois
hugo0504

hugo0504
Nouveau membre

Messages : 5
Inscrit(e) le : 08/07/2016

http://jeuxnintendo-eternel.forumactif.org
hugo0504 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation bouton de naviguation.

Message par ◦Jay◦ Ven 8 Juil 2016 - 17:19

Bonjour hugo0504, il vous faut mettre une transition entre les images, comme ceci(vous pouvez régler le temps de transition à votre convenance, ici.4s) :


Code:
{
    -moz-transition: all .4s linear;
    -ms-transition: all .4s linear;
    -o-transition: all .4s linear;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}

Bien à vous
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation bouton de naviguation.

Message par Neptunia Ven 8 Juil 2016 - 17:47

Bonjour ^^

Indépendamment de l'effet de transition entre les deux états du bouton, le code CSS ressemble à ceci (ici le bouton index)

Code:
#i_icon_mini_index{width:67px; height:40px; background:url("http://www.hebergeur.com/image.png") no-repeat 0 -161px;}
#i_icon_mini_index:hover{background:url("http://www.hebergeur.com/image.png") no-repeat 0 -201px;}
#i_icon_mini_index:active{background:url("http://www.hebergeur.com/image.png") no-repeat 0 -41px;}
- La première définition concerne le bouton à l'état normal. On y définit la largeur et la hauteur de chaque "bouton".
L'attribut no-repeat comporte deux valeurs, la première est le décalage horizontal par rapport au côté gauche de l'image, ici 0 donc c'est la portion d'image la plus à gauche de l'image. La seconde valeur correspond au décalage vertical par rapport au bord supérieur de l'image, ici -41px.

La seconde définition concerne le bouton survolé, seul le décalage vertical change, ici -201px mais j'ai une barre de navigation à douze états. Dans le cas le plus courant (2 boutons un au dessus de l'autre) le décalage vertical correspond à la moitié de la hauteur totale de l'image.

La troisième définition correspond quant à elle au bouton au moment du clic.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation bouton de naviguation.

Message par hugo0504 Sam 9 Juil 2016 - 17:42

Bonjour,
Merci pour vos réponses! ^^

Hum.. si j'ai bien compris le code donne cela?
Code:
#i_icon_mini_index{width:67px; height:40px; background:url("http://www.hebergeur.com/image.png") no-repeat 0 -161px;}
{
    -moz-transition: all .4s linear;
    -ms-transition: all .4s linear;
    -o-transition: all .4s linear;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}
#i_icon_mini_index:hover{background:url("http://www.hebergeur.com/image.png") no-repeat 0 -201px;}
#i_icon_mini_index:active{background:url("http://www.hebergeur.com/image.png") no-repeat 0 -41px;}

Car cela ne change rien pour moi :/
J'ai toujours l'image avec le bouton normal et le bouton quand la souris survole l'image.

(Une autre question: dois-je mettre les images dans la gestion des images? )
hugo0504

hugo0504
Nouveau membre

Messages : 5
Inscrit(e) le : 08/07/2016

http://jeuxnintendo-eternel.forumactif.org
hugo0504 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation bouton de naviguation.

Message par Neptunia Sam 9 Juil 2016 - 23:10

Dans la gestion des images, vous ne mettez aucune image sinon c'est celle-ci qui apparaîtra en avant-plan. Le CSS utilisant des images de fond elles se positionneraient dessous l'image du panneau admin.

Alors le code est bon, à quatre détails près.

1/ Vous devez remplacer http://www.hebergeur.com/image.png par l'adresse de votre image.
2/ Vous devez remplacer width:67px; height:40px respectivement par la largeur d'un "état" et par la hauteur. Si toutes les images sont calquées sur le même modèle, largeur d'un état = largeur de l'image, hauteur d'un état = la moitié de la hauteur de l'image qui contient 2 états.
3/ no-repeat 0 -161px;} / no-repeat 0 -201px;} Même remarque il faut modifier les valeurs selon vos propres images. Typiquement l'une des images à un no-repeat 0 0;} pour l'état du haut et un no-repeat 0 -Ypx;} avec Y = la hauteur d'un état. Si votre image fait 60px sur 50px de hauteur, vous obtiendriez no-repeat 0 -25px;} pour afficher la partie basse de l'image.
4/ La partie :active de votre CSS ne sert pas à grand chose si vous avez des boutons à deux états. Pour en profiter pleinement il faut des boutons avec au minimum 3 états.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation bouton de naviguation.

Message par ◦Jay◦ Dim 10 Juil 2016 - 8:03

Bonjour hugo0504, comme dit Neptunia, vous devez supprimer les images de votre P.A., voici en exemple pour que ce soit plus explicite, votre bouton "forum" :

La partie du bouton à l'état statique :

Code:
#i_icon_mini_index {
    background: url(http://i35.servimg.com/u/f35/19/25/76/19/forum10.jpg) no-repeat 0 0;
    height: 30px;
    width: 80px;}


La partie de votre bouton à l'état survolé :

Code:
#i_icon_mini_index:hover {
    background: url(http://i35.servimg.com/u/f35/19/25/76/19/forum10.jpg) no-repeat 0px -30px;
}

Vous pourriez ajouter la transition à chaque bouton mais cela ferait plus long de code, il serait donc mieux de faire comme ceci :

Pour la transition :

Code:
#i_icon_mini_index{
    -moz-transition: all .4s linear;
    -ms-transition: all .4s linear;
    -o-transition: all .4s linear;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}

Maintenant, il vous reste à faire les autres boutons et donc, changer l'adresse de l'image à chaque fois, vous avez de la chance car les boutons font la même taille, il faut donc seulement changer l'adresse de l'image, pour le bouton portail, ça donnera ça :

Code:
#i_icon_mini_portal {
    background: url(http://i35.servimg.com/u/f35/19/25/76/19/portai12.jpg) no-repeat 0 0;
    height: 30px;
    width: 80px;}
#i_icon_mini_portal:hover {
    background: url(http://i35.servimg.com/u/f35/19/25/76/19/portai12.jpg) no-repeat 0px -30px;
}

Sans oublier la transition, qui sera donc comme ceci :

Code:
#i_icon_mini_portal{
    -moz-transition: all .4s linear;
    -ms-transition: all .4s linear;
    -o-transition: all .4s linear;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}

Vous l'aurez compris, la transition est la même à chaque fois, donc pour le code de transition, vous le ferez comme ceci(en ajoutant l'ID séparé d'une virgule à chaque fois) :

Code:
#i_icon_mini_index,#i_icon_mini_portal{
    -moz-transition: all .4s linear;
    -ms-transition: all .4s linear;
    -o-transition: all .4s linear;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}

Si vous regardez le forum de mon profil, la barre sur le côté "voir les nouveaux messages" est faite comme ceci, l'effet est seulement plus rapide.

Bien à vous.
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation bouton de naviguation.

Message par hugo0504 Dim 10 Juil 2016 - 14:09

L'effet de transition est là!
Mais quand il s'effectue le bouton bouge (il monte). Il n'est pas possible de le laisser statique mais d'avoir quand même l'effet?
Je remts ici mon code au cas où ^^
Code:
#i_icon_mini_index {
    background: url(http://i35.servimg.com/u/f35/19/25/76/19/forum10.jpg) no-repeat 0 30px;
    height: 60px;
    width: 80px;}
#i_icon_mini_index:hover {
    background: url(http://i35.servimg.com/u/f35/19/25/76/19/forum10.jpg) no-repeat 0px -30px;
}

#i_icon_mini_index{
    -moz-transition: all .4s linear;
    -ms-transition: all .4s linear;
    -o-transition: all .4s linear;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}
(J'ai bien sûr fait cela avec tous les boutons)
Je tiens à préciser que j'ai mis "30px" sur le bouton initiale car je ne veux avoir que le haut du bouton.
hugo0504

hugo0504
Nouveau membre

Messages : 5
Inscrit(e) le : 08/07/2016

http://jeuxnintendo-eternel.forumactif.org
hugo0504 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation bouton de naviguation.

Message par ◦Jay◦ Dim 10 Juil 2016 - 14:14

Vous vous trompez dans la taille du bouton vous mettez :

height: 60px;
width: 80px;

Alors que c'est :

height: 30px;
width: 80px;}
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation bouton de naviguation.

Message par ◦Jay◦ Dim 10 Juil 2016 - 14:16

Et aussi, vous mettez :

Code:
#i_icon_mini_index {
    background: url(http://i35.servimg.com/u/f35/19/25/76/19/forum10.jpg) no-repeat 0 30px;

Alors que c'est :

Code:
#i_icon_mini_index {
    background: url(http://i35.servimg.com/u/f35/19/25/76/19/forum10.jpg) no-repeat 0 0px;

◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation bouton de naviguation.

Message par hugo0504 Dim 10 Juil 2016 - 14:35

Un grand merci à vous deux, j'obtiens ce que je voulais Smile .
J'aurai besoin d'une dernière aide, j'ai réussi à trouver les id des boutons de naviguation sur une astuce de forumactif.
Mais je ne connais pas les id des boutons nouveau,répondre,editer,citer,vérouillé,etc...
Auriez-vous une idée sur où je pourrais les trouver?
Merci pour le temps que vous m'accordez.
hugo0504

hugo0504
Nouveau membre

Messages : 5
Inscrit(e) le : 08/07/2016

http://jeuxnintendo-eternel.forumactif.org
hugo0504 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation bouton de naviguation.

Message par ◦Jay◦ Dim 10 Juil 2016 - 14:41

Pour les boutons nouveau, répondre et verrouillé, vous pouvez regarder ce sujet, pour les autres, vous pouvez soit utiliser l'astuce du bouton verrouillé soit positionner la souris sur l'image que vous souhaitez modifier, faire un clic droit puis inspecter l'élément et noter l'ID ou la class.
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation bouton de naviguation.

Message par hugo0504 Mar 12 Juil 2016 - 13:03

Compris! ^^
Merci.
hugo0504

hugo0504
Nouveau membre

Messages : 5
Inscrit(e) le : 08/07/2016

http://jeuxnintendo-eternel.forumactif.org
hugo0504 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation bouton de naviguation.

Message par Chacha Mar 12 Juil 2016 - 13:15

Animation bouton de naviguation. 4qhGdLE
Bienvenue sur le forum de support de Forumactif

Bonjour,

Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser :
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum