文字アニメーションをスクロールに合わせて発動する
文字アニメーションをスクロールに合わせて発動する
実装方針
htmlの’animate-title'が画面内に入ってきたタイミングでTextAnimationクラスのanimateメソッドを実行したいので，監視対象を’animate-title'にする今回の場合複数存在するのでquerySelectorAllとし，変数名はelsとする。
main-js
text-animation-js その１
text-animation-js その２
スクロール検知 IntersectionObserver
スクロール検知 IntersectionObserver
IntersectionObserverというクラスはオプションをとることもできる。
オプションをオブジェクトリテラルで定義して，IntersectionObserverの第２引数に格納する
＜使えるプロパティ＞
root：交差対象とする親要素 基本的にはIntersectionObserverは現在表示されている画面にはいるかはいらないかというところで交差点をみているがrootに親要素，先祖要素を設定すると，それらとの交差点で監視を行うことができる。
rootMargin:デフォルト値は0px：交差対象のビューポート（表紙されている画面）。これを"-300px 0px 0px 0px"とすると上から300pxのところが交差点となる。ある程度入ってきたところで色がかわる。 必ずpxをつける。つけないとエラーになる。０のときもつける。
threshold:デフォルト値は0:上から入ってくるときは画面に入ってくる下の辺。上辺部分は1。逆に下から入ってくるときは上辺が０で下辺が１となる。
Classを使ったコードの整理方法 クラスでコードの再利用性を高める
Classを使ったコードの整理方法 クラスでコードの再利用性を高める
上のように
同じことを繰り返し記述するのはプログラミングでは望ましくないので，関数にまとめるか，クラスというブロックにまとめて記述する。
「class クラスの名前」 で定義する
クラス名は基本的に大文字から始める。
クラスからオブジェクトを生成するには「new クラス名」とする。
クラスから生成したオブジェクトは特別にインスタンスと呼ぶ。
constructor関数 クラスが初期化されるタイミングで必ず呼ばれる関数
コンストラクタの中に記述した処理はインスタンス（オブジェクト）が生成した直後に実行される。インスタンスごとに毎回実行される
コンストラクタの中で，this.プロパティ= 値とすることで，生成されたインスタンスにプロパティと値を追加することができる。
elにはtaの引数'sakura'が渡ってくる
文字列をHTMLタグに分割
文字列をHTMLタグに分割
下の文字分割の部分をJavaScriptのDOM操作によって行ってみる
上を下のように変更まだ文字分割されていないのでアニメーションしない
文字列が複数になった場合を考えてみる PLAY ANIMATIONとしてみる
PLAYとANIMATIONの間の半角スペースが生まれていない
これはdisplayのタイプがinline-blockとなっているため
inline-blockは，中になにか文字列や画像などがなにか存在しない限りは高さと横幅がゼロになる。
文字列に半角スペースが渡ってきたときにreplaceメソッドで というHTMLの特殊文字に置換してやる事が必要
は厳密にいえば半角スペースではないが，便宜的に半角スペースとして用いることが多い。
reduceを使ってfor文を書き換える
reduceを使うときはsplitを使って配列になおす必要がある
画面初期化時にコードを実行！DOMContentLoaded vs load
画面初期化時にコードを実行！DOMContentLoaded と load というふたつのイベントリスナーのちがいについて
<DOMContentLoaded> HTMLをブラウザが解釈してDOMツリーを作成し終わったタイミングで発火するイベント
<load> そのあとの HTMLからDOMを作成し終わったあとに，さらに画像や動画，スタイルシートやJavaScriptなど，すべてのコンテンツをダウンロードしおわったあとに発火するイベント
DOMContentLoaded は documentに対してaddEventListenerで登録しているが load というイベントは window というオブジェクトに対して登録している。
DOMContentLoaded は window に対しても登録することができるが，load というイベントはdocumentに対して登録することはできない。
JavaScriptはDOMを通してHTMLの要素を取得・変更するが，DOMが形成される前にHTMLの要素にアクセスしようとするとエラーが発生する
DOMにイベントを登録
DOMにイベントを登録
JavaScriptにおいてイベントとはウェブサイト上で発生するあらゆるアクションのこと。ボタンをクリックする・ホバーする，テキストを入力するなどあらゆる行為がイベントとしてブラウザ上では認識されその状態を監視しているものをイベントリスナーという。
JavaScriptではこのイベントリスナーに予め関数を登録しておくことによって，そのイベントが発火した際に，その関数が呼ばれ，何らかの決められた処理を行うことができる。
DOMの操作
DOM(Document Object Model)とは？
HTMLをJavaScriptから操作できるようにしたインターフェイス。
JavaScriptからはDOM APIを通じてHTMLの情報を取得・変更する。
情報の取得・変更・イベントの登録などができる。
