Ligne animé en css
Utilisateur anonyme
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
Bonjour, je cherche a créer une ligne vertical qui apparait progressivement
(0 à 200px)
cette animation se trouvant au milieu de la page j' aimerai qu' elle se déclenche
uniquement lorsque l' utilisateur arrive au niveau de la ligne
pour ce qu' y est de l' animation en elle même je n' arrive pas à faire en sorte que l' animation se déclenche toute seule ( j' y arrive en hover ou au click ) mais comment faire pour qu' elle démarre automatiquement ? ( en css bien sur)
pour ce qu' y est de l' activation au scroll il me semble qu' avec une fonction .scroll en jQuery suffit avec le positionnement de la ligne dans la page mais comment faire pour que cette animation se répète à chaque fois que l' on revient au niveau de la ligne ? et non pas une seule fois ...
merci à vous
(0 à 200px)
cette animation se trouvant au milieu de la page j' aimerai qu' elle se déclenche
uniquement lorsque l' utilisateur arrive au niveau de la ligne
pour ce qu' y est de l' animation en elle même je n' arrive pas à faire en sorte que l' animation se déclenche toute seule ( j' y arrive en hover ou au click ) mais comment faire pour qu' elle démarre automatiquement ? ( en css bien sur)
pour ce qu' y est de l' activation au scroll il me semble qu' avec une fonction .scroll en jQuery suffit avec le positionnement de la ligne dans la page mais comment faire pour que cette animation se répète à chaque fois que l' on revient au niveau de la ligne ? et non pas une seule fois ...
merci à vous
A voir également:
- Css ligne horizontale
- Ligne horizontale word - Guide
- Partager photos en ligne - Guide
- Insérer une ligne horizontale avec Word 2010 - Guide
- Mètre en ligne - Guide
- Aller à la ligne excel - Guide
3 réponses
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
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.
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.
