Q&A
提示されたJavaScriptのコードはどこに書いてるんですか？
HTML内にはどこにもリンクされてる場所が見当たりません。
前提・実現したいこと
anime.jsをVScodeでかきブラウザに反映させたい
発生している問題・エラーメッセージ
anime is not defined
translate.google.com/gen204?nca=te_li&client=te_lib&logld=vTE_20200506_00:1 GET file://translate.google.com/gen204?nca=te_li&client=te_lib&logld=vTE_20200506_00 net::ERR_INVALID_URL
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="styles.css"> 8 <title>anime.js</title> 9</head> 10 11<body> 12 <div class="demo-wrapper"> 13 <div class="square"></div> 14 </div> 15 <script src="js/anime.min.js"></script> 16</body> 17 18</html> 19
css
1css 2.square { 3 position:relative; 4 top:100px; 5 width:60px; 6 height:60px; 7 background-color:#000; 8 }
javascript
1anime ({ 2 targets:'.square', 3 translateX: 450, 4 rotateZ: 360, 5 scale: 3, 6 duration: 4000, 7 loop: true, 8 }) 9 10
試したこと
サーバにアップして読み込めてないと思いやってみたんですがcommand not found: importと出てしまいました。
パソコン初心者で何言ってるかわからないと思いますがもしわかる方いましたらご教授ください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
失礼しました。JavaScriptと書いてあるところはanime.min.js
です
プラグインのファイルに直接書いているということですか？
anime.jsってこれですよね？
https://animejs.com/
どこに書いてますか？一般的に、プラグイン利用する場合にプラグインのプログラム内に直接プラグイン呼び出しを書くことってないですよ
そーなんですか！！
具体的にどのように書き込めいいか面倒でなければ教えてもらえると助かります。
回答2件
0
ベストアンサー
プラグインを利用する場合、色々なやり方は確かにありますが、「とりあえず使い始めたい」「直接プラグインの元ソースをいじらない」のであれば、CDNを利用した方が良いと思います。
特に、minの方に直に自分のコードを書くのって不具合の元です。
プラグイン呼び出しもとりあえず直に書くので良いと思います。
html
1 <div class="demo-wrapper"> 2 <div class="square"></div> 3 </div> 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script> 5 <script> 6anime ({ 7 targets:'.square', 8 translateX: 450, 9 rotateZ: 360, 10 scale: 3, 11 duration: 4000, 12 loop: true, 13 }) 14 </script> 15
想定通り動くかは知らないですが、エラーはなくスクロールが出てきたので、たぶんこれでいいんでしょう、くらいですが。
投稿2020/05/16 14:10
総合スコア80875
0
- HTML、cssファイル。javascriptファイル（anime.min.js）のフォルダ構成が間違っていませんか？
- anime.jsの公式ページ（https://github.com/juliangarnier/anime）から、anime.min.jsをダウンロードして正しいフォルダに入れていますか？
投稿2020/05/16 13:56
編集2020/05/16 13:57
総合スコア820
icloud Driveのなかにさっきhtmlファイル＋cssファイル＋jsフォルダときてjsフォルダの中にanime.min.jsファイルという構成です。
https://github.com/juliangarnier/anime）から、anime.min.jsをダウンロードしたフォルダはicloud Driveに別フォルダとして置いております
わざわざ回答いただきありがとうございます！！
解決いたしました！！
あなたの回答
tips
プレビュー
