Q&A
「うまくいかない」だけでは起きている現象、問題が何も伝わらないので、具体的に記載してください。
https://teratail.com/help/question-tips#questionTips3-4
ScrollTrigger.jsとanmate.cssを利用してページ内に動きをつけたいのですがうまくいきません。
<html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>＊＊＊＊＊＊＊</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="XXX"/> <meta name="keywords" content="XXX"/> <link rel="stylesheet" type="text/css" href="./css/animate.css"> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script src="./js/ScrollTrigger.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { var trigger = new ScrollTrigger(); }); </script> <head> <body> <!--cotents area-------------------> <main> <section class="top_service_block"> <h2 class="common_headline-center">SERVICE</h2> <p class="sub_title">テキストテキストテキストテキストテキストテキスト</p> <div class="top_service_inner"> <a class="top_service_items animated" data-scroll="once toggle(.fadeIn, .invisible) addHeight"> <img src="images/a_1.jpg"> <div class="top_service_items-txt"> <h3>SAMPLE</h3> <p>テキストテキストテキスト</p> </div> </a> <a class="top_service_items animated" data-scroll="once toggle(.fadeIn, .invisible) addHeight"> <img src="images/a_1.jpg"> <div class="top_service_items-txt"> <h3>SAMPLE</h3> <p>テキストテキストテキスト</p> </div> </a> </div> </main> <!-- footer --> </body> </html>
jsはScrollTrigger.js CSSはanimate.cssを使っています。
何卒、ご教授お願いいたします。
jQuery本体を読み込ませてないのは何か理由があるのでしょうか？
参考にしたサイトや記事などご提示ください。
不備があり大変申し訳ありません。
jQuery本体は読み込まセテおります。
参考にしたサイトは以下になります。
https://gazocustomize.xyz/animate-scrolltrigger/
あとは他にこれらを使った人のサイトのソースなどをみました。
よろしくお願いいたします。
jquery-uiはjQuery本体とは別物ですよ。
コンソールにリファレンスエラーでてるとおもいます。
なるほど。ご教授ありがとうございます！
回答1件
0
自己解決
なるほど。ご教授ありがとうございます！
投稿2019/01/25 11:23
総合スコア11
自己解決にするのはいいのですが、回答にするのでしたらきちんと解決策を記載してください。
あなたの回答
tips
プレビュー
