開発

CSSで手軽に要素を動かす。コピペで動きのあるサイトデザインを実現【プログラミング】

4分6秒

おはモニ。
どうもひめたそん@himetasonです。
今回も覚書ですよ。

ブログの見た目に動きをつける簡単な方法

最近のWordPressテーマは動きのあるデザインが多いですね。
僕の使用しているこの「SANGO」もフワフワと可愛くアニメーションします。

現在製作しているテーマやサイトも動きをつけていまして、CSSだけで簡単にできるんですよ。
覚書を兼ねてコードをメモしておきます。

誰かの参考になれば幸いです。

要素を上下、左右などスライド表示

細かい説明は省きまして早速コードですよ。

[codebox title="CSS"] 
@-webkit-keyframes 好きな名前{ 
0%{ opacity: 0; 
transform: translateX(300px);
} 
100%{ opacity: 1;
transform: translateX(0);
}
}
[/codebox]

このコードをコピペです。
好きな名前の部分にアルファベットで名前をつけてあげてください（例えばleft-rightなど）。
要素に呼び出す際に使います。

この表記だと要素は右から左へスライドしながら、透過された状態から設定値に向かうにつれて透過解除されます。
各々の数字を弄ってみてください。

例えば300pxの部分を-300pxにすることで左から右へのスライドに変わります。
そしてtranslateXをtranslateYやtranslateZに変えれば軸が変わるので別の方向への動きになります。
translateを設定しなければその場で透過から表示される演出になりますね。

色々弄ると理解できると思うので遊んでみてください。
これだけでもかなり表現の幅は広がりますのでね。

とりあえずこれで土台は完成したので次は実際に動かします。

動かしたい要素にアニメーションを呼び出す

またまた早速コードです。

[codebox title="CSS"] 
動かしたい要素 {
animation-name: 先ほど指定した名前;
animation-duration: 3s;
}
[/codebox]

動かしたい要素の中に上記のコードをコピペでオッケーです。
先ほど作成したアニメーションを設定した名前で呼び出して動きの時間を指定しているだけですね。

3sの数字を変えればアニメーション時間が変わります。
実装自体は簡単ですね。

テーマを自作している人などは要素のclassなどを自分で設定していると思うので問題ないと思います。
しかし既存テーマのカスタマイズなどで要素のclassがわからない場合もあるかと思います。

そんな時はGoogleChromeで自分のブログを表示して動かしたい部分を右クリックし検証してみてください。
そうすると要素のclassが見れます。
場合によってはidなこともあるので気をつけてくださいね。

id= #で始まる

class= .で始まる

と覚えておくといいですよ。

以上でアニメーション完成です。

まとめ

簡単な覚書としてまとめました。
しかし表現の幅は大きく広がるのでオリジナリティを出すためにもオススメです。
またコピペで簡単に実装できますのでね。

実装した後に各項目を弄ってみてください。
仕組みが身体で理解できると思います。

おそらくアニメーションで遊び始めたらキリがないくらい楽しいので気をつけてくださいね。
ブログ記事を書く時間が減ってしまうので。

独学でWEBプログラミング学習する際にオススメの本とサイト紹介しています。

独学でWEBプログラミングを始める為におすすめの本、サイト【自宅で手軽に始められます】
独学でWEBプログラミングを始める為におすすめの本、サイト【自宅で手軽に始められます】
2019.2.4
おはモニ。 どうもひめたそん@himetasonです。 ブログの運営やサイトの運営をしていると、デザインなど色々な分野に興味が出てくると思います。 WordPressのテーマをカスタマイズしたい。思うようなレイアウトを実現したい。 はたまた自分で１から作ってしまいたいという人もいるかもしれません。 ...

それでは良いデザインライフを。

ではまた！

おすすめの記事