yanagisawa●表示されてからアニメ今回はanime.jsの勉強ではありませんが、内容的には前回の続きです。前回作成した文字アニメは表示されてから開始するようにしたいです。cssの追加/削除で完結する場合は以下のライブラリが便利だと思います。今回はanime.jsを利用するので、ビューポートに入ったら指定のfunctionを実行する部分を自作しようと思います。-Emergence.js●各種パラメータの取得まずは表示している要素のY座標とスクロールしたときの表示範囲(Y座標)を取得しました。要素位置と表示位置の取得http://jquerystudy.info/anime/3_text/04_scroll.html/まずアニメさせたい要素(今回はclass属性がanimeText)のY座標を以下のように取得しています。scrollTopの位置はブラウザによって書き方が変わるのが少し面倒です。elmY;});そして表示領域は以下のように記述しました。スクロール時だけでなくリサイズ時にも取得します。scrollBottom;}●classの着脱アニメを設定する前に表示領域には言ったらclassを追加するサンプルを作成しました。表示領域ギリギリに設定するとclassの着脱が確認できないので100pxのマージンを設定しています。_margin)){elm.classList.add('vis');}else{elm.classList.remove('vis');}});}上記の青字の部分でclassを着脱しています。この処理に関連してaddがclassを重複して追加しないことを確認しました。document.getElementById('at1').classList.length;console.log(test);前述のサンプルは最初から表示されている要素は赤くなりません。スクロールかリサイズで初めて判定され赤くなります。これは良くないので、最初に表示されている要素はスクロールしなくても赤くなるようにしました。いっても、最初にsetDebugTextを実行するだけです。●アニメを付けるではアニメを付けていきます。・表示されたときに1度だけアニメまずは最初に表示されるときにだけアニメさせるサンプルを作成しました。これはフラグ管理など必要なく、再再生が効かないplayメソッドを利用するだけで完成します。_margin)){animeObjList[elm.id].play();//---restartではないので再度再生されることはありません}・範囲外に出たら逆再生cssの着脱と同じロジックで簡単に実現できると思ったら躓いた。_margin)){animeObjList[elm.id].play();}else{animeObjList[elm.id].reverse();}reverseの挙動に疑問を持ったので代わりにseek(0)を利用してリセットするだけにした。これだと正常に機能しているように見える。_margin)){animeObjList[elm.id].play();}else{animeObjList[elm.id].seek(0);//---範囲外に出たら最初に戻す}しかしseek(0)ではなくreverseでアニメを戻したい。いうことでcssをフラグのように利用して再挑戦。reverseメソッドは私が考えているような使い方はできないのかもしれない...。true){elm.classList.remove('vis');animeObjList[elm.id].pause();animeObjList[elm.id].reverse();}}上記のサンプルではclassの着脱はflgとして利用しているので、視覚的にフラグの状態が分かる。ロジックは正しいのにreverseが処理されない...。いうことでreverseを利用しない方向に変更。そもそも逆再生でアニメを戻す方法は融通が利かない、表示するときと消すときは別々のアニメを設定できるようにしたほうが実用的だと思う。必要の都度、アニメを設定http://jquerystudy.info/anime/3_text/11_outAnime.html/上記のサンプルでは、アニメが重複しないようにremoveメソッドで事前のアニメは削除しています。いうことで一応removeメソッドの動作を確認。animeオブジェクトをremoveするとアニメはリセットされるのではなく、その場で停止する。removeの挙動を確認http://jquerystudy.info/anime/3_text/12_remove_test.html/おしまい。学びたいことはすべて学んだ感じなので、ひとまず更新は停止。学びたいことができたら再開します。コメントをキャンセルメールアドレスが公開されることはありません。