Ligne animé en css
Fermé
Utilisateur anonyme
-
11 mars 2015 à 06:22
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 17 mars 2015 à 15:34
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 17 mars 2015 à 15:34
A voir également:
- Css ligne horizontale
- Aller à la ligne excel - Guide
- Ligne horizontale - Guide
- Partager photos en ligne - Guide
- Site de vente en ligne particulier - Guide
- Apparaitre hors ligne instagram - Guide
3 réponses
Shuta
Messages postés
210
Date d'inscription
samedi 28 février 2015
Statut
Membre
Dernière intervention
11 mars 2021
3
12 mars 2015 à 14:29
12 mars 2015 à 14:29
En css il faut utiliser un hover.
Sinon, tu peut faire l'animation basiquement via css grace a
transition-property et transition-duration
Tu fais une div avec un background d'une couleur avec une largeur définie et quand tu définis le fait de passer la souris dessus, tu modifies la propriété grace aux transition citée ci dessus. Un exemple :
Je penses qu'avec ça tu devrais t'en sortir. Il suffit que tu changes les propriétés que tu veux modifier.
En espérant t'avoir aidé,
_____
Shuta
Sinon, tu peut faire l'animation basiquement via css grace a
transition-property et transition-duration
Tu fais une div avec un background d'une couleur avec une largeur définie et quand tu définis le fait de passer la souris dessus, tu modifies la propriété grace aux transition citée ci dessus. Un exemple :
<style type="text/css">
div {
background-color: #000;
height: 200px;
width: 3px;
transition-property: background, width; /* Je défini ce sur quoi je veux faire le changement */
transition-duration: 1s; /* La transition durera 1 seconde. */
}
div:hover {
width: 200px;
}
</style>
<div></div>
Je penses qu'avec ça tu devrais t'en sortir. Il suffit que tu changes les propriétés que tu veux modifier.
En espérant t'avoir aidé,
_____
Shuta
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
Modifié par animostab le 12/03/2015 à 18:46
Modifié par animostab le 12/03/2015 à 18:46
salut
si l'animation démarre directement au chargement de page pourquoi la faire demarrer au scroll? ---> elle est deja démarrée et affichée
bon pour le srcoll (en jquery car css on ne peux pas)
le html (obligation de mettre la div move1 qui apparait dans une div (move) car offset() ne peut se faire sur une div en display none
le css
le jquery
voila
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
si l'animation démarre directement au chargement de page pourquoi la faire demarrer au scroll? ---> elle est deja démarrée et affichée
bon pour le srcoll (en jquery car css on ne peux pas)
le html (obligation de mettre la div move1 qui apparait dans une div (move) car offset() ne peut se faire sur une div en display none
<div id="move"> <div id="move1"><h1>le texte apparait</h1><p>texte texte</p><p>texte texte</p><p>texte texte</p><p>texte texte</p><p>texte texte</p></div> </div>
le css
#move1 {display:none;}
le jquery
<script>
$(document).ready (function(){
$(window).scroll (function(){
var divofset = $("#move").offset().top;
var scrolling = $(window).scrollTop();
var scrolling1 = (scrolling + 100) ;
if (divofset <= scrolling1) {$("#move1").show("2000");
}
else {$("#move1").hide("1000");}
})
})
</script>
voila
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
Modifié par animostab le 12/03/2015 à 19:23
Modifié par animostab le 12/03/2015 à 19:23
petite modif pour eviter l'evenement plusieur fois si visible ou hidden j'avais pas vu l'histoire de la ligne
donc
html
</div>
css
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
donc
html
<div id="move"> <div id="move1"></div>
</div>
css
#move1 {display:none; height:200px; width:5px; background:black;margin:0 auto;}
<script>
$(document).ready (function(){
$(window).scroll (function(){
var divofset = $("#move").offset().top;
var scrolling = $(window).scrollTop();
var scrolling1 = (scrolling + 10) ;
if (divofset <= scrolling1) {$("#move1:hidden").show("3000");
}
else {$("#move1:visible").hide("1000");}
})
})
</script>
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
17 mars 2015 à 15:34
17 mars 2015 à 15:34
et merci ca t'arracherait la bouche ?
