スクロールで画像の近くに来ると上に浮上してくる動きをつけたい。

上記のサイトのように画像が浮上してくる感じのを

transformをaddClassすることで試しにやってみたんですが、

なぜか思い通りにいきません。どなたか教えて下さい。

HTML5
1コード     <div id="float-food">
2      <figure class="fes-food" id="banana"><img src="images/choco-banana.png" alt=""></figure>
3      <figure class="fes-food" id="candy"><img src="images/candy.png" alt=""></figure>
4    </div>

CSS3
1コード  #candy {
2    position: absolute;
3    top: 1000px;
4    right: 20px;
5}
6
7#banana {
8    position: absolute;
9    top: 2000px;
10    left: 20px;
11}
12
13.fes-food {
14    opacity: 0;
15}
16
17.fes-food.fadein {
18    opacity: 1;
19    transform: translateY(-100px);
20    transition:all .7s;
21}

javascript
1コード  $(function(){
2
3    $(window).scroll(function(){
4
5      $('.fes-food').each(function(){
6
7        var elemPos = $(this).offset().top;
8
9        var scroll = $(window).scrollTop();
10
11            var windowHeight = $(window).height();
12
13        if (scroll > elemPos - windowHeight) {
14
15        $(this).addClass('.fadein'),
16
17        $(this).removeClass('.fadein');
18
19      }
20
21    });
22
23  });
24
25});

行動規範の内容に同意します

回答1件

ベストアンサー

以下のコードでどうでしょうか？

css
1/* 追加 */
2html {
3  min-height: 2100px;
4}
5/* 削除 */
6/*.fes-food {
7  opacity: 1;
8}*/
9/*.fes-food.fadein {
10  opacity: 1;
11  transform: translateY(-100px);
12  transition:all .7s;
13}*/
14/* 追加 */
15.fes-food.fadeout {
16  opacity: 0;
17  transform: translateY(-100px);
18  transition:all .7s;
19}

Javascript
1$(function() {
2  $(window).scroll(function() {
3    $('.fes-food').each(function() {
4      var elemPos = $(this).offset().top;
5      var scroll = $(window).scrollTop();
6      var windowHeight = $(window).height();
7      if (scroll > elemPos - windowHeight) {
8        $(this).addClass('fadeout');
9      } else {
10        $(this).removeClass('fadeout');
11      }
12    });
13  });
14});