1. <script type="text/javascript">
  2.  //<![CDATA[
  3. $(function(){
  4.     $(window).scroll(function (){
  5.         $('.left-to-right, .down-to-top, .right-to-left, .top-to-down').each(function(){
  6.             var elemPos = $(this).offset().top;
  7.             var scroll = $(window).scrollTop();
  8.             var windowHeight = $(window).height();
  9.             if (scroll > elemPos - windowHeight + 150){
  10.                 $(this).addClass('scrollin');
  11.             }
  12.         });
  13.     });
  14. });
  15.  //]]>
  16. </script>
  1. style>
  2. /* <![CDATA[ */
  3. /*左から右にフェードイン*/
  4. .left-to-right {
  5.   opacity: 0.1;
  6.   transform: translateX(-50px);
  7.   transition: all 1s;
  8. }
  9. .left-to-right.scrollin {
  10.   opacity: 1;
  11.   transform: translate(0);
  12. }
  13. /*右から左にフェードイン*/
  14. .right-to-left {
  15.   opacity: 0.1;
  16.   transform: translateX(50px);
  17.   transition: all 1s;
  18. }
  19. .right-to-left.scrollin {
  20.   opacity: 1;
  21.   transform: translate(0);
  22. }
  23. /*下から上にフェードイン*/
  24. .down-to-top {
  25.   opacity: 0.1;
  26.   transform: translateY(50px);
  27.   transition: all 1s;
  28. }
  29. .down-to-top.scrollin {
  30.   opacity: 1;
  31.   transform: translateY(0);
  32. }
  33. /*上から下にフェードイン*/
  34. .top-to-down {
  35.   opacity: 0.1;
  36.   transform: translateY(-50px);
  37.   transition: all 1s;
  38. }
  39. .top-to-down.scrollin {
  40.   opacity: 1;
  41.   transform: translateY(0);
  42. }
  43. /*]]>*/
  44. </style>

left-to-right

right-to-left

down-to-top


top-to-down