最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
スクロールすると左右から画像が集まってくるWebデザインのNizoっぽいやつをjQueryで作る - かちびと.net
以前少し話題になった、Nizoというサイト がああります。このサイトで導入している、 スクロールに応じて要素をアニメーション させるエフェクトがちょっと素敵なんです が、これと同じような効果をjQueryで作る、 というのが今日の記事内容です。 どんなエフェクト？って思われた方はNizoでスクロールしてみてください。このエフェクトをjQueryで作る方法が公開されていたので一応メモです。 Intriguing animate-on-scroll effect スクロールすると左右からいろいろ集まってきます。まぁそれだけなんですが、インパクトはありますね。 IE7でも問題なく動作しました。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquer
[CSS]ホバー時に素敵なエフェクトでパネルを変更するスタイルシート | コリス
animated icon on hover デモページ [ad#ad-2] デモではパネルにマウスホバーすると、背景を変更しアニメーションのエフェクトを適用します。 実装方法 HTML HTMLはシンプルです。 ポイントとなるのは、h3やpなどのブロック要素をa要素で内包している点です。これはHTML5を使用する限りvalidです。 <!doctype html> <html lang="en"> <head> </head> <body> <a href="#" class="hover-panel"> <h3>Panel Title</h3> <p>Additional information about the panel goes in a paragraph here</p> </a> </body> </html> [ad#ad-2] CSS：ノーマル時のスタイリング まずは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リニューアルに使いたいオシャレな動きCSS＆JSパーツまとめ20選 | 楽天ティップスRakutenTips
実用的なスタイルシートのテクニックのまとめ | コリス
