snowstorm.js という、雪を降らせるだけの スクリプトがあるのですが、少しカスタマイズして雪のキャラクタに ❄ を使って、一つ一つ廻すデモを作ってみました。 snowstorm の一つ一つを廻すデモ ▼ 以下本編 重要なのは、３つの部品に注目する事です。 @keyframes これは、どのようなアニメーションをするかの定義で、根本的なものです。簡単な記述では、最初と最後を記述して( from to または 0% 100% ) としてその間を CSS に補完させます。 定義は、一つあればどこからでも参照できます。その際、コンテンツの animation で、@keyframes で指定した名前を指定します。 複数に変化を分割可能で、回転ですと 0% 100% でいいですが、複雑な変化を行う場合は、0% 20% 50% 100% のように変化の段階を指定できます。 animation アニメーションする為の時間と、その時間をいくつに分割するかを指定します。また、名前を指定して、どのようなアニメーションをするかを決定します。ですから、@keyframes とはペアで記述する必要があります。 box-shadow box-shadow を使って、回転している残像を一括で作成しています。丸く表示されているのは本体が border-radius: 50% で丸くなっているからで、本体は中心に描画されてその周りを複数の不透明度の違う円が並んでいます。それを回転する事によって、このようなアニメーションが実演されます。
<style type="text/css">
/*
アニメーションの実体
※ フレームの最初と最後でどういう状態にするか
※ 同じアニメーションなら一つ定義して複数から参照する
*/
@-webkit-keyframes ajax-loader-rotate {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes ajax-loader-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-o-keyframes ajax-loader-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes ajax-loader-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* アイコン */
.ajax-loader-icon {
/* 元の div の背景色( 意味が解るように着色/通常は指定しない ) */
/* background-color: #e0e0e0; */
/* テスト表示位置の調整 */
margin: 20px;
opacity: .8; /* 単独では特に必要無い */
display: block; /* div はもともとブロック。他の要素用 */
border-radius: 50%; /* 元の形状を丸くする為 */
font-size: 18px; /* 位置指定を em でしているので、ここを変更すると半径変更 */
width: 5px; /* サイズ変更 */
height: 5px;
/* em を使うと、font-size にサイズを連動させる事ができる */
/* width: .25em; height: .25em; */
/* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
box-shadow:
0 -.4em 0 0 rgba(50,0,0,1),
-.28em -.28em 0 0 rgba(50,0,0,.75),
-.4em 0 0 0 rgba(50,0,0,.50),
-.28em .28em 0 0 rgba(50,0,0,.25)
;
/*
アニメーションのフレームの秒数といくつに分解するか
たまたま、8つに分解していい感じになっている様子
0.85s も適当。一周するのに必要な時間
*/
-webkit-animation: .85s ajax-loader-rotate steps(8) infinite;
-moz-animation: .85s ajax-loader-rotate steps(8) infinite;
-o-animation: .85s ajax-loader-rotate steps(8) infinite;
animation: .85s ajax-loader-rotate steps(8) infinite;
}
/* テスト用の大きな DIV */
.ajax-loader {
/* 元の div の背景色( 意味が解るように着色/通常は指定しない ) */
/* background-color: #e0e0e0; */
/* テスト表示位置の調整 */
margin: 100px;
opacity: .8; /* 単独では特に必要無い */
display: block; /* div はもともとブロック。他の要素用 */
border-radius: 50%; /* 元の形状を丸くする為 */
font-size: 150px; /* 位置指定を em でしているので、ここを変更すると半径変更 */
width: 40px; /* サイズ変更 */
height: 40px;
/* em を使うと、font-size にサイズを連動させる事ができる */
/* width: .25em; height: .25em; */
/* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
box-shadow:
0 -.4em 0 0 rgba(50,0,0,1),
-.28em -.28em 0 0 rgba(50,0,0,.75),
-.4em 0 0 0 rgba(50,0,0,.50),
-.28em .28em 0 0 rgba(50,0,0,.25)
;
/*
アニメーションのフレームの秒数といくつに分解するか
たまたま、8つに分解していい感じになっている様子
0.85s も適当。一周するのに必要な時間
@keyframes と名前でリンク
*/
-webkit-animation: .85s ajax-loader-rotate steps(8) infinite;
-moz-animation: .85s ajax-loader-rotate steps(8) infinite;
-o-animation: .85s ajax-loader-rotate steps(8) infinite;
animation: .85s ajax-loader-rotate steps(8) infinite;
}
</style>
<div class="ajax-loader-icon"></div>
<div class="ajax-loader"></div>
box-shadow については、以下を参照 CSS3 : box-shadow の影分身の解説 jQuery のスライダーで box-shadow の影分身の効果をリアルタイムに確認する IE10 の @keyframes @keyframes rule (Internet Explorer)
タグ：CSS3
特徴その (3)
DIV 等に指定する事によって、スクロール可能な表示エリアを容易に作る事ができます。また、オプションで最大表示するアイコンを表示して使う事もできます( その場合表示エリアをダブルクリックしても最大化されます )
▼ 最大化前
▼ 最大化後
特徴その (4)
とても簡単な設定
この画像を使用するページと同じフォルダに置いて、scriptpath:'' とすると、カレントフォルダのものを使用します。URL を設定すれば固定位置の画像を使用できると思います( ソースを読んで確認しました )
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
