新着記事プロフィールmenu今風のローディングアニメーション(ローディングエフェクト)の考え方とサンプル例2017.8.18CSSこんにちは。今日は今風のカッコいいローディングアニメーション(ローディングエフェクト)の作り方についての考え方とサンプルをブログに書きたいと思います。何も言わずにサンプルをコピペすれば即導入できる仕様になっておりますので、とにかくイケてるやつ作って!と言われた可哀想な方は是非ともお役立ていただければ幸いです。そのかわり広告をワンクリックしてね。最近のローディングアニメーションとちょっと昔のアニメーションスマートなデザイン、カッコイイWebサイトにはカッコいいローディングアニメーションがつきものです。クリックした途端にスルスルっと動くアニメーションに「このサイトはいいぞ!」と予感したことがある方は多いはずです。これが面白いことに、そういう派手目な演出のローディングアニメーションって「Webサイト」独自の概念で、アプリでは見かけませんね。諸説、いろんな考えがあると思いますがUIではなくUXのサポートに近いのかなと思ったります。あとはユーザーのスクリーニングにある程度役立ったり、僕のポートフォリオサイト(2017年)では、訪れた方々へメッセージを出してみたりしました。ポートフォリオ(2017)で、話は戻り、そういうスマートなローディングアニメーションが流行ったのはここ数年じゃないかな?と感じています。(業界は長くはないのですが...すみません。)昔のローディングアニメーションといえばGIFアニでギアとか○がくるくるしてるだけでしたね。今ではそんなコトしてたらせっかくのデザインもコーダーのせいで台無しです。昔のアレでは最近のローディングアニメーションとは?僕なりの考えは次の項で。最近のローディングアニメーションに求められるもの当然のことながら、レスポンシブミニマルであること今流行りのスマートなインタラクション解像度をフォローするでも、そこだけに時間を割くのはナンセンス...こんな感じかな、と思います。用途にもよりますが、その時点で上で挙げたGIFアニは脱落ですね。いうことで、僕はいつも、ごくごく簡単なHTMLとCSS、Javascript(今回はjQueryで書いてるけど)で構築します。ラクでカッコいいローディングアニメーションの例まずはサンプル。ラクでカッコいいローディングアニメーションzipをダウンロードする「LOADING」という文字が点滅していて、かつ最近(2017年時点)よく見かけるマスクアニメーションがスルスルと覆いかぶさり「LOADED!読み込みが終わったぜ?準備はどうだい、ブラザー」とテキストが切り替わります。読み込みが終わると、上下に幕が開きます。すべてHTMLとCSS、jQueryで行っています。シンプルなHTMLやっと本題です。HTMLはこんな感じで行きましょう。class="loadingAnim_line"></i></div>これだけあれば十分です。内容によってはdivだけでも結構です。疑似要素を使ったイケてるCSSCSSです。:after疑似要素を使います。今回はdivの中に更にiがあるので、2つのDOMで計4つの疑似要素が作れることになります。'LOADED!';}SassでコンパイルしたCSSをペタッと貼っているため少し長くなってしまいましたが、順に説明いたします。アニメーション全体の親要素.loadingAnimまずは「.loadingAnim」がアニメーション全体を内包する親要素ですので、画面全体を覆うようにします。デモでは背景色が付いていますが、今回はロード後に上下にパッと開くような動きにしたいので、.loadingAnimに直接指定はしません。.loadingAnim:afterの疑似要素で行います。テキストを表示している.loadingAnim_line次に、テキストを表示する領域のCSSです。直接テキストを書いているわけではありません。.loadingAnim_lineの:beforeのcontentプロパティに「LOADING」と表示するように書いています。後にjQueryでテキスト操作せずともCSSのみで内容を入れ替えることができるためです。これだけだと、背景の上に「LOADING」と書いてあるだけになってしまい、待たされているユーザーは不安になってしまいます。アニメ無しサンプルなので、.loadingAnim_line:beforeと、.loadingAnim_line:afterにアニメーションを設定します。(設定は後述)ラクでカッコいいローディングアニメーションなんとなく進んでる気がしませんか?要素に動きがあるだけで、ローディングが進んでいる印象を与えることに成功しました。最後に、「.loaded」と書いてあるところがあります。これは、読み込みが終わったあとの処理をするためにjQueryで「.loading」クラスをつけるので、そのときに動きです。.loadingAnim_line:before、.loadingAnim_line:afterのアニメーションはとまり、.loadingAnim:beforeと.loadingAnim:afterが上下に移動します。「LOADING」が「LOADED!」に変わる指示が書いてあります。#fff;}}そして上記がアニメーションです。);});$(window).on(‘load’〜)は、ドキュメントの読み込みが終わったときのイベントになります。その後はbodyに先程の「.loaded」をつけ、各処理を発動させます。.loadedがつくことでアニメーションが止まり、上下に背景が移動し、かつ、「LOADING」が「LOADED!」になるわけです。すべてCSSで管理していますね。この項の最大のポイントは、アニメーションが終わったことで発生するイベント「transitionend」を感知して.loadingAnim全体を削除していることです。バグの原因になる可能性のある不要なDOMは消しているわけです。);なんかでも出来ます。removeは少し面倒かもしれませんがJavascriptでも書けてしまいます。これで完成です!Wow!ラクでカッコいいローディングアニメーションこだわりのポイント人それぞれ状況によりけりなので読み飛ばしていただいて結構ですが、アニメーションは早すぎないことメリハリの有る変化をすることが大事かな、なんて思っています。今回はtransitionにeaseInOutCircを指定したり、他のところは一定のペースでヌルヌル動くようにしています。0s;この点は「時間割くのはナンセンス!」といって疎かにしてしまうと、途端に野暮ったくなってしまいます...さいごにいかがでしたか。持論ではありますがお役立ていただければ幸いです。ちなみにボツになっていますので、そのままコピペしてご利用いただいてもおそらく滅多にカブらないかな、と思います。音楽Profile東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。