diff --git a/testpage/fade.js b/testpage/fade.js
index 1bef0c6..a823d6c 100644
--- a/testpage/fade.js
+++ b/testpage/fade.js
@@ -1,18 +1,36 @@
-$(function(){
-            $(window).scroll(function() {
+// $(function(){
+//             $(window).scroll(function() {
                
-                $('.fadein').each(function() {
+//                 $('.fadein').each(function() {
                  
-                  let scroll = $(window).scrollTop();
+//                   let scroll = $(window).scrollTop();
                 
-                  let target = $(this).offset().top;
+//                   let target = $(this).offset().top;
              
-                  let windowHeight = $(window).height();
+//                   let windowHeight = $(window).height();
         
-                  if (scroll > target - windowHeight + 200) {
-                    $(this).css('opacity','1');
-                    $(this).css('transform','translateY(0)');
-                  }
-                });
-              });
-            });
\ No newline at end of file
+//                   if (scroll > target - windowHeight + 200) {
+//                     $(this).css('opacity','1');
+//                     $(this).css('transform','translateY(0)');
+//                   }
+//                 });
+//               });
+//             });
+
+
+const ScrollContent = document.querySelectorAll('.scroll');
+console.log(ScrollContent);
+console.log('画面の高さ',window.innerHeight); 
+
+document.addEventListener('scroll', () => { 
+
+  for (let i=0; i < ScrollContent.length; i++){
+    const ElementDistance = ScrollContent[i].getBoundingClientRect().top 
+    + ScrollContent[i].clientHeight * .5;
+    if (window.innerHeight > ElementDistance){ 
+      ScrollContent[i].classList.add('show'); 
+    }; 
+  }
+})
+  
+
diff --git a/testpage/test.css b/testpage/test.css
index 978911c..bbb2de5 100644
--- a/testpage/test.css
+++ b/testpage/test.css
@@ -268,7 +268,12 @@
 /* ---------------------------------------------------------//mainvisual */
 
 /* ------------------------------------------------------------home-about */
-
+#home-about .scroll{
+  opacity: 0;
+}
+/* .about-container{
+  opacity: 0;
+} */
 .home-items{
     display: flex;
     flex-direction: row;
@@ -276,6 +281,7 @@
     justify-content:space-evenly;
     align-items: center;
     margin-top: 30px;
+    opacity: 0;
 }
 #home-about .home-items h3{
   font-size: 1.4rem;
@@ -329,7 +335,9 @@
 #home-class_content{
   padding: 50px 16px 50px 16px;
   margin: -50px auto 10px auto;
-
+}
+#home-class_content .scroll{
+  opacity: 0;
 }
 #home-class_content .grid {
   display: grid;
@@ -339,6 +347,7 @@
 #home-class_content .grid .class_content-item{
   text-decoration: none;
   color: #000;
+  opacity: 0;
 }
 #home-class_content .grid .item {
   transition: all  0.3s ease;
@@ -411,6 +420,9 @@
   margin: 0 auto;
   padding-bottom: 40px;
 }
+#home-apply .scroll{
+  opacity: 0;
+}
 .qa_list{
 	position: relative;
 	margin: 20px 20px 30px 20px;
@@ -466,6 +478,9 @@
   margin-bottom: 60px;
   margin-top: 60px;
 }
+#home-info .scroll{
+  opacity: 0;
+}
 #home-info img{
   object-fit: cover;
   width: 100%;
@@ -659,3 +674,47 @@
 sectionごとの余白はmargin-top:50px; margin-bottom:80px;で共通化。
 margin-topだけはつけるとことつけないとこがあるから.wrapperに入れない。
 ３ */
+
+#home-about .show{
+  opacity: 1; 
+  transition: 1s; 
+  transform: translateY(-50px);
+}
+.home-items .show{
+  opacity: 1; 
+  transition: 1s; 
+  transform: translateY(-50px);
+}
+#home-class_content .grid .show { 
+  opacity: 1; 
+  transition: 1s; 
+  transform: translateY(-50px); 
+}
+
+#home-apply .show{
+  opacity: 1; 
+  transition: 1s; 
+  transform: translateY(-50px); 
+}
+
+#home-info .show{
+  opacity: 1; 
+  transition: 1s; 
+  transform: translateY(-50px); 
+}
+
+#home-class_content .show{
+  opacity: 1; 
+  transition: 1s; 
+  transform: translateY(-50px); 
+}
+
+figure .scroll{
+  opacity: 0;
+}
+
+figure .show{
+  opacity: 1; 
+  transition: 1s; 
+  transform: translateY(-50px); 
+}
\ No newline at end of file
diff --git a/testpage/test.html b/testpage/test.html
index a38d139..a390be9 100644
--- a/testpage/test.html
+++ b/testpage/test.html
@@ -66,14 +66,16 @@
 
         <!-- about -->
         <section id="home-about" class="wrapper">
+            <div class="scroll">
             <h2 class="section-title">第1期ジュニアドクター鳥海塾</h2>
             <p class="section-text">
                 ジュニアドクター鳥海塾では生徒みんなで協力して
                     プログラミングを学んでいきます。教える側も教えられる側も一丸となって一つの問題の解決に
                 力を合わせて取り組んでいきます。
             </p>
+            </div>
             <div class="about-container">
-                <div class="home-items">
+                <div class="home-items scroll">
                     <img src="../img/riku_umi.png" alt="キャラ画像ウミリク"
                       width="300" height="216">
                     <div class="what_study">
@@ -108,9 +110,9 @@
         <!-- //about -->
         <!-- home-class_content -->
         <section id="home-class_content" class="wrapper">
-            <h2 class="section-title">授業内容について</h2>
+            <h2 class="section-title scroll">授業内容について</h2>
             <div class="grid">
-              <a class="class_content-item" href="">
+              <a class="class_content-item scroll" href="">
                   <div class="item fadein">
                     <img class="fadein" src="../testpage/pc-children.jpg" alt="">
                     <div class="item-content">
@@ -121,7 +123,7 @@
                   </div>
               </a>
     
-              <a class="class_content-item" href="">
+              <a class="class_content-item scroll" href="">
                   <div class="item fadein">
                     <img class="fadein" src="../testpage/pc-parson.jpg" alt="">
                     <div class="item-content">
@@ -132,7 +134,7 @@
                   </div>
               </a>
     
-              <a class="class_content-item" href="">
+              <a class="class_content-item scroll" href="">
                   <div class="item fadein">
                     <img class="fadein" src="../testpage/pc-two.jpg" alt="">
                     <div class="item-content">
@@ -147,8 +149,9 @@
           </section>
           <!-- //home-class_content -->
           <!-- home-apply -->
-        <section id="home-apply" class="wrapper">
-            <h2 class="section-title">鳥海塾についてのQ＆A</h2>
+        <section id="home-apply" class="wrapper scroll">
+            <h2 class="section-title scroll">鳥海塾についてのQ＆A</h2>
+            <div class="scroll">
             <div class="qa_list">
                 <input id="qa1" type="checkbox">
                 <div class="plus">+</div>
@@ -186,13 +189,14 @@
                 オンライン講座参加のための通信費は自己負担となります。
                 </div>
             </div>
+        </div>
             <p class="home-class_content-btn"><a href="../apply/">もっと見る<i class="fas fa-angle-right fa-position-right"></i></a></p>
         </section>
         <!-- //home-apply -->
         <!-- home-info -->
         <section id="home-info" class="wrapper">
-            <h2 class="section-title">アクセス</h2>
-            <figure>
+            <h2 class="section-title scroll">アクセス</h2>
+            <figure class="scroll">
                 <img src="../testpage/info2.jpg" alt="">
             </figure>