一枚の画像とCSS3のアニメーションプロパティを使って動画のように動く背景を実現するサンプルコード
こんにちは! 手軽に簡単におしゃれなコーディングを実現したいですよね？
コーディングは1日1ページが限度ですので、作業効率化は非常に重要です。
そんなわけで、私は常日頃サンプルコードを研究し、紹介しています。
一枚の画像とCSS3のアニメーションプロパティを使って動画のような背景を作る
今回はCSSだけで作れる1枚のパターン画像を無限ループすることで実現できるアニメーション背景を紹介します。
この処理を実現するには、高解像度の画像を使うこと、そしてできるだけシンプルなパターン画像を使うのがおすすめです。
HTMLコード
今回、HTMLは非常にシンプルです。
HTML
<div class="wrapper">
<h2 class="title">Pattern Animation</h2>
</div>CSS
CSSもそんなに難しくはありません。
背景画像を用意し、それを画面全体の背景色として指定しています。
CSS
.wrapper {
background: url("https://images.unsplash.com/photo-1465146633011-14f8e0781093?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80");
/*わかりにくい時にお使いください
background: url("https://images.unsplash.com/photo-1602526212101-12eb978b129a?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80");*/
color: #eee;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
animation: animation 100s linear infinite;
}
KAZU
勉強目的の方で、背景画像の動きの理解にお困りの方は、コメントアウトしているもう一方の背景画像を利用すると理解できるでしょう。
上記のコードにはアニメーションが適用されていますので、@keyframes animationを作るだけです。
CSS
@keyframes animation {
/*0%の部分は省略可能*/
0% {
background-position:0px 0px;
}
100%{
background-position:0px -1000px;
}
}上記のコードは実際には100%の部分だけ記載すればOKです。0%で指定している値はブラウザの初期値だからです。
今回は理解がしやすいように一応書いてます。
これを記入したら、background-positionに対するアニメーションが無限ループで行われているのを確認して完成です。
