こんにちは。chikaです。
サイト観察練習47回目②です。
前回は特設サイト・キャンペーンサイトから検索して、イラストを使ったサイト様を観察させていただいたところでした。
イラストを動かす方法にはどのようなものがあるのかを本日は検索していけたらなと思います。
ということで本日も15分でできるところまで。
---------------------
＜観察目安＞
・観察時間は15分
・SANKOU！さんの一番新しいサイト
・トップページのみ
・リンク要素の共通ルールをつかむ
（模写する際に見るべきポイント8のうちの１つ）
※しばらくポイントは絞らず自由に観察してみます
---------------------
今回はhoriba様のサイトを覗かせていただいている最中でした。
TOPにイラストを使ったサイト様は今までにも見てきたのですが、実際にどのように動かしているのかを調べるのははじめてになります。
どのようなキーワードで検索をすればたどり着けるでしょうか。
ひとまず「html css js イラストを動かす」で検索をかけてみます。
最初に出てくるのはやはり動くWebデザインアイデア帳というサイト様ですね。書籍でも持っておりますが（必要なところだけ見て積み本になってしまっているのですが）ちょっとしたアクセントに動きが欲しい時にお世話になりました。
見出し回りなどにもよさそうですね。なるほど。
そして見つけたワードが「要素をふわふわさせたい」
確かにふわふわしている感じでした。
色々検索して…
なんというキーワードで検索したかを思い出せなくなってしまったのですが、こちらのサイト様も発見したのでペタリ。
イラストをそれぞれ動かすのではなく画像にしてそれを動かすというのがなるほどでした。
ひとつづ設定するのもよいですが、確かにこの方法だとコードは少なくて済みそうな予感がします。
イラストを動かす小技ひとつとってもいろいろな方法があるので、実際に何を使うのかはその都度選んで使うのがよさそうですね。今回は画像にして動かすというアイデアを得たので引き出しがひとつ増えたような気がしました。
それではまた次回。