Q&A
"より盛り上がる"とか、"思うようにいきません"は、きちんと説明しないと伝わりません。
(どうなったら盛り上がるのか、どういうアニメーションを想定しているのか)
コードを実行してみたら、一応アニメーション（左から1文字ずつ出てくる）は実行されるみたいですが。
今回は、jQueryを使って、見出しの文字をアニメーション効果で、より盛り上がるようなサイトを制作したく、上から振ってくるとようなフェードダウンのアニメーションをつけることにしたのですが、思うようにいきません。
一応、下記に挑戦してみたコードがあるのですが、これの修正点もしくは、代わりにアニメーション効果のあるコードを教えてもらえると幸いです。
参考にしたサイト：
https://on-ze.com/archives/7387
挑戦してみたコード
html
1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 6 7<link rel="stylesheet" href="animate.css"> 8<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 9<script src="jquery.textillate.js"></script> 10<script src="jquery.lettering.js"></script> 11 12 13 14</head> 15<body> 16 17 18 19<span class="test">SAMPLE TEXT</span> 20 21<script> 22$(function () { 23 $('.test').textillate(); 24}) 25</body> 26</html>
jQuery
1<script> 2$(function () { 3 $('.test').textillate(); 4}) 5</script> 6<script> 7$('.test').textillate({ 8 selector: '.texts', // 要素を指定 9 loop: false, // ループ繰り返し 10 minDisplayTime: 3000, // アニメーションの間隔時間 11 initialDelay: 1000, // アニメーション開始までの遅延時間 12 autoStart: true, // アニメーションの自動スタート 13 inEffects: [], // エフェクト開始時のアニメーション設定 14 outEffects: [ 'hinge' ], // エフェクト終了時のアニメーション設定 15 16 in: { 17 effect: 'fadeInLeftBig', // エフェクトの指定 18 delayScale: 1.5, // 遅延時間の指数 19 delay: 50, // 文字ごとの遅延時間 20 sync: false, // アニメーションをすべての文字に同時に適用 21 shuffle: false, // 文字のランダム表示 22 reverse: false, // エフェクトを逆に再生（「sync:true」のときは不可） 23 callback: function () {} // コールバック関数 24 }, 25 26 out: { 27 effect: 'hinge', 28 delayScale: 1.5, 29 delay: 50, 30 sync: false, 31 shuffle: false, 32 reverse: false, 33 callback: function () {} 34 } 35 callback: function () {}, 36 type: 'char' 37}); 38</script>
なお、jQueryのコードは正常に、html内に埋め込んであります。
>より盛り上がるようなサイトを
これは個人による主観が大きすぎます。
文字による説明が難しいのであれば自身のイメージに近い機能が使われているサイトのURLを提示されるとか、そのあたり工夫されたほうが良いかと思います。
「要件は具体的であればあるほどいい」です。
修正しました
>jQueryのコードは正常に、html内に埋め込んであります。
1つ目は正常に埋め込まれていないように見えます。
もし1ファイルに全て書いてあるのでしたらまとめてもらえませんか？
回答1件
0
ベストアンサー
細かいところが気になりました。
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
もし「ブラウザにドロップ」などして「ローカルにあるHTMLファイルをブラウザで実行している」（ブラウザのアドレスバーがfiles://とかC://とかで始まってる）のであればこの表記では正常に動かない可能性が高いです。
//で始まっていると現在実行しているアドレスのものが採用されます。
https://を省略せずに書きましょう。
ブラウザ開発ツールのコンソールで下記のようなエラーが出ているはずです。
GET file://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js net::ERR_FILE_NOT_FOUND
それにより
jQuery本体が読み込まれていない
↓
プラグインのjsも正常に機能しない
という現象も起きえます。
一番確実なのはCDNの配布サイトから<script>の記述をそのままコピペしてくることですね。
提示サイトはそもそもWebサーバー上で動かしているため//で良くなっているということですね。
とりあえず、そこだけ直したら「左から文字が現れるというアニメーション」が表示されました。
他にも気になる点はあります。
下記のようにされていますが
js
1$(function () { 2 $('.test').textillate(); 3}) 4$('.test').textillate({ 5//後略 6
同じ要素に対して別の指定をしていることになるので無駄です。
$('.test').textillate();自体はデフォルトの指定でしょうし、様々なアニメーションを指定したいということであれば後の方だけ残しましょう。
プラグインによっては最初の設定だけ活きるということもあるかもしれません（未確認）
ただし、下記は残してください。「HTMLが読み込まれてから実行する」という意味合いの記述だからです。
js
1$(function () { 2 3})
もう1点。
jQuery本体の読み込みを直した後でブラウザ開発ツールのコンソールを確認するとエラーが出ていることに気づくと思います。
Uncaught SyntaxError: Unexpected identifier
Syntax Errorは「構文エラー」です。
JavaScriptの構文ミスがあるということですね。
エラーが起きている行数も出ているはずなので確認してみましょう。
js
1 2 } 3 callback: function () {}, //この行 4 type: 'char' 5
答えを先に言うと
js
1 2 }, //ここでカンマが足りない 3 callback: function () {}, 4 type: 'char' 5
紹介している記事のミスです。
質問者さんが悪いわけではないのでご安心を。
動かない場合は「エラーが出ていないか確認する」ことは必要ですが。
これでも多分「まっすぐ流れてくる」くらいしか実現できないのではと思います。
で、実際動いているデモページを見ると、プラグイン読み込みは下記しかないようです。
js
1$(function () { 2 $('.test').textillate(); 3})
つまりそのほかの動きは「独自でCSSで制御している」ということが言えるのではないでしょうか。
ブラウザ開発ツールから色々と確認してみてください。
（いっそのことCSS丸々持ってきても良いですけど・・・）
投稿2019/08/16 06:19
総合スコア80850
あなたの回答
tips
プレビュー
