制作実績よくあるご質問お電話でのお問い合わせ・ご相談06-4792-7678お問い合わせトピックスHOMEトピックスホームページ制作HTML/CSS左から右に現れて文字だけ残るCSSアニメーション左から右に現れて文字だけ残るCSSアニメーション2019.06.04HTML/CSS最近のWEBサイトのトレンドは動きのあるものが増えてきていますよね。今回はその中でもよく見かける色付きのラインが横から現れて消えていったその下にテキストが現れるというアニメーションの作成方法をご紹介します。動きのDEMOHTML・CSSの書き方HTMLサンプルCSSサンプルワンランクUP1:javascript・jQueryでより汎用的に!ワンランクUP2:animationを滑らかにするまとめ動きのDEMO左から右に現れて文字だけ残るCSSアニメーション今回の完成目標は上記のような感じです。本サンプルでは一回限りの動きですので、再度確認されたい場合は画面を更新してお確かめください。HTML・CSSの書き方HTMLサンプルHTMLのコードは下記になります。これはサンプルですので、class名などは実際に試される場合は任意のお名前でお作りください。今回は通りすぎるというイメージから名前をpassingとして設定してみました。class="passing-txt">左から右に現れて文字だけ残る<br>CSSアニメーション</div></div></div></div>ちなみに何個もdivで囲っていますが、実際にはもっと省略していただいても構いません。CSSサンプルCSSのコードは下記になります。これはあくまでサンプルですので、色や文字の大きさなどお好きに変更してください。forwards;}</style>ワンランクUP1:javascript・jQueryでより汎用的に!上記の記述で動きは実装できたでしょうか?動きが実装できたら、今度は実際にWEBサイトでも使用したいところですが、上記の記述だけでは実は汎用性がありません。ページの一番上に設定してファーストビュー内に収まっているならば問題ありませんが、ページの中腹などで使用したくともアニメーションはページにアクセスした時点で動きが始まってしまいます。実際に運用するときはスクロールに合わせて動くようにjsもしくはjQueryを使ってclassを付与して、classが付いた時にanimationが動くようにするのが、実際の運用のポイントです。今回のサンプルで言えば、js・jQueryで付与するclassは「move」になります。任意の名前ですのでお好きなものを命名してください。今回はjQueryのサンプルもご用意しました。実際にスクロールによって動きを付けるには下記のようなjQueryを記載しましょう。4){$(this).addClass('move');}});});</script>ワンランクUP2:animationを滑らかにするCSSアニメーションを実装すると動きがカクつくことはありませんか?それを改善するCSSの記述方法があります。上記のCSSサンプルにも記載していたものですが、下記になります。0);</style>この記述をすると普段CPUで処理しているものをGPUを使って処理してくれるらしく、アニメーションの動きが滑らかになるそうです。まとめいかがだったでしょうか?CSSを利用したアニメーションは近年当たり前のように使われるようになってきていますので、ぜひ自社のWEBサイトにも取り入れてみてください。今回のサンプルを応用すれば文字だけでなく画像などを表示させるときの表現にも使えますね。今回は単色の背景色でしたがグラデーションにするなどもおすすめです。最近よく見る動きのひとつですので、ぜひお試しください。