最近よく見るようになりましたエフェクトの実装方法です。海外のおしゃーなウェブサイトは必ずといっていいほど取り入れているように思います。 デモ作りました。要するにこういうやつです。 以下、これのつくりかたを紹介します。 基本的な考え方 アニメーションはCSS3のtransitionで制御する アニメーションの開始トリガーをjsで制御する という感じで、CSS3とjsのあわせ技で頑張ります。 具体的なマークアップ コーディング方法です。 HTML <div> <section class="fadein"> <h2>情報設計</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section> <section class="fadein"> <h2>サイトマップ</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section
http://imasashi.net/element-fadein.htmlで紹介するエフェクトのデモページです。 ↓ スクロールしてください。 エフェクトが無い状態 ただ表示されているだけです。 情報設計 カオス状態の情報を様々な制限条件下において最適化する、一連の行為を指します。 何を以って最適と呼ぶかは、目的によって変化します。 サイトマップ ウェブサイト制作において、設計された情報群をウェブページ単位にグルーピングし、可視化したものです。 ナビゲーション設計のベースになります。 ワイヤーフレーム サイトの全体における情報ポジションやナビゲーション設計を踏まえて、ページ毎の情報をアレンジしたものです。 情報設計行為における最終成果物と考えられます。 ↓ スクロールしてください。 エフェクトがある状態 画面内に表示されるとフェードインします。 情報設計 カオス状態の情報を様々な制限条
Web開発産業がブームに沸いている昨今、こんな質問をよく耳にします。「どうやったらWeb開発者になれますか?」。 質問の仕方が間違っていると思います。尋ねるのなら、こちらのほうが良いでしょう。「Web開発者として成功するにはどうすれば良いですか?」。 このように尋ねるのが重要な理由は、Web開発者は世界中にたくさんいますが、成功している人は限られているからです。 この記事の目標は、ライバルよりも秀でるための考え方、知識、スキルを習得し、Web開発者として成功することです。会社員なのか、フリーランスなのかは問いません。 また、「プロになるための壁」を必死に破ろうとしているWeb開発志望者やWeb開発者にも読んでもらいたい内容です。 これから紹介する21個のステップを実行すればWeb開発者として成功し、さらに上を目指せます。 1. Web開発に対して本当に情熱がありますか? 「情熱」はしばしば
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く