混々と這い出るオバケ
再来月ぐらいに雪を降らせようかと思ったのですが、それでは忘れてしまいそうなのでふらふら～っとフライングしてしまおうといろいろ調べて試行錯誤しておりましたらこんなのできました。
といってもほぼほぼコピペした代物ですけれどもね。
1月後に近年、年々盛り上がりを増しているともっぱらの噂ハロウィンというものらしいので、そんなときにブログのにぎやかしにでも使ってみてはいかがでしょうか？
コードはこんな感じどえす。
<div class="Halloween"> </div>
<style type="text/css"><!--
@keyframes drop {
0% { background-position: 400px 400px, -500px 500px, 0 400px; }
100% { background-position: 0 0, 0 0, 0 0; }
}
@-moz-keyframes drop {
0% { background-position: 400px 400px, -500px 500px, 0 400px; }
100% { background-position: 0 0, 0 0, 0 0; }
}
@-webkit-keyframes drop {
0% { background-position: 400px 400px, -500px 500px, 0 400px; }
100% { background-position: 0 0, 0 0, 0 0; }
}
.Halloween {
background-color: #800080;
background-image: url('【画像１のアドレス】'), url('【画像２のアドレス】'),url('【画像３のアドレス】');
-webkit-animation: drop 10s linear infinite;
-moz-animation: drop 10s linear infinite;
animation: drop 10s linear infinite;
width:100%;
height:500px;
}
--></style>
ちょいとしたせつめい
とっても見づらくなるのでおすすめ致しませんが、<div class="Halloween">と</div>の間に画像やテキストを書き込めばアニメショーンを背景に絵や文章を表示させることができます。
ばっくぐらうんどぽじしょん
３枚の画像を使うときは「background-position:」のところに３組の数値が必要となります。
また前にある画像ほど前面に描画されます。
「画像２枚しか使わないよ～」というときは２組、１枚だけなら１組にしてね。
なおこの数値は座標を表しています。たとえば…
0%{background-position:400px 400px;}
100%{background-position:0 0;}
は、アニメーションをx座標400pxのy座標400pxから開始(0%のbackground-position)してx座標0のy座標0で終了(100%のbackground-position)してちょうだいということです。
ゴーストの画像サイズが400×400なのでちょうど画像の右下(400,400)から始めて左上(0,0)で終わるといった具合なので画像が左上に流れていきます。
２枚目の500×500のpumpkin画像は(-500,500)から(0,0)に向かうので右上に流れていきます。
３枚目の400×400のtomb画像は(0,400)から(0,0)に向かうので真上に画像が流れていきます。
この数字テキトウでも動かないこともないですが、ちゃんと画像サイズに合わせないとときどきスムーズに流れずひっかかったようになりますので、できれば合わせておきましょうね。
ちなみに、手っ取り早く雨や雪のように上から下に画像が流れるようにするには、0%と100%を入れ替えちゃえばいいですよ。
はいけいとじかん
白や黒を基調とした画像を使う場合には背景色と同化して見えなくなってしまわないように「background-color:」を適宜変えましょう。
「animation:」のところの「10s」はそのままずばり画像の流れ行く速さをコントロールするものです。お好みで変更なさってみてください。
また「linear infinite」もそのままズバリで、画像を延々流し続けなさいよと指示するものですから、これは消さないように残しておきましょうね。
え
いっちゃんやっかいなのは画像を用意することでしょう。１枚の画像を流すのであればあまり気にするところはありませんが、複数枚の画像を合わせるとなると背景を透過させたpng形式の画像でないとなりません。
だというのにコピペした画像はコピー元ではpng形式で提供してくださってはいても、うっとこに貼り付けたときにはたしかにpng形式ではあっても背景が塗りつぶされたものとなっていることがあります。
右クリックで「画像をコピー」あるいは「Ctr+C」派の方はたいていそうなりますのでご注意くださいね。
png形式で提供されている画像であれば右クリック「名前を付けて画像を保存」などダウンロードするようにすればこの事態を回避できることでしょう。
残念ながらjpg形式で提供されている場合はGIMPなどのソフトを使って背景を消し、png形式でエクスポートしたものを使うとよいでしょう。
ご自身で画像をこさえる場合は画像サイズや背景を消すこと、透過情報を含めてpng形式で保存することなどなどを意識してお忘れなきように。
と、このようにひとに説明しているようでいて実は自分に言い聞かせているのでした。おしまい。
よかったらどうぞ
同じ絵でよければこちらをどうぞ。画像は「コピー」ではなく「保存」してね。
 |
 |
 |
 |
雪の結晶の画像サイズは297×222です。
雪の結晶以外の画像処理が粗いのは「コピー」したものの背景をちまちまと削ったもので、できあがった後に「保存」すればいいのだということに気づき、「今となっては作り直すのめんどう」状態に陥ったためです。
ディテールを気にされる方はつぎにご紹介しますサイトより元画像を「保存」してつくってみてください。
わたしはまだGIMPに慣れないのですが、画像ソフトをそこそこ使える方であればちょちょいと10分とかからずできます。
そしてこちらが今回参考にさせていただいたサイトです。
CSSのみでアニメーションする背景を作る方法 | NIWAKASOFT
