新しいデザイン開始
2017-06-08
会社の人からデザインの参考にするため、メニューのボタンひとつを作ってもらい、それを元にしてデザインしてみた。
氷翠の永遠のテーマである「サイバー」なデザイン。非常に難しいものです。
家ではあまりPhotoshopを使っていません。
氷翠は元々イラストレーターを使う方なので。
そこで、イラストレーターを使って、デザインをしていきますが、最近ではまずスマホのデザインから入るのですね。
ということで、まずはスマホの大きさでイラストレーターを使ってデザイン。
しかも最初に作るものはメニューの部分から。ヘッダー、フッター、メニューを作り、コンテンツの部分はダミーとしておきます。念のためにこのダミーコンテンツは300vh。つまり3画面分の高さをわざとにもたせています。
スクロールしたときにどういった影響がでるのか、検証しなくてはいけませんから。だったらはじめから高さをつけておきます。
画像は実際にHTMLを組んだ画面です。
えぇ、なんとか完成しています。
まだデザインの段階なので、PHPは一切組んでおらず、HTML、CSS、Javascriptだけです。
更に、テーマが「サイバー」ということもあって、やはり動きがないとサイバーの雰囲気というのは出てこない。
ということで、アニメーションを盛り込んでみた。
現在、アニメーションを導入する方法として、Jqueryの「animateメソッド」を利用する。もう一つはCSSの「@keyframe」を利用する。この2つがあるのだが、どちらにするか。
アニメーションを開始するタイミングをjqueryで、あとはCSSで表現。
久々に濃い計算をすることになり、なかなか思うようにいかない。
しかし、そこは根性でなんとか自分のイメージ通りの動きを表現することができた。
まだ、メニューの部分の段階なので、これを公開するまでにはならないが、早くできあがることを祈りたいw
コメントを残す