RoyalSlider - Touch-enabled Image Gallery and Content Slider Plugin タッチ可能でレスポンシブなスライダー実装「RoyalSlider」。 スライダ内には動画やHTML等なんでも埋め込めOKで、タッチ対応＆レスポンシブでモバイル対応OK。スライダーのデザインが豊富なテンプレから色々と選べて、それぞれカッコいい物が実装できます。 あんまり見たことのないようなインタフェースのスライダーなんかもあり、それぞれカッコいい。有償＄１２となりますが、検討してもいいほどクオリティが良いです ラップトップを枠として写真を切り替えるAppleっぽいスライダーも良い感じ。 関連エントリ jQueryとCSS3でダイナミックに動くコンテンツスライダー エフェクトが色々選べるイメージスライダー実装jQueryプラグイン「Adaptor」 Apple

Simple Modal - Another window modal クールなモーダルダイアログ実装ライブラリ「SimpleModal」。 CSS3を使った綺麗なモーダルダイアログの実装ライブラリです。 HTMLや動画の埋め込みも可能で表示の際のエフェクトもカスタマイズ出来るみたいです。 IE8系のブラウザでも綺麗に出力されるようでした。 関連エントリ 今こそ知っておくLightbox風プラグイン20+ CSS3で出来たクールなLightBox実装チュートリアル

How to Create an Interactive Graph using CSS3 & jQuery - DesignModo CSS3とjQueryでインタラクティブなグラフを作成するチュートリアル。 次のような美しく、マウス操作でインタラクティブに動くグラフを実装するチュートリアルです。 とりあえずライブラリにまかせておけばよさそうなグラフではありますが、俺はグラフもデザインするぜ、という方はメモっておけばいつか参考にできそう ざっとソースを読んだらやっぱり大変なことになるわけで、ライブラリを作っている方に感謝しなければいけないと感じました。 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 HTML5で綺

そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu

slideControl.js jQuery Plugin CSS3を使ったクールなスライダー実装jQueryプラグイン「slideControl.js」。 次のような綺麗なスライダーが実装出来ます。CSSでデザインされているので見た目を変更するのも容易で、スライダー自体のカスタマイズも可能。 CSS3非対応ブラウザでもスタイルはちゃんとあたってませんがちゃんと動くみたいです。 マークアップ的にも、<input type="text" value="4.0" class="slideControl" /> のような input type="text" のものを$('.slideControl').slideControl();のように初期化すればスライダー化して便利 関連エントリ 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 これは新しい円形のスライダーが実装できる「Tin

The Creation of a CSS3 Clickable, Rotating Menu | InsertHTML クールな円形メニューをピュアCSS3で実装するチュートリアル。 クリックすると回転したり良い感じに立体感が出ていたりアニメーションしたりCSS3の機能をフルに使った円形メニュー。 奇抜なメニューであっと驚かせたいという場合に使えそうです デモページ メニューアイコンもしっかり回転されています。 関連エントリ アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」 ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ jQueryとCSS3を使ったPath風の円形メニューサンプル ゲームに出てきそうな円形メニュー実装jQueryプラグイン「Pretty Pie Menu」

Portfolio Flipping Slider Using jQuery & CSS3は、ポートフォリオをくるくる回転させながら見せられるスクリプトです。 CSS3のtransformが使われています。 Portfolio Flipping Slider Using jQuery & CSS3

JZoopraxiscope - jQuery plugin for making animations from static images. 一枚の画像を高速にスライドさせてアニメーション表示する「JZoopraxiscope」 次のような横長の画像を高速に横にスライドさせることでアニメーションさせてしまうものです。 ブラウザプラグイン不要で好きなサイズでアニメーションさせられます。 GIFアニメでもなく、FlashでもHTML5のvideoでもないアニメーション実装方法として知っておいてもよさそう 関連エントリ WEBデザイナーなら見ておくべきCSS3のアニメーションチュートリアル アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」 CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Tran

3D Flipping Circle with CSS3 and jQuery | Codrops 円形の冊子ページをめくる風機能をCSS3とjQueryで実現するチュートリアル。 ページめくりといえば四角が一般的ですが、次のように丸い冊子をめくるエフェクトが斬新です ページをめくる際の影のエフェクトなんかも結構リアルに再現されています めくった所。 ただ四角いページめくりよりもインパクトがありますね 関連エントリ HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ページめくりを実現するためのjQueryプラグイン集 ページめくりができるInstgramのWEBマガジン作成チュートリアル

Swatch Book with CSS3 and jQuery | Codrops 超リアルな単語帳っぽいものを作るCSS3＋jQueryチュートリアル。 次のような綺麗なデザインの単語帳っぽいものを実装するチュートリアルです。クリックすればインタラクティブに回転等を加えながら動くのが特徴です。 CSS3によって秀逸にデザインされているため、質感はかなり美しく、更にアニメーション等の動きが加わることでよりリアルになってます。 若干動きがもっさりしているようですが、一度見ておいて損はないデモです 一昔前は、ちょっとWEBのデザインが上手であればプロに間違われるなんてこともありましたが、こういうのが当たり前になってくると、プロとアマの差がどんどん広がってくるのかもしれませんね。 関連エントリ CSS3でシャレオツなリストを作るチュートリアル コンテンツをアニメーションさせつつ切り替えるタブを

Pie Menu (like Path Menu) using jquery and CSS3 by Nikesh Hayaran jQueryとCSS3を使ったPath風の円形メニューサンプル クリックするとアイテムが回転して良い感じに配置されるPathですが、それをjQueryとCSS3で実現できるスクリプトがGithubにて公開されています。 ウェブ上でカスタマイズをすることも可能。 スマートフォン等で使うとオッ、という感じでインパクトを与えられそうですね。 関連エントリ ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」 面白いフローティングナビゲーションを実装できる「jQuery Floater」 今までなかったスマートなページ内ナビゲーションを実装するjQueryプラグイン「Flexible Nav」 ページ内スクロールならコレにおま

jQuery Transit - CSS3 animations for jQuery CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」。 CSS3のanimation、transitionアニメーションがありますが、これをjQueryのanimate風にしてより直感的に使いやすくするものです CSS3にアニメーションを書くのは気持悪いという方は、こうしたライブラリを活用してみるとよいですね 使い方は以下のように、animateの代わりに transition というメソッドを使うというものです。 $('.box').transition({ x: '90px' }); コードとデモの例 他にも３Dに回転するアニメーションやイージング等、アニメーションはこれでOKというぐらい多彩なアニメーションが可能です。 組み合わせることでダイナミックな表現

Fullscreen Slit Slider with jQuery and CSS3 | Codrops jQueryとCSS3でダイナミックに動くコンテンツスライダー。 アニメーションがカッコよくてネタはなくとも実装したくなるかもしれないスライダーです。 デモページ どうやって実装しているんだろう（＾＾；）とか思いつつ、チュートリアル記事もあるのでそこで学習できます。 プログラム一式ダウンロードも出来るので素材としても。 関連エントリ レスポンシブなjQueryスライダー実装プラグイン８個 AppleっぽいデザインのjQueryスライダーサンプル 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグイン「Sequence.js」 画像のキャプションが美しいスライダー実装jQueryプラグイン「RefineSlide」

Sweet Tooltip a jQuery & CSS3 Tooltips ? Webstuffshare ? Learn and share. The simplest harmony. 可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」 次のような可愛いモダンなデザインのツールチップの実装デモが公開されています。 目立たせたい時や注目してもらいたい場合に使うと効果的ですね。通常のデザインも入っているようなので使い分けられそうです ファイルをDLすればデモのHTMLとCSS, JSが入っているので変更して容易に利用できます 関連エントリ もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 簡単コードで実装＆カスタマイズできるツールチップ実装jQueryプラグイン「Poshy Tip」 シンプルなツールチップ実装ができるj

Public Snippets コードは、現在7つのカテゴリに分けられています。 CSS Apache PHP JavaScript jQuery HTML XML Others [ad#ad-2] 例えばCSSだと、clearFix、角にリボンを配置、画像のフリップ、フッタの固定表示など、たくさんの便利なスニペットが登録されています。 CSS: Clearfix CSS: Pure CSS Corner Ribbon CSS: Flip an Image CSS: Sticky Footer スニペットのページでは、シンタックスハイライト、テキスト表示に対応しており、テキスト形式でダウンロードできます。