Ligne animé en css [Fermé]

Signaler
Messages postés
34
Date d'inscription
jeudi 5 février 2015
Statut
Membre
Dernière intervention
6 août 2016
-
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
-
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




3 réponses

Messages postés
210
Date d'inscription
samedi 28 février 2015
Statut
Membre
Dernière intervention
11 mars 2021
4
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 :

<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
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
653
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

<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.
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
653
petite modif pour eviter l'evenement plusieur fois si visible ou hidden j'avais pas vu l'histoire de la ligne
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.
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
653
et merci ca t'arracherait la bouche ?