センスだけに頼らない！ CSSとJSで作るパーティクル表現のテクニック - ICS MEDIA
パーティクルやラインアニメーションなど、ウェブページにちょっと見栄えのする表現を加えてみたくなることはありませんか？ ICS MEDIAのトップページや弊社採用サイトでもこうした表現を実装していますが、思った通りの演出をコードで表現するのはなかなか難しいものです。技術は分かっても「自分にはセンスがないから……」と諦めてしまっている人もいるかもしれません。 この記事では、簡単なパーティクル表現を題材に、効果的なアニメーション表現のためのテクニックを紹介します。サンプルコードはブラウザー標準のWeb Animations APIを使用して実装していますが、CSSアニメーションやGSAP等のライブラリを用いても同様の実装は可能です。 基本のパーティクル 例題とする基本のパーティクルを見てみましょう。クリックすると中央の星からパーティクルが放射状に広がるアニメーションが再生されます。 デモを別画面
[CSS]スクリプト無しで、縦長ページの各セクションごとの高さを設定するテクニック
フルスクリーンサイズでデザインされた縦長ページの各セクションの高さは、表示高さのいっぱいだったり、次のセクションが少し見えるように実装します。 高さがいっぱいではない時、例えば80%, 90%だと通常はスクリプトでの実装を必要としますが、IE9+対応でCSS一行で簡単に実装できるテクニックを紹介します。
![[CSS]スクリプト無しで、縦長ページの各セクションごとの高さを設定するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd5c987dfa0c56fe670b813b7f4c439c96db29a2/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014110701-01.png)
デザインの科学『インタフェースデザインの心理学』
「ファミコン『ドラゴンクエストIV』のパッケージイラストの主役が、一番小さく描かれているのに、最初に目に入ってくるのはなぜか」 これについて、中村佑介氏の解説が目鱗だ→【イラストの見栄えが良くなる】中村佑介先生の公開講座が凄い！。本来は目立たせたいもの（主役）を大きく描くのが原則だが、彩度とコントラストを増やすことで、見やすい画面作りをしているという。 だが、もう一つ、このデザインには「主役」を主役たらしめるテクニックがある。それは以下の通り。 1. 人は、人の顔に一番興味を持つ 2. 人は、画面の中で、顔を最初に見る 3. 人は、画面の顔の視線の先に注意を向ける この原則を知ったのが、本書だ。人はどのように認知し、判断し、行動し、そしてエラーを引き起こすのかについて、ウェブやアプリのデザイナー向けに、「100の指針」という形でまとめたもの。 「嘘のレベルは伝達手段で変わる」や、「読むと理
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
ウェブデザイナーにお勧め！フォントやタイポグラフィの知識・テクニックを学ぶまとめ | コリス
HugeDomains.com
