Discussion :

[dhillig]

Bonsoir,
J'ai un div placé à top 100% qui contient une animation (skill). Malheureusement l'animation est lancée dès l'ouverture de la page, et donc "invisible".
Comment faire pour que l'animation se lance uniquement quand le div qui la contient est visible ?
Ci-dessous le début de mon body :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container">
  <div class="logiciels">
    <div id="cbp-so-scroller" class="cbp-so-scroller">
      <section class="cbp-so-section">
        <figure class="cbp-so-side cbp-so-side-left"> <img src="images/2.png" alt="img01"> </figure>
        <article class="cbp-so-side cbp-so-side-right">
          <h2>InDesign</h2>
          <p>Texte</p>
          <ul id="skill">
            <li><span class="bar graphic-design"></span>
              <h3>50%</h3>
            </li>
          </ul>
        </article>

La classe "logiciels" à un

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

margin-top: 100%

Pour ce qui est de l'animation, en voici les CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
#skill {
	list-style: none;
	font: 50px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	width: 296px;
	margin-top: 50px;
	margin-right: auto;
	margin-left: 5px;
	margin-bottom: 0;
	position: relative;
	line-height: 2em;
	padding-top: 30px;
	padding-right: 0;
	padding-bottom: 30px;
	color: #D41D20;
}
#skill li {
	margin-bottom: 50px;
	background: #e9e5e2;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e1ddd9), to(#e9e5e2));
	background-image: -webkit-linear-gradient(top, #e1ddd9, #e9e5e2);
	background-image: -moz-linear-gradient(top, #e1ddd9, #e9e5e2);
	background-image: -ms-linear-gradient(top, #e1ddd9, #e9e5e2);
	background-image: -o-linear-gradient(top, #e1ddd9, #e9e5e2);
	background-image: linear-gradient(top, #e1ddd9, #e9e5e2);
	height: 50px;
	-moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
	-webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
	box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
}
#skill li h3 {
	position: relative;
	top: -25px;
}
.bar {
	height: 50px;
	margin: 1px 2px;
	position: absolute;
	-moz-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
	-webkit-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
	box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
}
.graphic-design {
	width: 50%;
	-moz-animation: graphic-design 2s ease-out;
	-webkit-animation: graphic-design 2s ease-out;
	background-color: #f674a4;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f674a4), to(#e06995));
	background-image: -webkit-linear-gradient(top, #f674a4, #e06995);
	background-image: -moz-linear-gradient(top, #f674a4, #e06995);
	background-image: -ms-linear-gradient(top, #f674a4, #e06995);
	background-image: -o-linear-gradient(top, #f674a4, #e06995);
	background-image: linear-gradient(top, #f674a4, #e06995);
}
 @-moz-keyframes graphic-design {
0% {
width:0px;
}
100% {
width:50%;
}
}
@-webkit-keyframes graphic-design {
0% {
width:0px;
}
100% {
width:50%;

Merci pour votre aide et bon week-end,
dh

[NoSmoking]

Bonjour,
affecte la classe qui prend en compte l'animation au moment où ton élément devient visible.

[dhillig]

Bonjour NoSmoking,
Merci pour ton aide mais c'est justement ce que je ne sais pas encore faire
Peux-tu m'en dire davantage ?
Merci et bon week-end,
dh

[NoSmoking]

Visiblement au fil de tes discussions tu n'en profites même pas pour apprendre

- Mettre un observateur sur le scroll de la page
- si le haut de l'élément, offsetTop, est inférieur à la position du scrollTop de la page + sa hauteur visible, clientHeight, alors ajout à l'élément de la class.

[dhillig]

Il est vrai que je n'ai pas progressé comme je le voudrais

[dhillig]

Et rien sur le net

[NoSmoking]

Ce n'est pas sur le net qu'il faut chercher, mais dans ta tête

Ma dernière contribution

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.addEventListener('scroll', function() {
  // récupération de la position du scroll
  var scrollY = 
  var basDePage = scrollY +
  // récupération élément devant être animé
  var oElem = 
  // récupération de la position du bas de l'élément
  var basElem = oElem.offsetTop +
  // si il est visible dans la page
  if( basElem < basDePage ){
    // ajout de la classe
    oElem.className += 'animation';
  }
});

[dhillig]

Je n'y comprends rien. Je vais continuer à chercher/comprendre...
Bonne soirée,
dh

[NoSmoking]

Je n'y comprends rien.

rempli juste ce qui manque, rien de bien complexe

[dhillig]

Slt NoSmoking,
Rien de bien complexe pour toi
Je comprends déjà a peine les scripts de base, mais je tente d'apprendre
Bonne journée,
dh

[dhillig]

j'abandonne !
Bonne soirée,
dh