Comment lancer une animation uniquement quand le div est visible ?

Version imprimable

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:

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:

margin-top: 100%

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

Code:

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

09/04/2016, 09h52
NoSmoking

Bonjour,
affecte la classe qui prend en compte l'animation au moment où ton élément devient visible.
09/04/2016, 11h07
dhillig

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

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

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

- 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.
09/04/2016, 14h26
dhillig

Il est vrai que je n'ai pas progressé comme je le voudrais :oops:
09/04/2016, 16h03
dhillig

Et rien sur le net :weird:

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

Ma dernière contribution

Code:

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';
  }
});

09/04/2016, 18h41
dhillig

8O Je n'y comprends rien. Je vais continuer à chercher/comprendre...
Bonne soirée,
dh
14/04/2016, 09h37
NoSmoking

Citation:

Je n'y comprends rien.

rempli juste ce qui manque, rien de bien complexe :D
14/04/2016, 10h52
dhillig

Slt NoSmoking,
Rien de bien complexe pour toi :(
Je comprends déjà a peine les scripts de base, mais je tente d'apprendre 8-)
Bonne journée,
dh
19/04/2016, 21h03
dhillig

j'abandonne !
Bonne soirée,
dh