Bonsoir,
boteha_2 a écrit :
:target est fait pour cela non ?
:hover, tu passes sur le lien, le comportement se fait, tu repasses tout de suite sur le même lien, il se refait.
Pourquoi pas avec :target ?
Voir ligne fixe en bas de page
+1000..... pour le lien. Maintenant, je commence à bien comprendre ce que tu veux faire. Sache que dans tes réponses je vois une méconnaissance mais surtout je vois que tu acquiers de bonnes pratiques (je vais développer mes propos). Si c'est toi qui a intégré cette page, ça a l'air pas mal. Il y a un petit souci h2 avant h1. Après je me suis pas plongé dans le code. La question initiale n'est pas tout à fait là, n'est ce pas ?
Bref, ton problème est complexe est simple à la fois. je vais essayer de t'expliquer la différence entre les transitions, animations et :target. Ensuite tu vas comprendre où je veux en venir :
:target (pseudo class css 3).
Comme je te l'ai dit target se base sur l'url (!) Si tu retires l'id dans l'url, la page et ton élément html ciblé reviennent à l'état initial.
animation (css 3) :
C'est une manière simple pour animer un élement dans la page suivant un évènement
"ou pas" (J'ai mis "ou pas" entre guillemets parce qu'il y a de toute manière un évènement : chargement de la page). Le gros bémol, animation-name est lié étroitement à une autre règle css qui est : animation-iteration-count. Cette règle définit le nombre de fois qu'une animation doit être lancer. Par défaut la valeur est de 1. Ci dessous, je t'indique les principaux paramètres que cette règle accepte (sache que j'en oublie surement. Je t'invite à faire un tour sur la
mdn par exemple afin de regarder de plus près cette règle).
animation-iteration-count:5; //l'animation se lancera 5 fois
animation-iteration-count:infinite; //répété indéfiniment
animation-iteration-count:2.3; //répété 2 fois et 30% de l'animatiion
transition (css 3) :
Premièrement je te conseille de lire cet article :
Transitions CSS3
et ensuite relire ce que je t'ai dit à ce sujet :
niuxe a écrit :
Tu es bien d'accord avec moi que nous sommes dans un cas où l'élément change de comportement lorsque survient un évènement dans le document, n'est ce pas ? De ce fait, les transitions sont plus appropriées
niuxe a écrit :
Ton réel souci maintenant est lorsque Mme Michu clique (évènement) pour lire le contenu de :target (élément cible), il faut qu'au bout d'un moment, l'élément target (élément cible) revienne à l'état initial.
* J'ai rajouté des commentaires entre parenthèses afin que tu vois ce que je veux dire.
boteha_2 a écrit :
S'il faut mettre du javascript c'est quand même dommage alors que l'on si proche du résultat en CSS.
+100... pour cet argument. Comme je t'ai dit plus haut tu acquiers des bonnes pratiques. Pourquoi ? Tu penses d'abords html et css avant de penser au js.
Quand plus haut je te parle de complexité nous y venons. Tu souhaites que lorsque madame michu clique sur une ancre interne, il y ait comme une mise en évidence éphémère sur la zone de lecture. Fait attention que ça ne fasse pas sapin de noël. Noël c'est dans un peu moins de 6 mois et j'ai pas encore écrit ma lettre pour le vieux barbu.
Si tu commences à comprendre le fonctionnement de target, des animations et des transtions, tu vois que ces règles et ce ciblage ne répondent pas vraiment à l'effet que tu veux obtenir. Mon approche js répond à ton besoin mais cela nécessite cette technologie. En css, tu ne pourras que cibler et appliquer du static (pratiquement aucune règle attrait à l'interaction).
Ton idée générale pour implémenter cette fonctionnalité est bonne. Mais attention :
Au fur et à mesure que le sujet évolue, je m'aperçois que tu devrais prendre connaissance de ce sujet et de ses liens annexes :
[Résolu] La beauté d'une police participe-t-elle à sa lisibilité . Tu vas comprendre pourquoi je te mets en garde.
Modifié par niuxe (19 Jul 2015 - 04:31)
