サイトの背景画像をゆっくりスクロールさせる
サイトトップページに背景を追加してアニメーションを加えました。
画像を以下を使用。ピングドラムのピクトグラムのデザインや色使いが好きなので真似してます。
CSSは以下、sctionタグで囲われてる領域の背景がスクロールします。また、スマートフォン等画面の小さいデバイスの場合は小さすぎて見えなかったり、消費電力増に繋がるので@mediaを使ってデバイスサイズでアニメーションの表示を切り分けています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@media screen and (min-width: 640px) { section { margin: 0; background: url("img/pictgrams-512.png"); -webkit-animation: bgscroll 30s linear infinite; animation: bgscroll 30s linear infinite; } .container-narrow { padding: 60px; } } @-webkit-keyframes bgscroll { 0% { background-position: 0 0; } 100% { background-position: -0 512px; } } @keyframes bgscroll { 0% { background-position: 0 0; } 100% { background-position: 0 512px; } } |