該当位置までスクロールすると「コンテンツがふわっと表示される」
こういったサイトはもはや定番パターン！このブログを読まれている方も、実際にいくつも制作されているのではないでしょうか？
今回は一歩進んで、該当位置までスクロールすると
「タイトルテキストがカッコ良くアニメーション表示される」方法その１をご紹介したいと思います
今回ご紹介する表示方法
まずは完成DEMOをご覧ください！
- 完成DEMOをダウンロードされる方はコチラ
Flash全盛期にはよく見かけた表示方法ですが、JSとCSSの時代になったイマ見てもやっぱり「カッコイイな！」と思います！
Flash時代と違うのは、タイトルが画像などではなくテキストだと云うことですかね？
この表示方法いくつかのサイトで見かけ、jQueryのプラグインなどでできないものか？と探して見るものの見つからず…
なので自分で作ってしまいました！
実装方法１
タイトル部分のマークアップ（HTML）
まずはタイトルを含むセクション全体のHTMLを見ていきましょう。
思っているよりもシンプルなマークアップだと思います。
まずsection要素に【id名】をつけます、ここでは【id=”Section1″】にしています。
次にアニメーションしながら表示されるタイトルのテキスト部分です。
今回はタイトルをH3要素でマークアップしていますが、このあたりは自由です。
さらに実際動くテキスト部分は、<span class=”block”>でマークアップしておきます。
ここでは【Use the】【Scroll Magic!】のテキストを別々に動かしたいので、それぞれ<span class=”block”>でマークアップしておきます。
「あれっ！？白い四角形のマークアップは？」と思われた方もいると思います。もしくは「あーなるほど！」と察した方も（笑）
そこはこの後解説していきます。
実装方法２
タイトル部分の基本装飾（CSS）
まずはタイトル部分(H3)のCSSを記述していきます。
フォントの大きさや書体・色など、デザインに合わせて任意で定義してくださいね。
続いて動かしたいテキストにマークアップした「クラスblock」のCSSを定義します。ココは重要なポイント！です。
- position: relative; →
上に四角形を重ねたいので必須！ - display: inline-block; →
四角形の幅を文字数と合わせるため必須！ - color: transparent; →
初期値を透明にして見えなくしてするため必須！
「クラスblock」には上記３つのCSSを定義してあります。
どれも重要ですが<display: inline-block;>は、
テキストの文字数に合わせて四角形の幅を自動で調整するために利用する記述で、個別に幅を指定するのであれば必要のない記述ではありますが、
こういった生産性を上げるちょっとした工夫は、コーディングの際の大きな味方になります。
さあ！ここからHTMLには記述しなかった『白い四角形』の設定を行います。
勘の良い方はもう気づいているとは思いますが、『白い四角形』はテキスト部分（クラスblock）の「::after」要素として定義します。なのでHTMLには記述がありません！
移動するアニメーションをさせるため「position: absolute;」にしておきます。
「width」「height」はともに「110%」に設定、テキストよりもひと回り大きくしました。
/*初期値*/以下は、CSSアニメーションの準備ですね！アニメーションを始めたい位置（画面の外）に『白い四角形』を配置しておきます。
- transform: translateX(110vw) scaleX(1); →
まず画面の外へ配置！幅は等倍に設定 - transform-origin: 0 0; →
変形する際の基点を左上に設定
「translateX(110vw)」の値は、通常100vwで画面外に配置できるのですが、「width」「height」を「110%」と一回り大きくしているため余裕を持って、より外に配置しておきました。
実装方法３
タイトル部分のアニメーション設定（CSSアニメーション）
それではアニメーション用のCSSを定義していきましょう！
オット！その前にひとつ、
今回のメインイベントであるアニメーションをどうやって動かすかと云うと…
スクロールイベントで該当のセクションに到達したらクラス.showを付与する！これだけです。
JQueryでゴニョゴニョやったり…とかは一切ありません！簡単でしょ？
まずはタイトルのテキスト部分のアニメーション用CSSを追加していきます。「CSS Transition」を使ってアニメーションの設定をしましょう！
実際に動かす部分は「クラスblock」でマークアップした部分です。
そしてスクロールイベントで「クラスshow」を付与する要素は、h3の親要素である「クラスsection」にしているので、追加するのは下記の２つの指定になります。
追加したCSSの意味は、テキストをtransitionで0.3秒したらフォントカラーを白（＃fff）に変更
２段目のテキスト（ここでは【Scroll Magic!】）はちょっとずらして動かしたいので、２番目の「クラスblock」を「.block:nth-of-type(2)」で指定し、0.15秒ずらして0.45秒したら動くように設定しています。
次に『白い四角形』部分のアニメーション用CSSを追加していきます。
この『白い四角形』のアニメーションは２つの動きが組み合わさっています。
１つ目は左から右へ飛び込んでくる動き
２つ目は止まった後に、左に縮んでいく動きです。
CSSアニメーションで複数の動きを組み合わせるには、キーフレームが使える「CSS Animation」が「便利！
なのでこちらは「CSS Transition」ではなく「CSS Animation」で、まず0.3秒（0から50%）で右から左へ移動、さらに0.3秒（50%から100%）で変形して縮むように設定しました
先ほどと同じく２段目の『白い四角形』に関しては、animation-delayプロパティを使って0.15秒ずらして動くように設定しています。
CSSを使ったアニメーション、CSS Transitionは使ってるけどCSS Animationはまだあまり馴染みがないと云う方をまだ見かけます
そんな方は結構JQuery要らずで色々できて便利なので、ぜひこの機会に覚えてくださいね！
- 「CSS Animation」について知りたい方はコチラのブログがいい感じです！参考にどうぞ
実装方法４
タイトル部分のJavaScript（ScrollMagic）
さあ！仕上げに入りましょう！
もうアニメーションの設定は終わっているので、
あとはスクロールイベントで該当のセクションに到達したらクラス.showを付与する！だけです。
スクロールイベントにはプラグインを使います。 スクロールイベントで動きをつける際、少し複雑な実装をする場合ボクは「ScrollMagic」を使っています。
- 「ScrollMagic」の良いところ
-
- 高機能！そしてバージョンアップが現在進行形で続けられている！（これ大事！2018年10月現在 v2.0.6）
- ホントに高性能な！アニメーションライブラリTweenMaxと親和性が高い！（同じGreenSock社のライブラリです、これ大きい！）
まずはライブラリを読み込みましょう！CDNから読み込む場合は下記になります。
気をつけたいのは、CDN版はローカル環境では動作しない点です。ローカル環境でテストされたい方は、ダウンロード版を利用しましょうね。
- 「ScrollMagic」のダウンロードはこちら
ではスクロールイベントで該当のセクションに到達したら「クラス.show」を付与する処理を実装してみましょう。
- 実装した内容
-
- 「#Section1」に到達したら「#Section1」に「クラスshow」を付与
- スクロールで上に戻った際の挙動は、「何もしない」に設定
もしスクロールで上に戻った際タイトルを消したければ
「reverse: false」となっているパラメータを「reverse: true」にすればOK
今回の完成DEMO！のように、セクションが複数ある場合は下記コードのように「Scene」を追加してください。
- 「ScrollMagic」の使い方についてはコチラのブログが分かりやすくていい感じです！参考にどうぞ
あとがき
いかがでしたか？
プラグインと違い実装に多少手間はかかったと思いますが、出来てしまえば汎用性のある使いやすいエフェクトになったのでは無いかと思います！
確かにプラグインでの実装は簡単ですが、思い通りのエフェクトがあるとは限りませんし、他のサイトと被りがち…
そういった時には、ぜひ今回の「セクションのタイトルがカッコ良く！表示される方法」その１を思い出してくださいね。