<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>scrollAnimation</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div class="main">

<div class="sample_box2 animation" data-animation="slideInUp">
Animation slideInUp
</div>

<div class="sample_box1">
No Animation
</div>

<div class="sample_box2 animation" data-animation="slideInUp" >
Animation slideInUp
</div>

<div class="sample_box2 animation" data-animation="slideInLeft">
Animation slideInLeft
</div>

<div class="sample_box2 animation" data-animation="slideInRight">
Animation slideInRight
</div>

<div class="sample_box1">
No Animation
</div>

</div><!-- /.main -->

</body>
</html>
@charset "UTF-8";

html{
    overflow-x: hidden; /*画面外から現れるアニメーションの為に必要*/
}
body{
    background-color: #f1f1f1;
}

div.main{
    position: relative;
    margin: 0 auto;
    padding: 1px 30px;
    max-width: 1200px;
    background-color: #fff;
}
div.sample_box1{
    padding: 50px;
    height: 350px;
    background-color: beige;
    box-sizing: border-box;
    margin: 30px 0;
}
div.sample_box2{
    padding: 50px;
    height: 200px;
    box-sizing: border-box;
    background-color: coral;
    margin: 30px 0;
}

/* ====== Animation Setting ====== */

.animation{
    visibility: hidden;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* 左からスラインドイン */
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: hidden;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: hidden;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

/* 右からスラインドイン */
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

/* 下からスラインドイン */
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
jQuery(function($) {

function animationSetting(){
    $('.animation').each(function(){
        var obj       = $(this),
            objH      = $(this).outerHeight(),
            scrolled  = $(window).scrollTop(),
            viewed    = scrolled + $(window).height(),
            objTop    = $(this).offset().top,
            objBottom = objTop + objH,
            excnum    = 0.4;

        if((objTop + objH * excnum) <= viewed && (objBottom - objH * excnum) >= scrolled){
            obj.addClass(obj.data('animation')).addClass('animated');
        }
    })
}

animationSetting();

$(window).on('scroll', function() {
    animationSetting();
});

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js