Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」:phpspot開発日誌

2013/05/22 43 users FLIP jqueryプ phpspot開発日誌 ブラウザ上

Jquery-flip Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」。 次のように、縦にも横にもページをめくる風のUIが作れます。アプリ程ではないにせよ、面白いエフェクトがブラウザ上で作れるのはいいですね 使い方次第だとは思いますが、１から作ろうとすると大変そうなので覚えておくとよさそう 関連エントリ １ページ内で複数ページに分割できるjQueryプ... 続きを読む

[CSS]円形エレメントの実装とホバー時に面白いアニメーションのエフェクトを与えるスタイルシート | コリス

2012/08/09 87 users ホバーエフェクト エレメント チュートリアル 円形 コリス

最近よく見かけるようになった円形のエレメントに、ホバー時に普通のより面白いエフェクトをCSS3アニメーションで実装するチュートリアルを紹介します。 Circle Hover Effects with CSS Transitions 右：ホバー時のアイテム、左：通常時のサムネイルの状態です。 円形エレメントの実装 ホバーエフェクトのデモ 円形エレメントの実装 まずはベースとなる円形エレメントの実装で... 続きを読む

[JS]パララックス、スライドなど、スクロール時のエフェクトをよりスムーズにしたスクリプト -SuperScrollorama | コリス

2012/05/27 172 users パララックス コリス トゥイーン エフェクト スクリプト

パララックスをはじめ、フェードやスライド、トゥイーンなど、多種多様なアニメーションに対応している、「スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ」で紹介した「scrollorama」を強力にパワ [...] 続きを読む

[JS]文字にアニメーションを使った面白いエフェクトを与えるスクリプト -Text Effects | コリス

2012/04/01 75 users コリス TypeWriter jquery.js スクリプト

Scrambled Writer 文字をごちゃまぜにし、アニメーションで元通りにします。 Text Effectsの使い方 Text Effectsの使い方は簡単で、「jquery.js」と当スクリプトを外部ファイルとして記述し、スクリプトを実行するだけです。 「Typewriter」を例にすると、下記のようになります。 HTML <div id="my-container"> Lorem ips... 続きを読む

iPhoneのカメラのレンズに水を1滴垂らすだけの虫眼鏡エフェクト : ライフハッカー［日本版］

2012/03/27 6 users iPhone Scientific American 1滴

Apple , iPhone , 写真 , 豆知識 , 趣味 iPhoneのカメラのレンズに水を1滴垂らすだけの虫眼鏡エフェクト 2012.03.27 13:00 コメント数：[ 0 ] Tweet iPhoneに使える賢いハックはたくさんありますが、「Scientific American」によると、iPhoneのカメラのレンズに水を1滴垂らすと、虫眼鏡を覗いたかのような面白いエフェクトのかかっ... 続きを読む

[JS]スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ | コリス

2012/02/23 348 users jQuery コリス パララックス スクロール バス

パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。 scrollorama スクロールに合わせて、 [...] 続きを読む

スクロールした時に面白いエフェクトが実装されたサイト集:phpspot開発日誌

2011/12/02 36 users phpspot開発日誌 サムネイル 一見 付加価値 価値

30 Examples of Parallax Scrolling Effects in Web Design スクロールした時に面白いエフェクトが実装されたサイト集 サムネイルでは一見普通のサイトですが、スクロールすることで動きが出たりして一見の価値のあるサイトがあつまっています。 ちょっとしたサプライズ効果があり一工夫されていることで印象に残るサイトになりそうです こういう付加価値を付けられる... 続きを読む

2D、3Dの多彩で面白いエフェクトを備えたスライダーのスクリプト -Flux slider

2011/06/16 52 users スライダー スクリプト iPhone jQuery エフェクト

iPhone, iPadなどにも対応した、画像のスライド時にCSS3アニメーションを採用し多彩なエフェクトが楽しめるスライダーを実装するjQueryのプラグインを紹介します。 画像の変更時は、上記のバー状のものをはじめ、ブロック状、サークル状など、2D、3Dのダイナミックなアニメーションが用意されています。 Flux sliderの実装 HTML 各画像をdiv要素で内包します。 続きを読む

[CSS]テキストに面白いエフェクトを与えたデモと実装の注意点 | コリス

2011/04/26 77 users コリス transparent CSS 実装 デモ

下記は各ポイントを意訳したものです。 テキストにブラー効果を与える方法と注意点 テキストにブラー効果を与えたデモ テキストにブラー効果を与える方法と注意点 テキストにぼんやりとさせるブラー効果を与えるのは、簡単です。テキストのcolorを透明にし、text-shadowを使用します。 .blurry-text { color: transparent; text-shadow: 0 0 5px r... 続きを読む