なぜ最初に $(
なのか
jQuery というライブラリを使用しているので、$
は jQuery
を指します。
jQuery(callback)
DOM Documentのロードが終わった際に、バインドしておいた関数が実行されるようになる。
この関数は$(document).ready()
と全く同様に動作する。
—— jQuery(callback)
例えば HTML の最後に JavaScript を書くなら、必要ありません。
event
はここでのスクロール操作なのか
jQuery のプラグインである inview を使用しているので、それによって追加された inview
イベントです。スクロール操作により発生するという意味では、スクロール操作であると言えます。
isInview
の役割
The event will only fire when the element comes in to view of the viewport, and out of view.
...
The variable after the event argument indicates the visible state in the viewport.
—— Usage
イベントはターゲットの要素が可視領域に入った時と出た時の両方で発生します。どちらなのか区別するのが2番目の引数 (質問のコードでは isInview
として利用) です。
stop()
の意味
指定した要素集合から、現在動作中のアニメーション処理を全て中止します。
——stop()
他でアニメーションさせていないなら、必要ないと思います。
「現状は表示させたい文字が現れません」
現在の JavaScript では $('.inview').on('inview'
としていますね。対象の要素を inview
というクラスで探しています。しかし、HTML には inview
クラスが指定されていません。HTML で class="inview fadeIn"
のように inview
クラスを追加する必要があります。
もしくは、JavaScript 側を $('.fadeIn').on('inview'
のようにして fadeIn
クラスで探すようにしてもよいでしょう。
(その他にも、重複した JavaScript の読み込みや、 color: #fff;
、DOCTYPE
以前にタグが有る、など など気になる点はあります)