jQueryを使ってfadeInさせたいのですが、fadeInできず困っています。わたしでは、原因がわからなくて対処ができず。
一番下の画像のように、なにも表示されず空白になっています。
上下にスライドしても、なにも反応せず。
ネットで調べても、なにが原因なのかわからず。
助けていただけたら、幸いです。
html
1<!DOCTYPE html>2<html lang="ja">3 4<head>5 <meta charset="utf-8">6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">7 <link rel="stylesheet" href="./css/style.css">8 9<body>10 <section class="tokushoku">11 <div class="tokushoku-t">12 <h1>Kira-Kira English</h1>13 <h1>3つの特色</h1>14 <span class="boo"></span>15 </div>16 <div class="tokushoku1">17 <div class="box1 animated"></div>18 <h1>01.</h1>19 <p>「聞く・話す・読む・書く」の夢中になっている間に「わかる」から「できる」に！</p>20 </div>21 22 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>23 <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" integrity="sha512-CEiA+78TpP9KAIPzqBvxUv8hy41jyI3f2uHi7DGp/Y/Ka973qgSdybNegWFciqh6GrN2UePx2KkflnQUbUhNIA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>24 <script src="./js/main.js"></script>25</body>26 27</html>
css
1.tokushoku{2 padding: 80px 16px 80px 16px;3}4 5.tokushoku-t{6 display: flex;7 flex-direction: column;8 align-items: center;9 row-gap: 10px;10}11 12.tokushoku h1{13 margin-left: -2px;14 font-size: 24.2px;15 font-weight: bold;16}17 18.boo{19 display: inline-block;20 width: 24px;21 height: 2px;22 background-color: #0079f2;23 margin-bottom: 32px;24}25 26.tokushoku1{27 height: 100vh;28}29 30.box1{31 width: 357px;32 height: 269px;33 background-image: url(../images/final-exam-assets/point/point_1.jpg);34}35
jquery
1$('.animated').waypoint({ 2 handler: function(direction) { 3 if (direction === 'down') { 4 $(this.element).addClass('fadeInLeft'); 5 } 6 }, 7 offset: '50%', 8});
0 コメント