【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
以上で完成です！
こちらの記事はいかがでしたか？
+1
+1
+1
+1
