jquery 屏幕滚动动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Scroll Animation</title>
<style>
  .hidden { opacity: 0; transition: opacity 1s; }
  .visible { opacity: 1; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(window).scroll(function(){
    $('.hidden').each(function(i){
      var bottom_of_object = $(this).offset().top + $(this).outerHeight();
      var bottom_of_window = $(window).scrollTop() + $(window).height();
      if( bottom_of_window > bottom_of_object ){
        $(this).addClass('visible');
      }
    });
  });
});
</script>
</head>
<body>
<div style="height:1000px;"></div> <!-- 用于滚动 -->
<div class="hidden">内容1</div>
<div class="hidden">内容2</div>
<div class="hidden">内容3</div>
</body>
</html>