【解放区在住氷翠 緑の閃光】氷翠のお気楽日記

新しいデザイン開始

2017-06-08 20:28

HTML+CSS > javascript > Jquery > デザイン > 開発

どうも、氷翠です。

会社の人からデザインの参考にするため、メニューのボタンひとつを作ってもらい、それを元にしてデザインしてみた。
氷翠の永遠のテーマである「サイバー」なデザイン。非常に難しいものです。

家ではあまりPhotoshopを使っていません。
氷翠は元々イラストレーターを使う方なので。
そこで、イラストレーターを使って、デザインをしていきますが、最近ではまずスマホのデザインから入るのですね。
ということで、まずはスマホの大きさでイラストレーターを使ってデザイン。
しかも最初に作るものはメニューの部分から。ヘッダー、フッター、メニューを作り、コンテンツの部分はダミーとしておきます。念のためにこのダミーコンテンツは300vh。つまり3画面分の高さをわざとにもたせています。
スクロールしたときにどういった影響がでるのか、検証しなくてはいけませんから。だったらはじめから高さをつけておきます。

画像は実際にHTMLを組んだ画面です。
えぇ、なんとか完成しています。

まだデザインの段階なので、PHPは一切組んでおらず、HTML、CSS、Javascriptだけです。

更に、テーマが「サイバー」ということもあって、やはり動きがないとサイバーの雰囲気というのは出てこない。
ということで、アニメーションを盛り込んでみた。

現在、アニメーションを導入する方法として、Jqueryの「animateメソッド」を利用する。もう一つはCSSの「@keyframe」を利用する。この2つがあるのだが、どちらにするか。

アニメーションを開始するタイミングをjqueryで、あとはCSSで表現。

久々に濃い計算をすることになり、なかなか思うようにいかない。
しかし、そこは根性でなんとか自分のイメージ通りの動きを表現することができた。

まだ、メニューの部分の段階なので、これを公開するまでにはならないが、早くできあがることを祈りたいw

コメントを残す

メールアドレスが公開されることはありません。