Facebookも実装しているインターフェイスプレビューが導入できるスタイルシート「mocka」

Facebookも実装しているインターフェイスプレビューが導入できるスタイルシート「mocka」

Facebookも実装しているインターフェイスプレビューが導入できるスタイルシート「mocka」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 年間$149ドルで10万点以上の映像素材をダウンロードし放題!
  • このエントリーをはてなブックマークに追加

mockaは、インターフェイスプレビューに対応するためのスタイルシートです。インターフェイスプレビューというのは、コンテンツが表示されるまでの間に、ダミーのコンテンツを表示しておく手法です。事前に表示される予定のコンテンツを表示することで、読み込み時間のストレスを軽減してくれます。

Facebookにアクセスするとわかりやすいですが、ニュースフィードの投稿が表示されるまで、以下のようなダミーの投稿が出てきます。

インターフェイスプレビュー

投稿だけじゃなく、メッセージも同じようにインターフェイスプレビューが表示されますね。これがインターフェイスプレビューです。FacebookやSlack等が導入しています。

mockaは、このようなインターフェイスプレビューを導入するためのスタイルシートです。デモはこちらのページで確認できます。

スポンサードリンク

mockaの使い方

mockaのダウンロードと設置

GitHubからmockaをダウンロードします。distフォルダに入っている「mocka.min.css」をサーバーにアップロードしてください。アップロードするのは「mocka.css」でもOKです。

ファイルをアップロードしたら、<head>~</head>内に以下を追加して、mockaを読み込みます。

<link rel="stylesheet" href="mocka.min.css">
HTMLのマークアップ

ダミー画像やダミーテキストを表示したい箇所に、以下のHTMLを記述します。

<div class="mocka-container">
<span class="mocka-media"></span>
<span class="mocka-heading"></span>
<span class="mocka-text"></span>
</div>

「mocka-media」はダミー画像、「mocka-heading」はダミーの見出し、「mocka-text」はダミーのテキストです。

見た目を変えたい場合

見た目を変えたい場合は、mocka.min.cssもしくはmocka.cssをカスタマイズします。mocka.min.cssは編集しにくいので、mocka.cssを編集した方が良いでしょう。

中身は非常にシンプルで、CSSは167行しかありません。

@-webkit-keyframes mocka-dot-a {
8% {
-webkit-transform: translateY(0);
}
22% {
-webkit-transform: translateY(-0.3125rem);
}
36% {
-webkit-transform: translateY(0);
}
}
@keyframes mocka-dot-a {
8% {
transform: translateY(0);
}
22% {
transform: translateY(-0.3125rem);
}
36% {
transform: translateY(0);
}
}
@-webkit-keyframes mocka-dot-b {
36% {
-webkit-transform: translateY(0);
}
50% {
-webkit-transform: translateY(-0.4375rem);
}
64% {
-webkit-transform: translateY(0);
}
}
@keyframes mocka-dot-b {
36% {
transform: translateY(0);
}
50% {
transform: translateY(-0.4375rem);
}
64% {
transform: translateY(0);
}
}
@-webkit-keyframes mocka-dot-c {
64% {
-webkit-transform: translateY(0);
}
78% {
-webkit-transform: translateY(-0.3125rem);
}
92% {
-webkit-transform: translateY(0);
}
}
@keyframes mocka-dot-c {
64% {
transform: translateY(0);
}
78% {
transform: translateY(-0.3125rem);
}
92% {
transform: translateY(0);
}
}
.mocka-container {
position: relative;
width: 20rem;
height: 9.5rem;
background: #fafafa;
border-radius: 0.125rem;
border: 0.0625rem solid #acacac;
}
.mocka-media, .mocka-media:before, .mocka-media:after, .mocka-heading, .mocka-heading:before, .mocka-heading:after, .mocka-text, .mocka-text:before, .mocka-text:after {
position: absolute;
background: #c9c9c9;
}
.mocka-media {
top: 0.5rem;
left: 0.5rem;
width: 4rem;
height: 4rem;
}
.mocka-media:before, .mocka-media:after {
top: 2rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 1rem;
background: #7a7a7a;
content: '';
}
.mocka-media:before {
left: 0.75rem;
-webkit-animation: mocka-dot-a 1.8s ease infinite;
animation: mocka-dot-a 1.8s ease infinite;
}
.mocka-media:after {
left: 1.75rem;
-webkit-animation: mocka-dot-b 1.8s ease infinite;
animation: mocka-dot-b 1.8s ease infinite;
}
.mocka-heading {
top: 1.125rem;
left: 5rem;
width: calc(100% - 5.5rem);
}
.mocka-heading, .mocka-heading:before {
height: 0.875rem;
}
.mocka-heading:before, .mocka-heading:after {
content: '';
}
.mocka-heading:before {
top: 1.5rem;
width: 85%;
}
.mocka-heading:after {
top: 1.375rem;
left: -1.75rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 1rem;
background: #7a7a7a;
-webkit-animation: mocka-dot-c 1.8s ease infinite;
animation: mocka-dot-c 1.8s ease infinite;
}
.mocka-text {
top: 5.25rem;
left: 0.5rem;
width: calc(85% - 1rem);
}
.mocka-text, .mocka-text:before, .mocka-text:after {
height: 0.75rem;
}
.mocka-text:before, .mocka-text:after {
content: '';
}
.mocka-text:before {
top: 1.25rem;
width: calc(120% - 1rem);
}
.mocka-text:after {
top: 2.5rem;
width: 90%;
}

あとがき

今後はローディングアニメーションの代わりに、インターフェイスプレビューを導入するところが増えてくるかもしれませんね。

mockaを使えば簡単にインターフェイスプレビューが導入できますので、ぜひお役立てください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。