JavaScript»ウェブ»jQuery応用編 フェードインに動きをつける

ファイル名: js-web/quest_03202.html

fade in
fade in
fade in
fade in
fade in
fade in
fade in
fade in
fade in
fade in
fade in
fade in
fade in
fade in

下のソースコードを写して、フェードインして要素が表示されたとき、上から下にふわっと移動する動きをつけるプログラムをつくってください。

ソースコード

<div class="overflow">
  <div class="fadeIn">fade in</div>
  <div class="fadeIn">fade in</div>
  <div class="fadeIn">fade in</div>
  <div class="fadeIn">fade in</div>
  <div class="fadeIn">fade in</div>
  <div class="fadeIn">fade in</div>
  <div class="fadeIn">fade in</div>
  <div class="fadeIn">fade in</div>
  <div class="fadeIn">fade in</div>
  <div class="fadeIn">fade in</div>
  <div class="fadeIn">fade in</div>
  <div class="fadeIn">fade in</div>
  <div class="fadeIn">fade in</div>
  <div class="fadeIn">fade in</div>
</div>

<style type="text/css">
.overflow {
  border: solid 3px #ccc;
  width: 320px;
  height: 320px;
  overflow: scroll;
}
.fadeIn {
  transform: translate3d(0, -10px, 0);
  transition: 2s;
  opacity: 0;
  border: solid 1px;
  width: 80px;
  padding: 15px 10px;
  margin: 20px auto;
  text-align: center;
  box-sizing: border-box;
}
.fadeIn.animation {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
</style>

<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<script type='text/javascript'>
const fadeIn = function() {

  const boxes = $('.fadeIn');

  boxes.each(function(){
  
    const boxTop = $(this).offset().top;
    const canvasTop = $(".overflow").offset().top;
    const height = $(".overflow").height();

    if(height - height / 10 > boxTop - canvasTop){
      $(this).addClass("animation");
    }
  });
};

$(window).on('load', function() {
  fadeIn();
});

$(".overflow").on('scroll', function() {
  fadeIn();
});
</script>

解説

styleタグのcssで、あらかじめfadeInクラスを持つ要素のY座標を少し上にずらしておきます。fadeInクラスとanimationクラスの両方を持つ要素は元の位置に表示されるよう指定しておくと、animationクラスが追加された要素が移動します。