【jQuery】ローディングアニメーション GIF版

初めに

どうも、NNCの石上です。今回はローディングアニメーションのGIF版を作っていきます。ただ、基本的なシステムはCSS版とほとんど変わらないので、サクサクやっていこうと思います。

ローディングアニメーション GIF版

サイトにアクセスすると、画像のようなアニメーションが見えます。

読み込みが完了すると、このアニメーションがフェードアウトして、メインコンテンツが現れます。

基本的な流れはCSS版と変わりません。

実際のコード

<div id="loading" class="l-loading">
    <img src="img/flat-preloaders/128x128/Preloader_2/Preloader_2.gif" alt="">
</div>
<main class="l-main">
       <p>
           Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut iusto ipsam non facere quam maxime obcaecati optio atque nihil error quaerat dolorem quibusdam ipsa quod, laudantium, ullam temporibus reiciendis cumque?
           Quis, repellendus error. Ex reprehenderit, consequuntur, expedita tenetur voluptas quaerat rerum repudiandae sapiente a inventore quod necessitatibus odio ipsum reiciendis. Animi sit eos temporibus quos obcaecati explicabo minus, ipsam cumque!
           Quod blanditiis quo minus quia facilis nobis! Ipsam vero accusantium cum numquam tenetur saepe quasi blanditiis consequuntur repudiandae! Dolorem tempore impedit voluptatibus quidem corrupti sint vel harum, nihil dignissimos doloremque!
           Accusantium, praesentium reiciendis dicta commodi labore rem cumque similique illo numquam molestias perspiciatis iusto explicabo architecto culpa eaque, dolorem fugit quibusdam nostrum impedit vero porro minima officia! Vel, quia adipisci.
       </p>
       <p>
           Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut iusto ipsam non facere quam maxime obcaecati optio atque nihil error quaerat dolorem quibusdam ipsa quod, laudantium, ullam temporibus reiciendis cumque?
           Quis, repellendus error. Ex reprehenderit, consequuntur, expedita tenetur voluptas quaerat rerum repudiandae sapiente a inventore quod necessitatibus odio ipsum reiciendis. Animi sit eos temporibus quos obcaecati explicabo minus, ipsam cumque!
           Quod blanditiis quo minus quia facilis nobis! Ipsam vero accusantium cum numquam tenetur saepe quasi blanditiis consequuntur repudiandae! Dolorem tempore impedit voluptatibus quidem corrupti sint vel harum, nihil dignissimos doloremque!
           Accusantium, praesentium reiciendis dicta commodi labore rem cumque similique illo numquam molestias perspiciatis iusto explicabo architecto culpa eaque, dolorem fugit quibusdam nostrum impedit vero porro minima officia! Vel, quia adipisci.
       </p>
       <p>
           Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut iusto ipsam non facere quam maxime obcaecati optio atque nihil error quaerat dolorem quibusdam ipsa quod, laudantium, ullam temporibus reiciendis cumque?
           Quis, repellendus error. Ex reprehenderit, consequuntur, expedita tenetur voluptas quaerat rerum repudiandae sapiente a inventore quod necessitatibus odio ipsum reiciendis. Animi sit eos temporibus quos obcaecati explicabo minus, ipsam cumque!
           Quod blanditiis quo minus quia facilis nobis! Ipsam vero accusantium cum numquam tenetur saepe quasi blanditiis consequuntur repudiandae! Dolorem tempore impedit voluptatibus quidem corrupti sint vel harum, nihil dignissimos doloremque!
           Accusantium, praesentium reiciendis dicta commodi labore rem cumque similique illo numquam molestias perspiciatis iusto explicabo architecto culpa eaque, dolorem fugit quibusdam nostrum impedit vero porro minima officia! Vel, quia adipisci.
       </p>
       <p>
           Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut iusto ipsam non facere quam maxime obcaecati optio atque nihil error quaerat dolorem quibusdam ipsa quod, laudantium, ullam temporibus reiciendis cumque?
           Quis, repellendus error. Ex reprehenderit, consequuntur, expedita tenetur voluptas quaerat rerum repudiandae sapiente a inventore quod necessitatibus odio ipsum reiciendis. Animi sit eos temporibus quos obcaecati explicabo minus, ipsam cumque!
           Quod blanditiis quo minus quia facilis nobis! Ipsam vero accusantium cum numquam tenetur saepe quasi blanditiis consequuntur repudiandae! Dolorem tempore impedit voluptatibus quidem corrupti sint vel harum, nihil dignissimos doloremque!
           Accusantium, praesentium reiciendis dicta commodi labore rem cumque similique illo numquam molestias perspiciatis iusto explicabo architecto culpa eaque, dolorem fugit quibusdam nostrum impedit vero porro minima officia! Vel, quia adipisci.
       </p>
</main>
/* ローディング画面 */
.l-loading {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #191919;
  transition: all 0.5s 5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.l-loading.loaded {
  opacity: 0;
  visibility: hidden;
}
.l-main {
  width: 1000px;
  margin: 0 auto;
}
p {
  margin-top: 50px;
  font-size: 18px;
  letter-spacing: 1px;
}
window.onload = function() {
	var loading = $('#loading');
	loading.addClass('loaded');
}

ローディングアニメーションをCSSで実装する方法は他の記事でお伝えしましたが、今回はGIFアニメーションを用います。(なので、CSSの記述はかなりシンプルになりました)具体的な実装方法もすごく簡単で、gif形式のデータをimgタグで記述するだけです。Javascriptも全く変わりません!

解説

するようなことはほとんどありません。
GIFアニメーションをあらかじめ作成しておいて、それをimgタグでHTML上に記述すればOKです。こちらもCSSアニメーションと同様、自分で作成することも可能なのですが、あらかじめWeb上でフリーのものが公開されています。今回は「FLAT PRELOADERS」を利用しています。データをダウンロードして、使いたいものをHTMLに組み込みましょう。

他にもいろんなサイトで提供されていますので、そちらもご紹介しておきます。

FLAT PRELOADERS
FREE Minimal Loop Preloaders
PRELOADERS

以上で完成です!

RECENT ENTRIES

  • 【Javascript】GSAPで高度なアニメーションをお手軽に実装しよう

    VIEW MORE
  • 【Javascript】GSAPを使ってアニメーション実装をもっと自由に!

    VIEW MORE
  • 【Jsライブラリ】vanilla-tilt.jsで目を引くホバー演出を実装しよう

    VIEW MORE

CONTACT

contact