[CSS]水平に配置したセクションを分けるスタイルのさまざまな素敵なテクニック | コリス

2013/10/06 271 users コリス Styles セクション CSS テクニック

1ページに複数のセクションを水平に配置した際に、それらの区切りとなるさまざまなスタイルを紹介します。 縦長の1ページで構成されたプロモーションサイトやポートフォリオなどで見かけるものだけでなく、こんなこともできるのかとアイデアが素晴らしいものもたくさん！ A collection of separator styles デモページではざっと30種類の素敵なラインがスタイルされています。 デモページ... 続きを読む

Googleに学ぶ、Google Maps APIでできること（デモや技術情報など） | コリス

2012/10/28 119 users 補足 コリス Googleマップ コンテンツ 特徴

Google Maps APIを使ってできるユニークな特徴を備えたデモが楽しめるGoogleのプロモーションサイトと補足として技術情報を紹介します。 Google Maps API - More Than A Map デモでは6つのGoogleマップを使ったコンテンツと、開発者向けリソースや更に高度なデモを楽しめます。 Googleマップ：ベースマップ Googleマップ：サテライト Google... 続きを読む

文字を映画ばりにカッコよくアニメーションさせるjQueryプラグイン「jWise.js」:phpspot開発日誌

2011/11/16 72 users jQueryプラグイン phpspot開発日誌 文字 以下

HavaLite 文字を映画ばりにカッコよくアニメーションさせるjQueryプラグイン「jWise.js」 アニメーション系は説明が難しいので以下のデモページを見ていただくのが一番速いです。 デモページ 数種類のアニメーションがあり、切り替えタイミングやフェードの状態なんかはオプション指定できます。 あとは $(element).jwise(options); で動きます プロモーションサイトなん... 続きを読む

スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ - かちびと.net

2011/07/06 694 users NIKE パララックス効果 パララックス メモ スクロール

最近ちょくちょく見かけるようになったので 調べた事をメモ。スクロールすると、複数 要素が、それぞれアニメーションするような Webデザイン。視差効果を生み出すような パララックス効果を取り入れたものや、ユニ ークにアニメーションするものなどなど。 以前見たNIKEのプロモーションサイトでちょっと心惹かれたんですけど、特に最近よく見かける気がするのでいくつか参考にしたいサイトを探してみました。単なる... 続きを読む