JavaScript»ウェブ»jQuery応用編 フェードイン

ファイル名: js-web/quest_03200.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 {
    transition: 2s;
    opacity: 0;
    border: solid 1px;
    width: 80px;
    padding: 15px 10px;
    margin: 20px auto;
    text-align: center;
    box-sizing: border-box;
}
.fadeIn.animation {
    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クラスのみだと透明ですが、fadeInクラスとanimationクラスの両方を持つ要素は不透明、つまり見えるようにしておきます。
「fade in」と文字を表示する各要素は、最初はfadeInクラスのみを持っています。要素の上辺の位置が親要素の底辺より上になると、animationクラスが追加されるようにjQueryでスクリプトを書いています。