CSSとjqueryでフェードインアニメーションを作る

2022年7月24日 2022年7月24日 7分13秒

1 CSSとjqueryでフェードインアニメーションを作る

CSSとjqueryでフェードインアニメーションを作る

上下左右からフェードインするアニメーションを作る方法です。

サンプル

See the Pen fadein by take it easy (@take-it-easy) on CodePen.

CSS

/* フェードイン　トリガークラス */
.fadein-right-trigger,
.fadein-left-trigger,
.fadein-top-trigger,
.fadein-down-trigger {
  opacity: 0;
}

/* 右からフェードイン */
.fadein-right {
  animation: fadein-right 3s ease 0s 1 normal forwards;
  opacity: 0;
}

@keyframes fadein-right {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 左からフェードイン */
.fadein-left {
  animation: fadein-left 3s ease 0s 1 normal forwards;
  opacity: 0;
}

@keyframes fadein-left {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 上からフェードイン */
.fadein-top {
  animation: fadein-top 3s ease 0s 1 normal forwards;
  opacity: 0;
}

@keyframes fadein-top {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 下からフェードイン */
.fadein-down {
  animation: fadein-down 3s ease 0s 1 normal forwards;
  opacity: 0;
}

@keyframes fadein-down {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

アニメーションの時間や位置は作成するサイトに合わせて変更して使用してください。

jquery

function fadein_animation() {
  $(".fadein-left-trigger").each(function () {
    var offsetTop = $(this).offset().top;
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scrollTop >= offsetTop - windowHeight) {
      $(this).addClass("fadein-left");
    } else {
      $(this).removeClass("fadein-left");
    }
  });
  
  $(".fadein-right-trigger").each(function () {
    var offsetTop = $(this).offset().top;
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scrollTop >= offsetTop - windowHeight) {
      $(this).addClass("fadein-right");
    } else {
      $(this).removeClass("fadein-right");
    }
  });

  $(".fadein-top-trigger").each(function () {
    var offsetTop = $(this).offset().top;
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scrollTop >= offsetTop - windowHeight) {
      $(this).addClass("fadein-top");
    } else {
      $(this).removeClass("fadein-top");
    }
  });

  $(".fadein-down-trigger").each(function () {
    var offsetTop = $(this).offset().top;
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scrollTop >= offsetTop - windowHeight) {
      $(this).addClass("fadein-down");
    } else {
      $(this).removeClass("fadein-down");
    }
  });
}

$(window).scroll(function () {
  fadein_animation();
});