スクロールしてある要素が画面に入った時にその要素をJSで出現させたい。

JSでスクロールしたときにクラスを追加したい。

appear downまでスクロールしたときにinviewクラスをappear downに追加して要素を出現させたい。

発生している問題・エラーメッセージ

要素が出現しない。

該当のソースコード

HTML
1<div class="picture">
2          <div class="appear down">
3            <div class="item"><img src="img/thanks.jpg" alt=""></div>
4            <div class="item"><img src="img/thanks.jpg" alt=""></div>
5            <div class="item"><img src="img/thanks.jpg" alt=""></div>
6            <div class="item"><img src="img/thanks.jpg" alt=""></div>
7          </div>
8        </div>

CSS
1.appear.up .item {
2  -webkit-transform: translateY(6px);
3          transform: translateY(6px);
4}
5
6.appear.down .item {
7  -webkit-transform: translateY(-6px);
8          transform: translateY(-6px);
9}
10
11.appear.left .item {
12  -webkit-transform: translateX(40px);
13          transform: translateX(40px);
14}
15
16.appear.right .item {
17  -webkit-transform: translateX(-40px);
18          transform: translateX(-40px);
19}
20
21.appear .item {
22  -webkit-transition: all 0.8s;
23  transition: all 0.8s;
24  opacity: 0;
25}
26
27.appear.inview .item {
28  opacity: 1;
29  -webkit-transform: none;
30          transform: none;
31}
32
33.appear.inview .item:nth-child(1) {
34  -webkit-transition-delay: 0.1s;
35          transition-delay: 0.1s;
36}
37
38.appear.inview .item:nth-child(2) {
39  -webkit-transition-delay: 0.2s;
40          transition-delay: 0.2s;
41}
42
43.appear.inview .item:nth-child(3) {
44  -webkit-transition-delay: 0.3s;
45          transition-delay: 0.3s;
46}
47
48.appear.inview .item:nth-child(4) {
49  -webkit-transition-delay: 0.4s;
50          transition-delay: 0.4s;
51}
52
53.appear.inview .item:nth-child(5) {
54  -webkit-transition-delay: 0.5s;
55          transition-delay: 0.5s;
56}
57
58.appear.inview .item:nth-child(6) {
59  -webkit-transition-delay: 0.6s;
60          transition-delay: 0.6s;
61}
62
63.appear.inview .item:nth-child(7) {
64  -webkit-transition-delay: 0.7s;
65          transition-delay: 0.7s;
66}
67
68.appear.inview .item:nth-child(8) {
69  -webkit-transition-delay: 0.8s;
70          transition-delay: 0.8s;
71}
72
73.appear.inview .item:nth-child(9) {
74  -webkit-transition-delay: 0.9s;
75          transition-delay: 0.9s;
76}
77
78.appear.inview .item:nth-child(10) {
79  -webkit-transition-delay: 1s;
80          transition-delay: 1s;
81}
82/*# sourceMappingURL=style.css.map */

試したこと

JavaScript
1$('.appear').each(function () {
2  var hit = $(this).offset().top;
3  var scroll = $(window).scrollTop();
4  var wHeight = $(window).height();
5
6  if (scroll > hit - wHeight + wHeight / 100) {
7    $(this).addClass("inview");
8  }
9});

試したこと2

JavaScript
1$(window).on('load scroll',function() {
2  add_class_in_scrolling($('.appear'));
3});
4
5function add_class_in_scrolling($target) {
6  var winScroll = $(window).scrollTop();
7  var winHeight = $(window).height();
8  var scrollPos = winScroll + winHeight;
9  $target.each(function() {
10    if($(this).offset().top < scrollPos) {
11      $(this).addClass('inview');
12    }
13  });
14}