jQueryに関するpippiyukiのブックマーク (27)
-
pippiyuki 2012/06/22
-
-
画像ポップアウト・イメージギャラリー・スライドショー｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Lightweight Circle slideshow〔くるくる回して画像を切り替える円形のイメージギャラリー〕 Smooth Div Scroll〔水平方向に並べた画像をマウス操作でするするスクロール〕 Nivo Slider〔9種類のエフェクトがかけられるイメージスライダー〕 Galleriffic〔画像ギャラリーをリッチかつ高速にレンダリング〕 IMGPREVIEW〔マウスオーバーでリンク先の画像をプレビュー表示〕 jQuery largePhotoBox plugin〔大きな画像対応ポップアップ（マウス移動で画像全体を閲覧可能）〕 PIROBOX〔シンプルかっこいい画像ポップアップ〕 bxGallery〔シンプルな画像ギャラリー〕 A Simple jQuery Slideshow〔シンプルなスライドショー〕 Accessible News Slider〔全件表示や件数に応じて前
-
jQueryで実現するアニメーションTips13選「13 Excellent jQuery Animation Techniques」
TOP > WebDesign > jQueryで実現するアニメーションTips13選「13 Excellent jQuery Animation Techniques」 最近のWEB制作ではよく使われるJavaScriptライブラリの1つ「jQuery」。様々な動きをつけることが可能ですが、今日紹介するのはjQueryを使ったアニメーションのTipsをまとめたエントリー「13 Excellent jQuery Animation Techniques」です。 Create a Cool Animated Navigation with CSS and jQuery 全部で13のjQueryを使ったアニメーションのTipsが紹介されていますが、今日はその中から気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Timothy van Sas – Animate
-
Codrops | Useful resources and inspiration for creative minds
Collective 🎨✨💻 Stay informed and inspired with our daily selection of the most relevant and engaging frontend and design news. Zero fluff, all quality—every single day. Demos Hub: Explore 500+ free demos 🔥👾 Discover our collection of 500+ free animations, interaction concepts, UI designs, web templates & more. Webzibition 💎✨ Discover fresh gems in our handpicked exhibition of standout website
-
jQueryのプラグイン100選 -2008年総集編 | コリス
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
-
-
ナビゲーション、メニュー｜jQuery plugin｜Ajax｜PHP & JavaScript Room
animateToSelector〔CSSとjQueryを使用したリスト要素のドロップダウンメニュー〕 Another Solution to Animation Queue Buildup in jQuery〔待機アニメーションの補強〕 CSS Dock Menu〔Mac OS Xのドック風のメニュー〕 CSS Sprites2〔jQueryとPHPを使用した投票システム〕 CSSとjQueryを使用したリスト要素の垂直型ドロップダウンメニュー CSSとjQueryを使用したリスト要素の水平型ドロップダウンメニュー Designing the Digg Header〔Diggのヘッダ風の垂直型ドロップダウンメニュー〕 Emenu〔ヘッダ画像内に収まる固定幅・固定高さのドロップダウンメニュー〕 Fixed Fade Out Menu〔ロールオーバーでフェードアウトするページ上部固定ナビゲー
-
jQueryを使って円形イメージギャラリーを作成するプラグイン「jQuery Roundrr」｜BLACKFLAG
jQueryを使っての円形ギャラリーはいくつかプラグインがありますが、 さまざまなパターンで構成された円形ギャラリーを実装可能とさせるプラグイン 「jQuery Roundrr」がおもしろそうだったのでメモ書き程度に紹介してみます。 Animated fullscreen background image slideshow using jQuery ≫jQuery Roundrr – How To Create Circular Image Galleries With jQuery チュートリアルはPart1とPart2に分かれて紹介されており、 それぞれ複数パターンのデモが用意されています。 サンプル画面と各デモ画面は以下のような感じに。 Part 1 – Getting started with Shape-based coordinates jsShapeLib Demo 1:
-
背景画像をフルスクリーンでスライドショーさせるjQuery「Animated fullscreen background image slideshow using jQuery」｜BLACKFLAG
jQueryを使って、フルスクリーン表示した背景画像とコンテンツ要素を シンプルなアニメーションでスライドショーさせる 「Animated fullscreen background image slideshow using jQuery」が 使い勝手良く、スクリプトの参考にもなりそうだったのでメモ書きしておきます。 ≫Animated fullscreen background image slideshow using jQuery ≫デモページはこちら デモページ画面上に表示されている「１」～「４」までのボタンをクリックすると 背景画像とコンテンツ要素がスライドアウト → スライドインして表示されます。 上記の紹介ページには実装の際のHTML、CSSコードの記述方法や SCRIPTのチュートリアルが用意されています。 （プラグインというよりかは直接スクリプトを書き込んで使うタイプと
-
-
jQueryで背景画像を全画面表示する
jQueryで背景画像を全画面表示する 最近ではjavascriptでも表現できることが飛躍的に増え、Flashサイトのようなリッチなサイトも多くなってきましたね。 ということでFlashサイトと聞いて一番最初に思い浮かべそうな背景画像の全画面表示というのをjQueryで作成してみたいと思います。 投稿日2010年11月30日 更新日2011年04月26日 html+cssの準備 背景画像を全面表示するっていうタイトルですが、cssのbackgroundにはサイズを指定するプロパティがないので、気持ち悪いけど画像は普通に配置します。 html <img src="101121_2.jpg" width="100%" height="100%" id="bg" /> <div id="contents"> <h1><a href="#">jQueryで背景画像を全画面表示する。</a></h
-
-
迫力あるフルスクリーンの背景スライドショーが実装できるjQueryプラグイン:phpspot開発日誌
Full Screen Background/Slideshow | jQuery Plugins 迫力あるフルスクリーンの背景スライドショーが実装できるjQueryプラグイン。 ブラウザのサイズに応じて画像のサイズも切り替わるというフルスクリーンのスライドショーが実現可能です。 大きめの解像度の写真を迫力そのままに出したいみたいなシチュエーションで使えるかもしれません。 フッターにサムネイルつきのナビゲーションもついてます。 実装は、各種表示用のオプションに加え、画像のデータを配列で渡してあげるだけという簡単仕様です。 関連エントリ これは新しい、回転させて切り替えるスライドショー実装jQueryプラグイン 次の画像が何なのかが分かりやすいフルスクリーンのスライドショー実装jQueryプラグイン「SuperSized」
-
コンテンツをループスライドするjQueryプラグイン「jQuery.simpleLoopSlider.js」
先日作ったループスライダーですが、せっかくなのでプラグインにしてみました。 よかったら使ってください。 IE 6でも動くと思います。 jQuery.simpleLoopSlider.js DEMO jQuery.simpleLoopSlider.js ダウンロード ライセンスはMITです。 使い方まず、jQuery.jsとjquery.simpleloopslider.jsを読み込ませ、任意の要素に適用します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.simpleloopslider.js"></script> <script type="text/javascript"> $(function () { $('#myslider'
-
WanderWall – A jQuery, CSS3 & HTML5 Hover-Based Interface | AddyOsmani.com | Where Web Businesses Grow
Hey guys. Today I’m going to teach you how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. Why a hover-based interface? you might ask. Well, with the popularity of touch-based web applications simplifying the way that people can use sites on mobile devices, I think that there’s room for us to look into ways of making it even easier for people to use sites in
-
jQuery.flyout | 設置サンプル
▼サムネイル画像をクリックすると、元画像がフライアウトしながら拡大表示されます。 Demo 1 - Default configuration <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta htt
-
Jon Montenegro | award winning interactive creative design and art
creative Jon ux Montenegro direction communicate art modern director idea gallerys perfection create concepts typography selected Work experience augmented reality ar bright semantic infographics mobile ux philadelphia publications visual design user apps exhibit peace architecture research interface design arts interactive us calm awards museum ethnography found cloud photography blog clear webwa
-
-
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
