SIBYL System

just technical blog

サイトの背景画像をゆっくりスクロールさせる

   

background-anime

サイトトップページに背景を追加してアニメーションを加えました。

 

画像を以下を使用。ピングドラムのピクトグラムのデザインや色使いが好きなので真似してます。

pictgrams-512

CSSは以下、sctionタグで囲われてる領域の背景がスクロールします。また、スマートフォン等画面の小さいデバイスの場合は小さすぎて見えなかったり、消費電力増に繋がるので@mediaを使ってデバイスサイズでアニメーションの表示を切り分けています。

 

 

 - ART, CSS, Design , ,